Question

This is my first post and I’m not really a developer (more an enthusiastic tinkerer).

I’m trying to create some rotating text (the visible item is switched with JQuery every 10 seconds or so) on a website based upon information taken from a MySQL DB.

At the moment I create the HTML directly from the MySQL results before applying the rotation JQuery function after page load is complete. The problem I have is that the creation/rendering of the HTML up front is slowing down the page load time with other elements backing up behind the HTML that is created.

This occurs even though the Javascript isn’t run until the document is loaded (I also know that the DB query takes a couple of milliseconds.) I’ve isolated the issue by forcing the query to return 1 row, 10 rows, all rows etc. noting the slow down in page load time with each change.

The rendered HTML looks something like this:

<div id="container">
    <div class="item">
        <span class="field1">row 1 field 1</span>
        <span class="field2">row 1 field 2</span>
    </div>
    <div class="item">
        <span class="field1">row 2 field 1</span>
        <span class="field2">row 2 field 2</span>
    </div>
    <div class="item">
        <span class="field1">row 3 field 1</span>
        <span class="field2">row 3 field 2</span>
    </div>
    ...
</div>

The solution I have (happy for alternative suggestions) is to render the first row up-front and then create the rest after the page has loaded (there’s a 10 second delay in the rotation which should be sufficient time).

The other benefit to this is that the additional content doesn’t create a mess of my page before the JQuery element starts the rotation process (I can get around this, but two birds, one stone etc.)

I found a post on this forum to create a JSON array from the MySQL data:

<?php
$result=mysql_query("SELECT * FROM my_table");

$my_result_array=array();
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
    array_push($my_result_array,$row);
    }

$json_array = json_encode($my_result_array);
?>

At this point, I’m now stuck. I’ve found some more useful input on this forum for creating the necessary HTML objects after loading:

var t = $.template('<div class="item"><span class="field1">${field1}</span><span class="field2">${field2}</span></div>');

$(selector).append( t , {
 dataPart1: jsonObj.field1,
 dataPart2: jsonObj.field2
});

The bit that I’m not clear on (I know very little about Javascript and JSON) is how I get from my array text as created in the PHP, to this last part which has an object that it can iterate through.

All suggestions are hugely appreciated!

Answer 1

You need to do an AJAX post from javascript:

$.post('file.php', {},
      function(data) {
            //the data variable holds the json returned from PHP
            //parse it
        var jsonObj= $.parseJSON(data);
            //then use it like an object
            $(selector).append( t , {
            dataPart1: jsonObj.field1,
            dataPart2: jsonObj.field2
          });
});

Server-side you need to echo your json variable:

file.php

$my_result_array=array();
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
    array_push($my_result_array,$row);
    }

$json_array = json_encode($my_result_array);
echo $jsonArray;
?>