I'm about 80% into my first attack on JQuery/AJAX... how would one correctly write this function:

    function reloadResponses(){
        $('#responses').load('pages/community/load-responses.php?id=<?php echo $id;?>'){
            window.setTimeout(reloadResponses, 10000);
            }; 
    };

I would like to reload <div id="reponses"></div> every 10 seconds. Is this the best way?

I am currently using this to reload the div every 10 seconds:

var auto_refresh = setInterval(
    function (){
        $('#responses').load('pages/community/load-responses.php?id=<?php echo $id;?>');
    }, 10000); 

but it appears to cause my chrome tab to crash randomly (right in the middle of me typing a massive paragraph!) Thoughts?

Thanks DW'ers,
Michael

Recommended Answers

All 14 Replies

Hi all, currently using the code below and it works fine. Are there any risks in reloading a div so frequently?

$('#responses').load('pages/community/load-responses.php?id=<?php echo $id;?>');

    function reloadResponses() {
        $('#responses').load('pages/community/load-responses.php?id=<?php echo $id;?>');                    
    }

    setInterval(reloadResponses, 4000)

Not sure why you have two solutions. I would simply use (untested).
I assume that this is inside <script> tags, inside a php file?

 reloadResponses();

 function reloadResponses()
 {
    $('#responses').load('pages/community/load-responses.php?id=<?php echo $id;?>');
    setTimeout(reloadResponses,10000);
 }

Yeah it's in script tags and located within a PHP file. I didn't mean to post

$('#responses').load('pages/community/load-responses.php?id=<?php echo $id;?>');

I'm not using it :)

Are there are risks involved when reloading a div so frequently?

It seems fine with regard to approach...

Are there are risks involved when reloading a div so frequently?

The main risk that I can see is negatively impacting the client side experience. Based upon what you are implementing, i dont see that as a problem.

Okay great - cheers all!

Member Avatar for stbuchok

Personally if you are worried about performance then I think you should consider two calls. The first call does a quick check to see if the data has changed since last time, if it has, then reload the responses, otherwise do nothing.

I'm not sure on your setup, however if you have 100 responses and the last time there was a response was an hour ago. Do you really want to be pulling all those responses every 10 seconds when the data hasn't changed?

Obviously this depends on the data you are pulling. The other approach I'd consider is push notifications.

Push notifications... care to elaborate? :)

and I might actually run the check not a terrible shout, but it's still the same amount of queries no? If not more when the data has changed?

Push notifications... care to elaborate? :)

servers-sent events...maybe? Not supported by IE though...

I have a demo of that if you are curious.
HTML5 Server-Sent Events

Push notifications... care to elaborate? :)

Or long-polling. Basically returns with changes, or have the AJAX call timeout, following by the next call.

Could you point me to an JQuery article that explains it please? Not too sure what I'd be searching for in this case. Or is it just available for HTML5? I I hate IE JorgeM :)

Cheers,

Michael

Member Avatar for stbuchok

If you are using asp.net you can use SignalR. You also have the ability to only return new responses sintead of everything.

So on the initial page load, load all responses. Then every 10 seconds return only responses that are new (since the last load). If there are no new ones, you aren't returning any data (or just returning an empty array or something).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.