Databases
StackOverflow2013
Postsdbo
PONeed help loading content via ajax
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed help loading content via ajax
    primarykey
    data
    text
    <p>Consider the following script:</p> <pre><code> $(".workSnippet").click(function () { //set variable portfolioCount based on index portfolioCount = $(".workSnippet").index(this); //load content based on portfolioCount $('#work #cycle' + portfolioCount).load("ajax-content/ajax-content.php #portfolioImage" + portfolioCount); // when loaded, run animation functions $("#work").ajaxComplete(function(){ //help required here setTimeout(invokeMultipleCycle, 200); showWork(); }); </code></pre> <p>On my page, there are multiple 'thumbnails' called .workSnippet. When you click one of these, I want it to load content via ajax. It selects what content to load in conjunction with the index function. I have this working absolutely fine.</p> <p>The problem is, it's a little messy. When you click .workSnippet it runs an animation, however the high quality image loads slowly whilst the animation is taking place.</p> <p><strong>What I want to do:</strong> </p> <ol> <li><p>Wait for the ajax request to <strong>complete</strong> before loading the functions invokeMultipleCycle and showWork.</p></li> <li><p>Before the animation occurs, add an ajax loading animation absolutely positioned above .workContent.</p></li> </ol> <p><strong>Please bear in mind two things:</strong></p> <ol> <li>There are multiple .workSnippets on the page.</li> <li>The content is <strong>not</strong> loaded in workSnippet, but another div called #work.</li> </ol> <p>You will see I have already tried to attempt this uses the ajaxComplete function. However, it does not seem to work. Perhaps this is because the ajax request completes but the image still needs to 'load'?</p> <p>Your help will be most appreciated.</p> <p>Thanks,</p> <p>Steve</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCarbonDry
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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