CODEWITHSUNDEEP
jqueryxmlhttprequestrefresh
sinaasappel
sinaasappel

Reputation:

auto-refreshing div with jquery

When trying to use the code presented here link text I ran into some problems, which was suggested to open up a new question for this problem. Im an using that code here link text trying to create a backchannel for a meeting (it uses the twitter search api to display data, so try please try it with some hashkey to get data in). The problem is though, when the content gets it, it immediately disappears again as if the div get hidden. When looking at the source I can see the contents of the div there but it is not being displayed. Unless the timeout occurs and the error message for the timeout is being displayed then the contents of the div below will stay. For completeness I will put the code being used here:

                <script type="text/javascript">
    function update() {

    $("#notice_div").html('<img src="img/ajax-loading.gif" border="0"/>');
    $.ajax({
        type: 'GET',
    url: 'inc/backchannel.php',
        timeout: 2000,
    success: function(data) {
        $("#backchannelContent").html(data);
        $("#notice_div").html(''); 
        window.setTimeout(update, 2000);
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#notice_div").html('Timeout contacting server..');
        window.setTimeout(update, 60000);
    }
    })}$(document).ready(update);
    </script>

Thanks in advance for any help, I'm not that much of a javascript coder so it feels like walking against a brick wall here :-(

Upvotes: 2

Views: 9776

Answers (2)

Kobi
Kobi

Reputation: 138017

You're having problems because the div's content is loaded before the hiding animation is complete. You can solve it using another callback, like this:
(This is very similar to what Mark wrote, but with anonymous functions)

$(document).ready(function(){
  setInterval(function(){
    $("#random:not(:animated)").hide("slow", function(){
        $("#random").load("inc/backchannel.php").show("slow");
    });//show callback
  } ,10000);//set interval
});//doc.ready

Upvotes: 2

IAdapter
IAdapter

Reputation: 64747

try something like this

function getRandom() {
    $("#random").hide("slow");
    $("#random").load("http://www.google.co.uk", '', callback);
}

function callback() {
    $("#random").show("slow");
    setTimeout("getRandom();", 10000);
}

$(document).ready(getRandom);

Upvotes: 1

Related Questions