Navigation überspringen

[Gelöst] Stop archive search form reload while pagination

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem:

In my Toolset archive search, the search form reloads during pagination, undoing modifications made by jQuery. This issue particularly affects a collapsible and expandable terms feature I'm using.

Solution:

Adjust your jQuery code to record the state (expanded or collapsed) of each term in an array or object. Upon the ajaxComplete event, use this recorded state to maintain the terms' status after pagination.

Relevant Documentation:

https://stackoverflow.com/questions/21664212/jquery-selector-not-finding-elements-when-it-loaded-by-ajax

https://www.codeproject.com/Questions/886536/Cant-find-an-element-after-I-got-it-using-Ajax-jQu

http://api.jquery.com/ajaxcomplete/

This support ticket is created vor 3 years, 1 month. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Dieses Thema enthält 4 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von fahimS-2 vor 3 years, 1 month.

Assistiert von: Christopher Amirian.

Author
Artikel
#2600895

I have a Toolset archive search where I have kept 'show only filter options that would produce results' turned off. I am using manual ajax pagination with infinite scrolling in the archive. I am also using 'ajax refresh when clicking submit' in the archive.

When I am doing pagination in the frontend, the search form is also getting reloaded along with the results.

I don't want to reload the search form because I have added some jQuery code in the archive which are modifying the search form according to the user behavior. So when the search form is getting reloaded while pagination, it is resetting all the changes made by the jQuery code. Is there any way to stop the form reload while pagination?

#2601181

Christopher Amirian
Unterstützer

Sprachen: Englisch (English )

Hi there,

No, it is not possible as the way Ajax works in Toolset is to replace the whole content (including the search form) and there is no escaping that.

But you can change the way you select the element in jQuery to force it to even select the same element after an Ajax reload.

The idea is that you select an element that is the container (parent) of the section that changes but itself is not changing, then inside the select function, you now select the portion that you want to use.

For more information:

https://stackoverflow.com/questions/21664212/jquery-selector-not-finding-elements-when-it-loaded-by-ajax

versteckter Link

Thanks.

#2601207

Hi,
Thanks for the answer.

In the archive page, I have used taxonomy search. The taxonomy has a lot of terms which are taking a lot of space in the archive page. So what I have done is that I have added a button that users can use to collapse and expand the terms. When a user first visits the archive page, I have kept the terms collapsed with CSS. And after that users can expand and again collapse the terms with the button. I have used jQuery to make the functionality.

So let's say a user has expended the terms. Now if he do pagination, the search form reloads and automatically make the the terms collapsed. But I want to keep them expanded as the user had expanded them in the first place. So actually I want to keep the state of the terms according to the user preference.

Is there any way to do that?

#2601265

Christopher Amirian
Unterstützer

Sprachen: Englisch (English )

Hi there,

You need to implement that in your jQuery code. So basically you create an array or object on your code and record all the states for all the terms (collapsed or not).

Then on the click event of the Submit button you again loop throw the items and see which one is collapsed and which one is not and add it to the array or object.

Then on ajaxComplete jQuery event you can force the states of the items as the ajaxComplete triggers when the ajax call is finished and content is loaded:

versteckter Link

Thanks.

#2601291

My issue is resolved now. Thank you!