The bottom line is that there are blocks with checkboxes; when you click on a block, the active class is added to it, while the remaining blocks are checked for the presence of the same class and, if successful, we delete it. Thus, only one block can have an active class at a time. But when a checkbox is checked, the pjax DOM elements naturally reboot and the active class disappears. How can I remember and pass this class to this element after pjax reload?

At first there was such an idea

function collapse(){ $('#filter-form [type="checkbox"]').each(function() { if ($(this).prop('checked')) { $(this).closest('#filter-block').addClass('active'); } }); } $(document).on('pjax:success', function(e) { collapse(); });

But this way the class is added to all blocks with selected checkboxes, and only the one from which it was submitted is needed.

Actually the very click

 $('body').on('click', '#filter-title' , function(){ $(this).parent().toggleClass('active'); $(this).parent().siblings().removeClass('active'); });

Maybe as a tie to a submission? This does not work:

 $('body').on('change', '.checkbox__filter', function (e) { $(this).closest('form').submit(); $(this).closest('#filter-block').addClass('active'); });
  • As an option to save the element index before a pjax request and after a reboot, search for an element by this index and make it active - pa3py6aka
  • @ Pa3Py6aka Yes, in the end I did. - Pavel Orlov

1 answer 1

Solved the issue by adding a record of the element index (via .index ()) by clicking in the hidden input

 var $set = $('#filter-title'), n=$set.index(this); $("input[name=index]").val(n);

Then after updating the DOM, by this index we look for the necessary element and add the necessary class to it.

 var eq = $("input[name=switch]").val(); $('#filter-title:eq('+eq+')').parent().addClass("active");