Hi
I have a view for searching/filtering a CPT. The view has term filter controls at the top and a map and posts in a grid below and uses ajax to update the map/posts grid without page reload.
In the filter controls I have two sets of seperat term filters. The first one is the primary one and should be shown as default. The second one is secondary and should only be shown when needed.
Therefor I have tried to implemented a button underneath to show/hide the secondary filters (their enclosing div) via javascript/jQuery. If they are shown (user click show/hide button), they should stay visible during use until hidden by the user og the page reloaded/revisited.
But as I use ajax - I guess - each time the filters are changed, the secondary filters are hidden once again on “refresh”/“resorting” and the show/hide button doesn’t respond anymore afterwards - only if you reload/revisit the page.
I have seen some solutions regarding this on your website, that could be somewhat helpful, but I cannot get them to work (it results in the same problem mentioned above), and also need a bit more details, than they give: https://toolset.com/forums/topic/keep-showhide-div-open-after-ajax-search-update/ , https://toolset.com/forums/topic/javascript-to-hideshow-div-in-view-loop-item-targeting-first-result-only/#post-578599
Can you please help me with a solution that includes examples of both html/divs, css and js working together?
I am not super proficient in js…
I have attached two screenshoots. One with the default filters only and one with the secondary filters shown. The two last buttons are for showing/hiding the secondary filters ("Flere filtre") and resetting the search ("Nulstil").
This is my current views search and pagination code for reference (taxonomy="museumsegenskab" is the secondary filters):
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group-search-mus-filter-controls">
<div class="form-group-search-mus-cats">
[wpv-control-post-taxonomy taxonomy="museumskategori" type="checkboxes" url_param="wpv-museumskategori" class="searc-form-checkbox-element" label_class="searc-form-checkbox-label" format="<span class='fa'>%%NAME%%</span>"]
</div>
<div class="form-group-search-mus-attributes" style="display: none;">
[wpv-control-post-taxonomy taxonomy="museumsegenskab" type="checkboxes" orderby="id" url_param="wpv-museumsegenskab" class="searc-form-checkbox-element" label_class="searc-form-checkbox-label" format="<span class='fa'>%%NAME%%</span>"]
</div>
<div class="form-group-search-mus-submit-controls">
<span class="show-hide">Flere filtre</span> [wpv-filter-reset reset_label="Nulstil"] [wpv-filter-spinner spinner="...url removed..."][/wpv-filter-spinner]
</div>
</div>
[/wpv-filter-controls]
[wpv-filter-end]
Best regards,
Andreas
AJAX actions in views require you to r-fire your Custom Code after the AJAX operations of Views are done.
This can be done in the View's Search editor, in its JS section where it says "Front end events"
Clicking on that allows you to add your Custom JS at given moments in the life of a View's AJAX features.
In this case, since you want to A) keep the collapsible open once opened and after AJAX and B) solve the unreactive status after AJAX submits/operations, you need to choose the latest hook possible, being "when the View has finished updating the results" or "when pagination is finished".
If you add your custom JS code to keep uncollapsed and active the collapsible within those hooks, then it will also work after AJAX actions.
I don't see it, but I assume you have JS added to <div class="form-group-search-mus-attributes" style="display: none;">, which changes the display from none to whichever when opened?
That code needs to refire on AJAX Events, and you need to add code to actually keep the display active, after opening it and using AJAX.
That's precisely what Luo suggests here:
https://toolset.com/forums/topic/keep-showhide-div-open-after-ajax-search-update/#post-569660
https://toolset.com/forums/topic/javascript-to-hideshow-div-in-view-loop-item-targeting-first-result-only/#post-578599 does not handle the situation, it's a different issue
Concluding, whichever code you use to make the div unfold/show, will need to be fired at the correct moment again after AJAX submits happen.
This falls under custom code, hence I cannot provide ready to go code, but Toolset Views offers a way to add your code on the correct hooks, as above explained.
Please let me know if you need further help with this.
Hi Beda
Sorry for the late reply, I have been tied up with family matters. I will look into it and give it a try during the coming days.
Thanks
Andreas
OK, please let me know in case you have any follow up questions, you can also open a new ticket, referencing to this one, at any time needed if you have other questions.
Thank you!
Hi Beda
I managed to make the show/hide button still work after ajax refreash by using the "Frontend events" button/wizard in the views editor as you suggested, but making the opened/shown div with the extra filters stay open aften the ajax refresh I cannot get to work.
Luo's last comment on that doesn't help me unfortunately:
You can add below JS codes to hide the DIV by default:
jQuery( document ).on('js_event_wpv_parametric_search_results_updated', function( event, data ) { // when ajax search is completed
jQuery('div.show-hide').find('div.item-content').hide();
});
This is my working js code:
function toggle_div(){
jQuery('span.show-hide').click(function(e){
console.log(jQuery(this).find('div.form-group-search-mus-attributes'));
jQuery('div.form-group-search-mus-attributes').toggle(500);
jQuery(this).children('div.form-group-search-mus-attributes').toggleClass('show_element');
});
}
jQuery(document).ready(function($){
toggle_div(500);
});
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
function toggle_div(){
jQuery('span.show-hide').click(function(e){
console.log(jQuery(this).find('div.form-group-search-mus-attributes'));
jQuery('div.form-group-search-mus-attributes').toggle(500);
jQuery(this).children('div.form-group-search-mus-attributes').toggleClass('show_element');
});
}
jQuery(document).ready(function($){
toggle_div(500);
});
});
The ticket is not resolved - see above - it was marked as resolved automatically by support...
I did not close the ticket, it gets closed when it's not marked as "I still need assistance".
I've reopened the ticket now, and will reply soon with more details.
Luo's Comment you mention refers to the opposite: to hide (collapse) by default.
You can simply use the code to show, instead, please find the related jQuery DOC here:
hidden link, hidden link
Luo Suggests to hide it on default (likely due to the requirements he had to formulate the code), while you want it open, so you can apply show()
Unfortunately, we cannot assist with custom programming in the Toolset Support Forum (https://toolset.com/toolset-support-policy/), in case you need help to create the custom code using jQuery (or other) we can suggest the Certified Contractors https://toolset.com/contractors/
We can help with reviewing code and pointing in a solution's direction, or assist to use such (existing) custom code in specific Views (or another toolset) parts.
I suggest looking into the show() function, and apply that, after the view ajax is done, if you want to have the DIV open by default after an AJAX event.
Please let me know if you need more help with this related to Toolset.
Thanks for getting back with more info, Beda.
I will give it a look next week.
Best,
Andreas
OK, please let me know anytime if something's not clear, I will see if we can help.
