Databases
StackOverflow2013
Postsdbo
POjquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event
    primarykey
    data
    text
    <p>Using jquery, I am swapping some content in a web page by use of jquery's <code>.load()</code> function. I want to trigger an event <em>immediately</em> once the content has actually been loaded, but <em>not before</em> and <em>not after</em>. I'm up for any graceful solution! Why? In this instance, I'm doing the old "fade out, swap content, fade in" approach. My problem? I want to fade back in AS SOON AS the new content is loaded.</p> <p>Caveats:</p> <ul> <li>Using a callback function as in <code>$('#object').load(url, callback)</code> triggers as soon as <code>.load()</code> function successfully executes (before the content is actually loaded). Useless here.</li> <li>Using a timed delay for fading back in is <em>not</em> a graceful solution. Very "clunky", especially for those with faster Internet connectivity.</li> <li>JavaScript's <code>onload</code> event trigger does not work, as the element that <code>.load()</code> is altering has already loaded into the HTML DOM.</li> <li>jquery's <code>.ready()</code> function also does not work, as the actual element is already loaded.</li> <li>I do not want to create an <code>onload</code> or <code>.ready()</code> sub-container element, because that's a workaround for what I'm actually trying, though it might be as graceful or more.</li> </ul> <p>How can I fire a function when (and <strong>only when</strong>) the new <code>.load()</code> content is finally loaded, just like JavaScript's <code>onload</code> event does? Thanks much.</p> <p><strong>EDIT</strong> As it turns out, the jquery <code>.load()</code> function is working flawlessly, and I'm approaching this wrong.</p> <ul> <li>Once the <code>.load()</code> function completes successfully, it calls any "<a href="http://docs.jquery.com/Tutorials%3aHow_jQuery_Works#Callback_and_Functions" rel="nofollow">callback</a>" function included by the programmer, just like any other jquery function that accepts a callback as one of its "arguments".</li> <li>The <code>.load()</code> function is <em>complete</em> once it either errors or successfully begins the HTML replacement and loading of new content, but that is IT! The content will then take however long it takes to load, but your <code>.load</code> call is already complete before that. Therefore, expecting the callback to run <em>after</em> the <code>.load</code> content has loaded will only disappoint you. ;)</li> </ul> <p>I hope others can learn from this just as I did, including those who thought what I thought was the case. Proof: as stated in the <a href="http://api.jquery.com/load/" rel="nofollow">jquery ajax .load page</a>, the callback is executed when the <strong>request</strong> completes, <em>not</em> when the <em>load</em> completes. Eureka. Whoops. <strong>/EDIT</strong></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USrgettman
    1. USSlink
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COGuide me, oh gurus. I hope my diligence pleases you. I really tried to cover all the angles, but I'm brand new to jquery as of this week, and I'm rather novice with JavaScript. Thank you!
      singulars
      1. POjquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event
      1. USSlink
    2. COThe documentation for .load() in jQuery says: If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. What are you seeing that indicates it is not working as documented?
      singulars
      1. POjquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event
      1. USMichaC
    3. COThanks for bringing that to my attention. It still seems like the callback is firing before the new HTML content is successfully replaced. This is easily tested with a JavaScript `alert("debug")` callback, which I tried. I might have to take a second look, but IIRC, before the browser shows the updated content, the callback fires.
      singulars
      1. POjquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event
      1. USSlink
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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