AJAX reload DIV

Question

I want to reload my div names shoutbox:

echo '<div id="shoutbox"><ul>';
    $results = $db->query($sql);
    foreach ($db->query($sql) as $row) {
        echo '<li>';
        echo '<span class="date">'.date("d/m/Y H:i", strtotime($row['date_time'])).' </span>';
        echo '<span class="name">'.$row['name'].' - </span>';
        echo '<span class="message">'.$row['message'].'</span>';
        echo '</li>';
    }
    echo '</div></ul>';

But i don't know how to do that with AJAX... sow the div has to reload when you klik the submit button and every 60 mili-seconds.

if someone can help me, it will be fine.

"and every 60 mili-seconds" This wouldn't be possible using ajax. It is but it's just calling for trouble. As i see it, you should use WebSockets instead or rethink about your logic — A. Wolff, Feb 18 '14 at 18:56
even every second can be dangerous. Use long-polling instead. — Kevin B, Feb 18 '14 at 18:58
... long polling is what i recommend. http://stackoverflow.com/questions/333664/simple-long-polling-example-code — Kevin B, Feb 18 '14 at 19:00
I would send via ajax for a .php then return an html with the data and just put the data inside the `shoutbox` by using .html(data) — Michel Ayres, Feb 18 '14 at 19:05

Brian Anderson · Answer 1 · 2014-02-18T20:34:43.890

0

Michel is on the right track. You should get the data from php, and return json formatted data so that the client can update in javascript. Check out the jquery getJSON function: http://api.jquery.com/jquery.getjson/. Then you set that in a javascript "setInterval" function, like this:

setInterval(function(){
    $.getJSON( "ajax/test.json", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
      });

      $( "#shoutbox ul", {
        html: items.join( "" )
      }).appendTo( "body" );
    });
}, 100);

This would reload the array of data every 100 miliseconds.

edited Feb 18 '14 at 20:34

answered Feb 18 '14 at 19:30

Brian Anderson

621
7
22

I guess you mean setInterval instead or better a timeout which be recalled once request has completed. But anyway calling an ajax request every 100ms is not a good practice – A. Wolff Feb 18 '14 at 19:54
2

Thats a terrible idea. If the call takes more than 100ms to execute, calls will be issued in parallel until the browser goes boom. You can instead put a setTimeout in the success handler to call itself again - so it only launches a new request 100ms after the last one finished. – AD7six Feb 18 '14 at 20:41

AJAX reload DIV

1 Answers1