Databases
StackOverflow2013
Postsdbo
POHow to make jquery div replacement take effect instantly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make jquery div replacement take effect instantly
    text
    copied!<p>I have a javascript function which creates an image dynamically, then shows that image either in a div or on a separate page. Since the image creation takes a few seconds I'd like to display a simple 'please wait' message so that the user knows something is happening, and I am doing this by replacing the contents of an initially empty div with some text.</p> <pre><code>$('#chartImage').html('Please wait...'); </code></pre> <p>This works fine on it's own - the div contents are displayed immediately when the triggering link is clicked. The problem is when I add the actual image creation code after it, the 'please wait' does not show up until after the image creation is complete, and only for a split second, so it's kinda pointless.</p> <p>Is there something like a flush method to make sure all actions have taken effect before continuing? Alternatively if there is a better way to do this I'm happy to hear it...</p> <p>-------------EDIT-----------------</p> <p>Here is a more complete description of what I'm doing, using open flash chart to make an image:</p> <pre><code>function createChartImage(chartid) { $('#chartImageDiv'+chartid).html('Please wait...'); ofc = findSWF("ofc_chart_"+chartid); x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false ); setTimeout("",1000); //allow some time for upload to complete window.location.href = getViewChartImageURL(chartid); } </code></pre> <p>The 'please wait' appears to take effect immediately before the final line. If I change the div's contents again at that point, the 'please wait' never shows at all.</p> <p>(According to the docs for the charts I'm using, the function 'doneChartUpload' should be called when the upload is complete which would remove the need for the setTimeout, but I spent a long time trying to get it working, even copying code verbatim from the page below, to no avail.) <a href="http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php" rel="nofollow">http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload