Jump to content

jQuery stops after .load

Recommended Posts

I'm trying to load a group of blocks from one of my pages (/testimonials) into another page using jQuery's .load function (an Ajax method) and then display them with a fadeIn/Out animation to create a slideshow of testimonials on the current page. The load executes but the lines following do not.

Here is a snippet of the code that's injected into the page header:


$(document).ready( function() {
 $(".col.sqs-col-12.span-12:has(.sqs-block-quote)").addClass("slideshow");
 $(".slideshow").load("/testimonials .col.sqs-col-8.span-8 .sqs-block.quote-block.sqs-block-quote.null");
 $(".slideshow > div:gt(0)").hide();
});

The last line, to hide all but the first block, never executes. However, if I paste that line into Chrome's javascript console, it executes as expected. I'm guessing this might have something to do with Ajax but I really have no idea. My site is using a template with Ajax loading enabled - I've tried disabling it but it makes no difference.

I have Googled and tried various suggestions but am stumped. Any help would be greatly appreciated!

Link to comment
  • 3 weeks later...
  • Replies 1
  • Views 592
  • Created
  • Last Reply

After MUCH MORE searching and trial and error, I found a solution to this problem. I've registered a handler (ajaxComplete) to be called when the Ajax load completes. Here's the revised code for anyone facing a similar situation.


<script>
/* Hide all but the first testimonial */  
$( document ).ajaxComplete(function() {
  $(".slideshow .sqs-block.quote-block.sqs-block-quote.null:gt(0)").hide();
});
/* Load all the testimonials */
$(document).ready( function() {
 $(".col.sqs-col-12.span-12:has(.sqs-block-quote)").addClass("slideshow");
 $(".slideshow").load("/testimonials .col.sqs-col-8.span-8 .sqs-block.quote-block.sqs-block-quote.null");
 /* start the slideshow */
 setInterval(function() {
   $('.slideshow > div:first')
     .fadeOut(3000)
     .next()
     .fadeIn(3000)
     .end()
     .appendTo('.slideshow');
 }, 15000);
});
</script>

While this works, if the user visits another page and then returns to this one, the code doesn't refresh/reload so the initial placeholder div displays until the user manually refreshes the page. Any suggestions for how to automatically reload when the user returns to the page would be appreciated. In the meantime, the game is on! -- as Sherlock would say :)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.