calling php from js (w/ ajax)

Question

Hi,

I'm building a basic forum where every post contains some text, first and last name, and the date the message was written. I'd like to have the board update with AJAX constantly, and to add new messages on the fly as they are written. I have a file, getlatest.php?date=... that retrieves all messages from the date in the $_GET till NOW(). It returns the data as an array of objects. Lastly, I JSON-encode the data. I call this function from some AJAX code, like so:

 setInterval("update()", 5000);
                function update(){
                    $.get("getlatest.php", {
                        date: "2009-06-23_16:22:12" //this is just a date I
                                                    //entered for testing
                    }, function(forumdata){
                                        //do something with forumdata here?
                    }, "json");
                }

Now I have the data within forumdata, as in forumdata[0].first_name ect.

I would like to now use PHP to display the comment, like so:

$forumdata = json_decode(forumdata);
foreach ($forumdata as $value)
{
    $newpost = new Post($value); // Post being some class that gets the data from 
                                 // $value and converts it to HTML + CSS
    $newpost->displayPost();     // some function that echo's the HTML
}

I realize what I'm trying to accomplish here is slightly unfeasible, since PHP is a server-side language, and the calculations are at this point client-side, but is there some way (maybe through AJAX?) that I could use PHP to manage the data, once I retrieve it through javascript?

My main reason for wanting to do this is my total lack of knowledge in javascript, so any alternatives for translating the forumdata variable into blocks of HTML and CSS are also great for me.

Answer 1

You should change getlatest.php (or create a new file, getlatesthtml.php) so it returns the HTML output of displayPost(). Then "//do something with forumdata here?" just needs to set .innerHTML of some container somewhere.

Answer 2

You can have getlatest.php return HTML code instead of JSON data. That way, you just have to inject the returned HTML code into your document.

Answer 3

The way to avoid the mismatching of dates/times between the server and client is to have each entry have a unique id. This way, you're able to give a specific record rather than a relative time for your offset. Primary keys in MySQL are an example of this.

Answer 4

Well since you don't want to use too much JavaScript (don't be scared with the popular Libraries and Frameworks it is acutally a pretty easy thing to learn and can save you a lot of the hassle you would have by managing everything on the server side) you can still output just the HTML without decoding it to JSON. So the client does this:

 setInterval("update()", 5000);
                function update(){
                    $.get("getlatest.php", {
                        date: "2009-06-23_16:22:12" //this is just a date I
                                                    //entered for testing
                    }, function(forumdata){
                                           //do something with forumdata here?
      // e.g.
      $("#forum_entries").prepend(forumdata);
                    }, "html");
                }

And the PHP script (getlatest.php) just does this:

<?php
$forumdata = find_posts_after_date($_GET('date'));
foreach ($forumdata as $newpost)
{
   // Echos just the post specific HTML not a whole HTML page
    $newpost->displayPost();     // some function that echo's the HTML  
}
?>

As nerdling already suggested you should not use the Date but the latext Unique ID of the post the client is currently displaying.

Answer 5

I see you've already accepted an answer, but you might want to think about learning to parse the json. There are so many reasons why you'd want to let the javascript handle the display of the data. Think about all of the web services with api's, they return some sort xml or json. Considering you where you are now with jquery, it's as basic as learning about 'each()'. I did some googling, this link looks like it will get you started. Leave comments if you'd like more help.