Refreshing just a div

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

I'd like to refresh just the contents of a div every 10 seconds.

The div retrieves information from a mysql db table using php.

Think chatroom, with a div for the messages, and a textbox below. Can't refresh the whole page as you'll interrupt people when they type into textbox.

AJAX? Anyone care to show a tiny example?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Using jQuery, assuming the library is already loaded earlier in the page.

jQuery sites example -- http://docs.jquery.com/Ajax/load#urldatacallback

And another example, that includes the interval part.

Part of "refresher.html"
Code: [ Select ]
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript">/* script comment */</script>
 
<div id="display"></div>
 
<script type="text/javascript">
//<![CDATA[
// Number of seconds to wait between refreshes
var seconds     = 10;
 
// Function to handle refreshing every iteration
var refresher   = function()
{
    // Adding data to the request forces the POST method to be used by jQuery
    // rather than adding something useless like a timestamp,
    // send something like the location of the calling page
    var data_to_send = {location: window.location};
   
    // Load the contents of the page into the <div>
    $('#display').load('/display-contents.php', data_to_send);
}
 
// Set the function up to execute every "seconds" seconds
// Save a reference to the interval so we can stop it with "clearInterval(refreshing)" later
var refreshing  = setInterval(refresher, seconds * 1000);
//]]>
</script>
  1. <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript">/* script comment */</script>
  2.  
  3. <div id="display"></div>
  4.  
  5. <script type="text/javascript">
  6. //<![CDATA[
  7. // Number of seconds to wait between refreshes
  8. var seconds     = 10;
  9.  
  10. // Function to handle refreshing every iteration
  11. var refresher   = function()
  12. {
  13.     // Adding data to the request forces the POST method to be used by jQuery
  14.     // rather than adding something useless like a timestamp,
  15.     // send something like the location of the calling page
  16.     var data_to_send = {location: window.location};
  17.    
  18.     // Load the contents of the page into the <div>
  19.     $('#display').load('/display-contents.php', data_to_send);
  20. }
  21.  
  22. // Set the function up to execute every "seconds" seconds
  23. // Save a reference to the interval so we can stop it with "clearInterval(refreshing)" later
  24. var refreshing  = setInterval(refresher, seconds * 1000);
  25. //]]>
  26. </script>


display-contents.php
Code: [ Select ]
<?php
echo '<p>Request came from: ' . $_POST['location'] . '</p>';
?>
  1. <?php
  2. echo '<p>Request came from: ' . $_POST['location'] . '</p>';
  3. ?>
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

There are several new rows in the table, but they're not displaying, which means it isn't retrieving the latest information from the mysql database.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Disregard that, I suck ... uh, I worked it out.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I probably forgot to mention something, what was the problem ?
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

It was no error of yours :)

One line of code that I moved from the div to the "display-contents" php file worked out the correct time from the server time (it's off 14 hours). This meant that messages were posted without a date/time.

The page displays the latest 20 messages by date in ascending order, so the messages without a date/time went at the top, and were henceforce cut off. This lead to me believing that they weren't being posted.

Hope that made sense, it's almost 3am here :)
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

PS, I'll send lunch/a beer when my current financial situation allows.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Whoops, I forgot to ask -

Is there something simple I can add to my body onload to ensure that the div loads the same time as the rest of the page, not 10 seconds later?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

You can call the function manually immediately after setting the interval up.

Code: [ Select ]
var refreshing = setInterval(refresher, seconds * 1000);
refresher();
  1. var refreshing = setInterval(refresher, seconds * 1000);
  2. refresher();
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Excellent, thankyou. I owe you several beers :)

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 147 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.