[Gelöst] After Views auto update search don’t hide the open „collapse“ div
Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.
Problem:
A View with custom search filters updating via ajax includes output in collapsible accordions, but the open/close state of the accordions is reset every time a filter is updated.
This support ticket is created vor 6 Jahre, 3 Monate. 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.
Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.
In the site on the tours-2 page there is a "Meer zoek opties" (More search options) button class="btn btn-link". When clicked it will show more search options (class="row search-form-desktop-toggle collapse". I have the auto update search activated in views. So when there is something searched for in the form it will auto update. After the update the div with more options is collapsed again. You have to click it to toggle it open again.
I found this in another ticket but don't know how to edit it:
jQuery( ".btn-primary" ).click(function() {
window.state = 'open'
});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.view_changed_form (object) The jQuery object for the View form after being updated
* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
*/
if (window.state === 'open'){
jQuery('.collapse').collapse('show');
}
});
The way the sample code works in principle is to add a click handler on the same "show more search options" button which adds a global variable to record that the section should be open.
Then the custom Views event which is triggered when the search results update via ajax is used to check the global variable to see whether the section should be open, and if so, open it.
You need to edit the above so that the selector for the "show more search options" button correctly targets it.
At the moment it is targeting anything with a class of "btn-primary"; you can probably come up with a more specific selector than that.
Line 12 in your example then shows and hidden sections. Again, the selector (".collapse"), is not very specific and could be edited to specifically target the collapsed div in question.
So, two things to edit.
I would also wrap the entire code in a document ready condition, so the full code (awaiting your improved selectors) would look like this:
( function( $ ) {
$( document ).ready( function(){
// globally record when the section is opened
$( ".btn-primary" ).click(function() {
window.state = 'open';
});
// when the search results are updated...
$( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
if ( window.state === 'open' ){
// expand the collapsed section
$('.collapse').collapse('show');
}
});
});
})( jQuery );
