CODEWITHSUNDEEP
phpjqueryhtmlajax
Ian Taylor
Ian Taylor

Reputation: 179

Ajax div refresh (without fading in and out)

So i have looked around and most of the code for this looks needlessly beefy. I am looking for lightweight ajax code that refreshes a div with an action like:

load('boo.php')

And I need it to load first on the page opening (ie no delay) then every x seconds refresh (without fade) so you cannot notice a change unless my Database rows have updated but I can do the db bit.

I think i would need something like:

onreadystatechange

to load when the page loads? Eh im not too sure on this :( any help would be much appreciated!

Thanks!

Upvotes: 0

Views: 1855

Answers (3)

Călin Darie
Călin Darie

Reputation: 6237

I totally recommend using some library for cross-browser support and tested code, e.g. jQuery.

With jQuery, it's as simple as

$.get('boo.php', function(data){$('#divId').html(data);});

You can wrap this in a function and call it on document ready, then use setInterval as suggested by @M1K1O

Update To run the code when the DOM is loaded, the jQuery API documentation for ready states that

All three of the following syntaxes are equivalent:

  • $(document).ready(handler)
  • $().ready(handler) (this is not recommended)
  • $(handler)

Here is a complete example:

function refreshDiv()
{
    $.get('boo.php', function(data){$('#divId').html(data);});
}
$(function()
{
    refreshDiv();
    setInterval(refreshDiv, x * 1000); // x is the number of seconds
});

Upvotes: 2

Vahan
Vahan

Reputation: 534

Do you use some libries like Jquery ? Here is some code on jquery for.

function update() 
{
  $.get(<URI>,{check:1},function(data){
        $('#div').html(data);
   });    

  setTimeout('update()',1500);
}

$(function(){

   update(); 
});

Upvotes: 1

m1k1o
m1k1o

Reputation: 2364

var counter = 0;
var timer = null;
function progressBar(){
if (timer) {
    clearTimeout(timer);
    timer = null;
    return;
}
timer = window.setInterval(function(){
load('boo.php');
}, 10);
}
window.onload = function() {
progressBar();
};

Try this

Upvotes: 1

Related Questions