Tell us what you are trying to do?
I have a Post type called "Videos"
It has a taxonomy called "Target Groups" with 6 terms
I have created a User field called "User Target Group" - a checkboxes field with the same 6 values as the "Target Groups" taxonomy.
A frontend User form allows users to select "preferences" which update the user field.
I have now created a test view on which displays videos and has a checkboxes filter for the "Target Group" taxonomy - and changes via Ajax.
I can retrieve the user preferences using:
[types usermeta='user-target-group' output='raw' separator=', ' user_is_author='true'][/types]
This gives me a comma separated list of the user's checked "User Target Group" preferences
What I would like to do is have the view filters automatically update according the "User Target Group" field.
i.e.
1. Page loads
2. Page reads "User Target Group"
3. Page applies values of "User Target Group" to the views filter
4. Page updates results via ajax
I think 3 needs js to read the list of selected terms from the user field, loop through them and then check the right boxes on the filter,
and 4 needs to then trigger the ajax to run with the newly selected filters.
If you can help with getting 3 and 4 done that'd be great.
Is there any documentation that you are following?
Various support tickets but none seem to cover this exact thing. E.g.
https://toolset.com/forums/topic/ajax-filtering-with-jquery-call-ajax-filtering-with-jquery/
Is there a similar example that we can see?
Not that I know of
What is the link to your site?
You will need me to send you login details to view the site
I've managed to get part 3 done so that the filters are checked :
var str = document.getElementById("utgs").innerHTML;
var str_array = str.split(',');
//console.log(text);
for(var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
//console.log(str_array[i]);
// Check
document.getElementById("target-group-"+str_array[i]).checked = true;
}
I just need the ajax to be triggered now.
Hello,
In order to make the AJAX search, it needs to add search form into the post view, but you are using the post view insider the user form, and form within form(nested forms) are are invalid HTML as outlined in the W3C prohibitions:
hidden link
form must not contain other form elements.
So there isn't such kind of built-in feature, you might consider custom codes, for example, after user change value in "User Target Group" field, setup JS codes to trigger a AJAX call, and update the content in frontend, more help:
https://codex.wordpress.org/AJAX_in_Plugins
hidden link
And according to our support policy, we don't provide custom codes support, you can also check it with our Toolset Contractors:
https://toolset.com/contractors/
Hi Luo
I think maybe I haven't explained it right. The User form is on a completely different page and is just used for the user to set his preferences so there is no nested form.
User preferences page - User form
Videos view page - View form with both [wpv-filter-meta-html] and [wpv-layout-meta-html]. The filter has the parametric search all set up to use Ajax.
View filters set to "AJAX results update when visitors change any filter values":
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group" id="groupselect">
<label for="wpv-target-group">[wpml-string context="wpv-views"]Target Groups[/wpml-string]</label><br>
[wpv-control-post-taxonomy taxonomy="target-group" type="checkboxes" default_label="All" url_param="wpv-target-group"]
</div>
[wpv-filter-submit output="bootstrap" class="btn-secondary"]
[/wpv-filter-controls]
[wpv-filter-end]
View Layout:
[wpv-layout-start]
[wpv-items-found]
<br>Your saved preferences: <span id="utgs">[types usermeta='user-target-group' output='raw' separator=',' user_is_author='true'][/types]</span><br><br>
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-title]<br>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
On the view page I use
<span id="utgs">[types usermeta='user-target-group' output='raw' separator=',' user_is_author='true'][/types]</span>
to put the existing values of "user-target-group" into a span, then use the JS below to update the checked status of the parametric filter according to what's in that span.
var str = document.getElementById("utgs").innerHTML;
var str_array = str.split(',');
//console.log(text);
for(var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
//console.log(str_array[i]);
// Check
document.getElementById("target-group-"+str_array[i]).checked = true;
}
All I need to do now is trigger the ajax to load results dependent on what is now checked.
I believe it is:
$( document ).trigger( 'js_event_wpv_parametric_search_triggered', [ { view_unique_id: 238378, form: MYFORM, force_form_update: true, force_results_update: true } ] );
I just need to know how to get the correct form data into MYFORM using JS. The documentation is sparse - the only example I can find that does something similar is:
https://toolset.com/forums/topic/the-js_event_wpv_parametric_search_triggered-force_form_update/
Hope that's clearer - I can give you access to the site if it will help.
Hi Luo
Thanks for the reply. I think maybe I haven't explained properly, The User form is on a different page to the view and is just used for the user to set his preferences so there is no nested form.
Preferences page - includes user form
Videos view page - includes post view with both [wpv-filter-meta-html] and [wpv-layout-meta-html]
The videos view has custom search set to "AJAX results update when visitors change any filter values".
Filter code:
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group" id="groupselect">
<label for="wpv-target-group">[wpml-string context="wpv-views"]Target Groups[/wpml-string]</label><br>
[wpv-control-post-taxonomy taxonomy="target-group" type="checkboxes" default_label="All" url_param="wpv-target-group"]
</div>
[wpv-filter-submit output="bootstrap" class="btn-secondary"]
[/wpv-filter-controls]
[wpv-filter-end]
Layout code:
[wpv-layout-start]
[wpv-items-found]
<br>Your saved preferences: <span id="utgs">[types usermeta='user-target-group' output='raw' separator=',' user_is_author='true'][/types]</span><br><br>
<span id="utgs_output"></span><br><br>
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-title]<br>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
I use
<span id="utgs">[types usermeta='user-target-group' output='raw' separator=',' user_is_author='true'][/types]</span>
to get the saved preferences from the current user and place in a span, and then use the code below to update the filters to checked according to the values in the span.
var str = document.getElementById("utgs").innerHTML;
var str_array = str.split(',');
//console.log(str);
for(var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
//console.log(str_array[i]);
// Check
document.getElementById("target-group-"+str_array[i]).checked = true;
}
That works fine. I now need to trigger the ajax event to update results according to what is now checked. I think I need to use:
$( document ).trigger( 'js_event_wpv_parametric_search_triggered', [ { view_unique_id: 238378, form: MYFORM, force_form_update: true, force_results_update: true } ] );
But I don't know how to get the form data using JS to replace MYFORM. The documentation is sparse - the only 2 threads I can find about it are:
https://toolset.com/forums/topic/the-js_event_wpv_parametric_search_triggered-force_form_update/
https://toolset.com/forums/topic/ajax-filtering-with-jquery-call-ajax-filtering-with-jquery/
In the first one of these he seems to use form: data.form but I don't know how to get the right object in there.
Ah sorry, when I first submitted a reply it didn't show up on the thread so I rewrote and submitted again - Apologies for the double posting...
I assume you are using a custom search form with setting: AJAX results update when visitors change any filter values
If it is, you can try below JS codes:
jQuery(".js-wpv-filter-trigger:first").trigger('change');
Hi Luo
That's great, thanks Luo
In case of anyone else needing to do this, my js is:
var str = document.getElementById("utgs").innerHTML;
var str_array = str.split(',');
console.log(str);
for(var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
console.log(str_array[i]);
// Check
document.getElementById("target-group-"+str_array[i]).checked = true;
}
jQuery(document).ready(function() {
jQuery(".js-wpv-filter-trigger:first").trigger('change');
});
