Run script on every infinite scroll request

Anonymous

#239953

Hey people, don’t know if it’s the best approach, but I need my results show as an accordion, so when user click on results’ titles it’ll open their respective content right bellow it.

So I’m using jQuery UI Accordion widget to accomplish this, added some ajax things to pull content on click, ok.

I’m initializing the accordion function on a custom .js placed after every script on footer (via wp_enqueue_script).

The site is also using infinite scroll with shortcode output.

The problem is that the accordion is working only on page 1 of results, of course because page 2+ results are not on DOM when the script loads.

Is there a way to re-run the script when a new bunch of results are loaded?

Thank you in advance!

Anonymous

#239961

Just in case, I’ve tried sf:ajaxstart/sf:ajaxfinish as mentioned on FAQ page.

Anonymous

#239983

Well, I made it work with sf:ajaxfinish but this works only on unfiltered results, how to make it work on filtered results?

Trevor

#240026

It should work with sf:ajaxfinish.

What is the script that you are using (place it between code (back) ticks, as you have already done)?

You could log a comment to the console to check if it is running (console.log("script run");

Anonymous

#240176

Hey Trevor, I had some attempts yesterday, but not solved yet.

When I posted the last reply my code was

var accOptions = { header: ".result-header", heightStyle: "content", active: false, collapsible: true };

$("#results").accordion(accOptions);
console.log("init accordion");

$(document).on("sf:ajaxfinish", ".searchandfilter", function() {
    $("#results").accordion("refresh");
    console.log("sf:ajaxfinish script run");
});

Here, my console shows only init accordion on first load of results, that’s ok.

When I scroll, it shows sf:ajaxfinish script run for every page and currently open item keeps open. That’s ok too.

But when I activate any filter, it shows Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy', so I assume accordion is not initialized, right? I switched $("#results").accordion("refresh") for $("#results").accordion(accOptions) to see what it happens and this way the accordion works on every first page, filtered or unfiltered, but not on scroll.

Is there a way to pick these states — first load or new page?

Trevor

#240295

This reply has been marked as private.

Anonymous

#240347

Thank you Trevor, I’ll be waiting 🙂

Ross Moderator

#240382

Hi Pedro

Do you have a link so I can see the logs etc and test it?

I’m thinking, when ajax is performed, the contents of #results is updated but not the container itself, so that probably messes with whether the accordian thinks its initialised properly.

What I would try is something like (untested)

var accOptions = { header: ".result-header", heightStyle: "content", active: false, collapsible: true };

$("#results").accordion(accOptions);
console.log("init accordion");

$(document).on("sf:ajaxstart", ".searchandfilter", function() {
    //destroy it before ajax so we know what we're dealing with on the other side
    if( $("#results").hasClass("ui-accordion") ){
        $("#results").accordion("destroy");
    }
    console.log("sf:ajaxstart script run");
});

$(document).on("sf:ajaxfinish", ".searchandfilter", function() {
    //we know that by the time we get here, there should be no accordian, so init it
    $("#results").accordion(accOptions);
    console.log("sf:ajaxfinish script run");
});

Anonymous

#240465

Hi Ross, thank you for the answer.

I tried your code and it almost works.

The accordion now works on every page and filtered/unfiltered results too, but now it’s destroyed on every page scroll or page change, so if one accordion is open, it’s forced to close on next load.

That’s why I was using $("#results").accordion("refresh") at first attempts and wondering if it’s possible to get first load and new page events.

I can set a temporary online site, would it help?

Anonymous

#240507

Ok, I made it.

After some time trying to understand how accordion is been aplied, mixing some of your code and mine, I got to this solution:

var accOptions = {
  header: ".result-header",
  heightStyle: "content",
  active: false,
  collapsible: true
};

$("#results").accordion(accOptions);
  console.log("init accordion");
}

$(document).on("sf:ajaxstart", ".searchandfilter", function() {
  if (!$("#results").hasClass("ui-accordion")) {
  $("#results").accordion("destroy");
    console.log("sf:ajaxstart script run if has NOT ui-accordion");
  }
});

$(document).on("sf:ajaxfinish", ".searchandfilter", function() {
  if ($("#results").hasClass("ui-accordion")) {
    $("#results").accordion("refresh");
  } else {
    $("#results").accordion(accOptions);
  }
});

I noticed that accordion container loses all classes added by its js when you change page, so I checked for it to destroy or not at sf:ajaxstart and refresh or init at sf:ajaxfinish

Thank you Trevor and Ross for your support!

[Author]

Posts