Skip Navigation

[Resolved] javascript event on frontend filters – updating search programmitically

This support ticket is created 5 years, 3 months ago. 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.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+01:00)

This topic contains 7 replies, has 2 voices.

Last updated by Nigel 5 years, 3 months ago.

Assisted by: Nigel.

Author
Posts
#1486025

Tell us what you are trying to do?
We have a mapbox data set returning results that we wish to pass onto a frontend filter

Is there any documentation that you are following?
I was looking at js_event_wpv_parametric_search_triggered

Is there a similar example that we can see?
was hoping you had some examples?

But as an example we have in our search filter [wpv-control-post-taxonomy taxonomy="ocean" type="select" url_param="wpv-ocean"]
and our mapbox map would return something like "pacific-ocean" and we'd like to update the toolset view search

What is the link to your site?
it's local at moment

#1486709

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

If I've understood you correctly, it sounds like you have this back to front.

The custom JS event js_event_wpv_parametric_search_triggered—and other such events—are triggered after a user has initiated a Views search.

I don't know what your mapbox data set is or how it works, but it seems like you need to react to an event from mapbox that it has some data, and then use that to trigger a Views search using that data.

If you are using a taxonomy filter you will note that when you apply it the URL will update with parameters relating to the search.

The key is the parameter for the taxonomy, so on my local site where I have a search for the "colour" taxonomy and I choose "red", the following URL parameter is added:

?wpv-colour=red

(Note that might look slightly different if you are displaying the taxonomy filter as checkboxes, pay attention to the different format if so.)

In your case, mapbox does something (I don't know anything about that) which gives you the result "pacific-ocean".

So whatever code you have running, triggered by mapbox, you can reload the current page and append the URL parameter ?wpv-ocean=pacific-ocean, so that the page updates with the taxonomy search term pre-selected, with the corresponding results displayed accordingly.

#1489547

Hi Nigel. thanks

Would work, but I wanted to avoid a full post back as the visual data on the mapbox map is related to the custom taxonomy.

A bit about the map:
The map essential has polygon data for the oceans, seas, rivers and lakes. When a user searches a location on the planet geo-reference the location against these data sets to see what falls into / crosses a polygon. Based on that result we're wanting to display organizations that are helping make these waterways clean. Organizations register and apply the applicable waterway(s)

We're trying to bring local people in touch with local Organizations to help clean our waterways. 🙂

any other ideas?

#1489797

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

" I wanted to avoid a full post back".

Sorry, what did you mean? You want to avoid reloading the page?

Users make a selection on the map which somehow provides you with a taxonomy term for some water resource, and you want the View to update to show results matching that taxonomy, without a page load, is that right?

You are effectively missing the part where you can, with JavaScript, trigger an update of the View that includes some URL parameter.

Is that right? If that is the case I'll have a think about what is required, but let me know I'm on the right track first.

#1491211

hi Nigel.

Yes you on the right track 🙂

>> yes >> missing the part where you can, with JavaScript, trigger an update of the View that includes some URL parameter.

URL parameter = the taxonomy from the map result...

many thanks again

#1491997

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

I checked with the developers whether the WPViews JavaScript object has a public API that could be used to trigger an ajax update of the View on the page (with updated parameters passed to the View), but they said not.

The way you would need to do this is perhaps a little hacky, but requires that your View is a custom search View that includes a filter for the taxonomy in question and a submit button, where the View settings are to update the results via ajax when submit is clicked.

(If you don't want your users to interact with this search form you would need to hide it with CSS.)

Then your JS that is triggered by interacting with the map can update the value of the taxonomy filter (you will want to use your browser controls to inspect the markup for the filter control so that you can target it, likely based on the name attribute), and then fire the click event on the submit button.

Can you give that a try? Let me know if you get stuck.

#1492749

Thanks Nigel

yeh shame. Was already going down that hacky road... just thought to ask via the forum to see if WPViews had a cleaner way. Will reachout again if i get stuck.

cheers and again thanks for your support
have a great day 🙂

#1493555

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

No problem, let me know if you have problems, otherwise you can close here in the next few days when you have it working...