[Resolved] Advanced Filters Accordion collapses after AJAX filter updates

[Author]

Posts

[Thomas AMX]

Hi guys,

I created an accordion with advanced filters. I copied the code from the Toolset reference sites. At first, it didn't work, but I figured out I had to import Bootstrap to make it work. The whole Bootstrap package breaks some things in my GeneratePress theme. But I loaded Bootstrap-Collapse CSS and JS and now the accordion works fine. It expands and collapses just as expected.

But I have an issue with AJAX filters (auto-updating). When the user open/expands the accordion and changes one filter value (checkbox/selectbox) the accordion collapses/closes again. Therefore the whole accordion is pretty much useless, as it is now. Filter values are remembered, but the collapse/expand status is lost.

Is there a way to make the advanced filters accordion "survive" AJAX filter updates? If the user chooses to expand the accordion, it should remain expanded until the whole page is reloaded and not until one filter value changes.

Cheers,
Tom

[Shane]

Hi Thomas,

Thank you for contacting our support forum.

Since you are using AJAX to do filters it cause the accordions to reset, in order for it to open again we need to use a callback function to tell the accordion to open.

Could you provide me with a link to the search form so I can have a look and assist with the function ?

Thanks,
Shane

[Thomas AMX]

Thank you very much Shane.
Sure, I will take the site out of maintenance mode and provide the link.

Since the site is not supposed to be live yet / accessible to the public, I would prefer to send the link in a private message. Could you please switch on the "private mode" for the next message?

Cheers
Tom

[Shane]

Hi Thomas,

Yes the private fields have been enabled.

Thanks,
Shane

[Shane]

Hi Thomas,

Is this a standard bootstrap accordion ?

Reason being is because the structure is much different from how a bootstrap accordion is defined.

Please let me know

Thanks,
Shane

[Thomas AMX]

Hi Shane,
I think so. I tried to recreate the one in the Toolset reference sites and it didn't work for me at all without Bootstrap. (I tried also several other accordion methods but without success).

Then I imported the whole Bootstrap package in Toolset's settings and it started to work, but it messed up some of my theme's CSS (GeneratePress). So, then I imported only selected Bootstrap elements using the Bootstrap Customizer (I think it was Collapse and Panels JS + CSS). The accordion part seems to work with it (without CSS issues elsewhere in the theme), and without Bootstrap it didn't work.

But I added some of my own div classes around the filters to style them and to control their responsive behavior, so maybe that's why it looks a little different. But in the essence it should be more or less as in the reference sites. The .grid-50 and .mobile-grid-100 div classes belong to Unsemantic Grid because GeneratePress uses it instead of Bootstrap, and that's why I used them.

Best regards,
Tom

[Thomas AMX]

Sorry Shane, I think I took parts of the accordion from somewhere else after the one from reference sites didn't work for me. I cannot remember now from where because I tried many things. It should be based on Bootstrap nevertheless. WIthout importing Bootstrap's Collapse/Panel JS + CSS it won't work.

The accordion's collapse/expand functionality comes from Bootstrap, but not the columns and responsive behavior.

I didn't use Bootstrap's col classes because GeneratePress doesn't support them, and importing whole Bootstrap caused issues. That's why I solved responsive behavior otherwise.

Best regards
Tom

[Shane]

Hi Thomas,

Actually the custom code for bootstrap won't be able to work with this accordion doesn't follow the standard bootstrap scaffolding which in a normal case we could've used the bootstrap functions to open or close it.

hidden link

However since the html structure is not the same nor does it use bootsrap classes then i'm not sure of a function to open or close this structure.

Thanks,
Shane

[Thomas AMX]

Shane, could you please check the same link again? I have replaced the View with another one. I tried so many things that I got mixed up myself.

I believe the current View follows the Bootstrap accordion structure. It has: data-toggle="collapse", data-target="#collapseExample", aria-expanded="true/false", and .collapse .in, .well classes.

From what I can see, it's now very similar to the one in Toolset Real Estate demo. The difference are column classes inside the accordion and above it ("tablet-grid-33" instead of "col-sm-4"), but I believe they don't affect the functionality of the accordion itself and serve only internal layout purposes within the accordion. I also have data-target="#collapseExample" where the demo has: href="#SearchMore", but obviously I can change data-target for href, if that makes a difference.

Thank you
Tom

[Shane]

Hi Thomas,

Add the following to your JS editor and it should open again once the user selects an option.

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
	*/
  jQuery('.collapse').collapse('show');
	
});

Thanks,
Shane

[Thomas AMX]

Thank you very much Shane. It does indeed open the accordion, however it opens it every time a filter value changes, also when the user hadn't chosen to open the accordion. Even when I click on "Reset all Filters", it opens the accordion. So any action by the user in the filter section will automatically open the accordion, which is not desired.

Some time ago, when I was trying to make the accordion work, I found this (maybe in the forum or the reference site):

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
  var notEmptyInputs = jQuery('#collapseExample input[type="text"]').filter(function() {
             return jQuery(this).val() != '';
        });
   
  if(jQuery('#collapseExample').find('input[type="checkbox"]:checked').length > 0 
     || notEmptyInputs.length >0) {
    jQuery('#collapseExample').addClass("in");
  } 
});

I think it is somehow related, but having it or not having it doesn't seem to make any difference whatsoever. I replaced "#searchMore" with "#collapseExample", because this is how it appear in my code.

How to make the accordion open/stay open only when the user chooses to open it, and not everytime a value in any filters is updated?

Kind regards,
Tom

[Shane]

Hi Thomas,

Would it be possible to link me to where you got this code from ?

It could be that they are using some hidden field to hold the state of the collapse. This is a common issue with jQuery searches and these issues won't occur with a normal page load.

Thanks,
Shane

[Thomas AMX]

Shane, my accordion example was taken from Bootstrap:

hidden link

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

That is why I have #collapseExample where the Toolset reference site has #searchMore. I only deleted "Link with href" and used only a button.

If you meant the jquery code that I quoted above, I think it was from the Toolset Real Estate reference site. I cannot check it now, because right now, as there is a timeout error when I try to set up a demo reference site. But I suppose you meant where I got the accordion code from, so it probably doesn't matter.

I don't know jquery, but I suspect that adding another condition in your code besides 'js_event_wpv_parametric_search_form_updated' might do the trick. Something like "parametric_search_form_updated" AND "accordion state: open, or aria-expanded=true ". So the accordion should open/re-open only if the two conditions are met. If the accordion wasn't open in the first place, it wouldn't open on filter updates... I don't know if that makes sense...

Kind regards,
Tom

[Shane]

Hi Thomas,

I've thought about your proposed solution but the issue is that since there is a jQuery refresh of the information then the selected states of any of the previous states of the html will be lost upon the refresh.

Our only option is to use either cookies or local storage to store the state. I have an idea that can help with this.

The solution I came up with was this here:

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');
}
});

But it seems that you have already solved the issue.

Thanks,
Shane

[Thomas AMX]

Hello Shane,
No, unfortunately it is not solved yet.
This jQuery code doesn't seem to work, the accordion doesn't re-open at all. It closes after filter update.

EDIT: I tried many times and it just worked once or twice, but I can't repeat that anymore... It doesn't re-open.

For the sake of experiment, I also tried to replace "===" with "==" and then with "=". The result was as in the first jQuery code (accordion opening every time after any update).

What else can we do?

Thank you.
Tom