how to prevent javascript from running again when an AJAX form is submitted

Question

I have this code in a javascript file to hide some search filters...

$('#views-exposed-form-faceted-search-page .form-type-select').once().hide();

The user can toggle the visibility of the filters by clicking on my #advanced-search link...

$('#views-exposed-form-faceted-search-page #advanced-search a').once('advanced_search').click(function(){
        $('#views-exposed-form-faceted-search-page .form-type-select').toggle();
});

It works, but when the AJAX form is submitted, the hide() function runs again and the .form-type-select elements are hidden. How do I prevent them from being hidden a second time? I only want my code to hide the selects when the page first loads.

Answer 1

If Ajax reloads this part you are hiding, the marker once() has set is overwritten, also the show/hide status. Then you need a different approach, either submit the show/hide status, so that it can be returned by Ajax, or create a show/hide Ajax form element to have full control over it through Ajax.

If this is outside of the Ajax wrapper you can do this in javascript, but apply the jQuery selectors on context:

$('#views-exposed-form-faceted-search-page .form-type-select', context).once('search-hide').hide();

See https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview