How to fire Custom JS Code after an AJAX pagination or Custom Search action happens in Views

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.

This thread is resolved. Here is a description of the problem and solution.

Problem:
I use some Custom JS in a View wich works fine when I load the page where the View is inserted to manually.
But as soon AJAX pagination or Search of the View is used, the Custom JS Fails.

Solution:
You will need to fire your JS after the AJAX event happens.

In your JS Editor of the Custom Search section in the View edit screen, you have a Button named "Front End events".

Use this button to wrap your custom JS Function in the exact callback where you want it to fire again

This will delegate the Custom JS wrapped with our Hook to the next step, after AJAX of Views fired.

This support ticket is created 8 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	-	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00
-	-	-	-	-	-	-

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Tagged: Views plugin

This topic contains 5 replies, has 2 voices.

Last updated by MichaelR9215 7 years, 12 months ago.

Assisted by: Beda.

Author

Posts

November 27, 2016 at 3:31 am #460777

MichaelR9215

Hello everyone,

I am working on a new website for a cable and internet company. Their website needs a dynamic, and sort-able channel lineup table, much like hidden link.

Has anyone worked on something like this before?

You'll notice on this table, you can click the header to sort based on each column.

You'll also notice that there are a couple of drop-down selects that allow you to switch the table's lineup based on the cable package (small, medium, large, etc.), and the channel type (comedy, sports, travel, etc.).

Can this type of table be fully built, or even partially built with Toolset?

I am trying to avoid building multiple separate tables, as well. I looked into this example's code, and when various options are selected, the table data changes, but it is still the same table.

Please ask me any questions if you need clarification.

Thanks so much!

November 27, 2016 at 5:19 am #460785

MichaelR9215

Hey guys,

I have been working on this, and I am so very close!

I have everything working except for one little thing. I was hoping you might have a reason this is happening.

I have a parametric search using AJAX to change the table without refreshing. Then I put a checkbox in with manual HTML. Using jQuery, I am monitoring when the checkbox is checked and unchecked. I am using jQuery to display: none or display: block on one of the table columns (HD Channels) according to the checkbox state.

My issue ...

When I first refresh the page, this checkbox functionality works great.

As soon as I filter the table with the parametric search, my jQuery checkbox functionality stops working.

Does anyone have any insight into this?

Thanks!

November 27, 2016 at 8:36 am #460820

Beda

You will need to fire your JS after the AJAX event happens.

In your JS Editor you have a Button named "Front End events".
Use this button to wrap your custom JS Function in the exact callback where you want it to fire again (in your case ""The custom search results have been updated")

This should work and solve the issue you see.

November 28, 2016 at 6:07 pm #461387

MichaelR9215

Beda,

Thanks for the reply. Using the wrapper worked to enable the jQuery after the trigger event happens, but I also want my jQuery to be functioning on the first visit/page reload.

Does this mean I have to have my custom jQuery twice, once outside of this wrapper, and once inside?

Thanks!

November 29, 2016 at 6:22 am #461544

Beda

Usually, those wrappers are used to fire again some code that is provided already by certain frameworks but is not fired on AJAX events, so yes, if your JS Code is not present anywhere in the Theme you would need to add it twice.

Does this work?

November 29, 2016 at 3:01 pm #461789

MichaelR9215

Thanks, that answers my question!

The forum ‘Types Community Support’ is closed to new topics and replies.