Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
mlinfoot

jQuery stops after .load

Question

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!

Edited by mlinfoot

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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 :)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...