Waiting for JQuery div to load

Question

Edit: It might be a duplicate but I could not get anything on the forum to work after two solid days of trying as I already remarked in the original post so just trying to get some help...

====

I've spent days trying to solve my problem and tried every suggestion I can find on here and other sites with no working solution.

I have a need to load a Google Chart from another page on the same domain into a div to provide a seamless visual update at set intervals. The graph takes 1 or more seconds to create. The code I am trying loads the chart into the div fine and repeat loads at intervals.

Problem is that visually it looks just the same as hitting F5 and watching the chart be created!

The code I have that I've used and that works in that it loads the graph is:

<script>
    $('#chartA').load('./DataAJ.htm');
    var auto_refresh = setInterval(
    function ()
     {$('#chartA').load('./DataAJ.htm').fadeIn("slow");}, 30000);
</script>

I know by now that I need to add some further code to wait until the load completes. I've tried dozens of examples but none has any effect, either it carries on as was or doesn't work at all but I never see the seamless update I need.

Can anyone provide me with the code changes I need please?

NB the chart is normally called with parameters not shown here that then create it on request

TIA

use `jQuery` ready event aka `$(function () {/*your code here*/});` — Alex, Jul 22 '14 at 07:20
so let me see if I got you right, you want the graph to be fully loaded and then update the graph div with the updated new graph, right? — Amin Jafari, Jul 22 '14 at 07:27
That correct, yes. I keep seeing suggestion and that {your code goes here...} but WHAT code do I put there please? — user3863469, Jul 22 '14 at 07:37

score 1 · Answer 1 · answered Jul 22 '14 at 07:24

1

try this :-

 $('#chartA').load('./DataAJ.htm',function(data){
   //here your page has been loaded and you can add next code
 });

answered Jul 22 '14 at 07:24

Umesh Sehta

10,555
5
39
68

Yes thanks. But what code do I need to add there please? I just at that point want to display the chart butt I've already called load.. – user3863469 Jul 22 '14 at 07:32

Amin Jafari · Answer 2 · 2014-07-22T12:38:31.753

1

if you need the graph to be updated several times ("real time updating") during each pageview then there's a simple logic behind that, you need to load the graph into a visibility:hidden; div, then pour the hidden div html into the graph div after the graph is completely loaded. something like this:

$('#hiddenDiv').load('./DataAJ.htm',function(){
    $('#chartA').html($('hiddenDiv').html());
});

UPDATE:

$("#userlist").load("./HG612-ContainerDataAJ.htm"); 
var auto_refresh = setInterval( function () {
    $('#hiddenuserlist').load('./HG612-ContainerDataAJ.htm', function() {  
        setTimeout(function(){
            $('#userlist').html($('#hiddenuserlist').html());
            },2000);
        });
    } , 5000);

edited Jul 22 '14 at 12:38

answered Jul 22 '14 at 07:39

Amin Jafari

7,157
2
18
43

That looks more like it thanks! Yes, the page could be displayed for hours and has multiple charts that will update at 1 min intervals until the user requests something else. Will try shortly, thanks again. – user3863469 Jul 22 '14 at 07:44
Hi well it almost works but not quite, probably a problem with my bracketing... The hidden div is being populated (if I unhide it) but the transfer doesn't take place... $("#userlist").load("./HG612-ContainerDataAJ.htm"); var auto_refresh = setInterval( function () {$('#hiddenuserlist').load('./HG612-ContainerDataAJ.htm', function() { $('#userlist').html($('hiddenuserlist').html());});} , 5000); Sorry can't get CRs in it seems... Different div names this time. – user3863469 Jul 22 '14 at 11:25
inside the load function you wrote `$('hiddenuserlist')` without the `#` is that a miss-type in here? if not, that could be the problem! – Amin Jafari Jul 22 '14 at 12:22
Yes, I did that because you left it out! Howwver, I guessed it was wrong but adding it may make it work but causes the visible div to refresh as the other one loads via the timer and then return with the new data. The page being called has just an iframe that contains the rendered chart called from another page. Without the iframe the chart won't load remotely despite a lot of trying. Thanks – user3863469 Jul 22 '14 at 12:31
how about now? check out the update again. I wrapped the transfer action in a `setTimeout` function to make sure the page is fully loaded before the transaction! let me know how it goes – Amin Jafari Jul 22 '14 at 12:39
Okay - but it's still the same. With the hidden div actually hidden, the visible one refreshes in the same way as hitting F5 would cause. With it visible they both disappear, then the 'hidden' one updates and the other one then reappears. Sorry! – user3863469 Jul 22 '14 at 13:45
I can not imagine that happening, there must be something else wrong that is conflicting with this process! sorry I'm not able to assist you further. – Amin Jafari Jul 22 '14 at 16:35

score 0 · Answer 3 · answered Jul 22 '14 at 07:54

0

$('#chartA').hide().load('./DataAJ.htm', function() {
    $(this).fadeIn("slow");
});

answered Jul 22 '14 at 07:54

Jan Pfeifer

2,854
25
35

Hi thanks but I can't get that to load at all.... – user3863469 Jul 22 '14 at 12:03

Waiting for JQuery div to load

3 Answers3