AJAX reconstructs accordion elements and shatters them apart

Question

AJAX reconstructs accordion elements and shatters them apart

I've implemented Search & Filter Pro to sort through images on a website. The checkbox filters are contained within accordions. Initially, everything functions correctly when the page loads. However, an issue arises when I click on a filter as it triggers an AJAX request that refreshes the filters and removes my accordion classes.

The Search & Filter plugin includes a couple of hooks, one that activates during the start of AJAX and another upon completion. While I can reapply the accordion script once AJAX is finished, the problem lies in losing track of which accordion was open previously.

Below is the code for the accordion...


ecg.accordions = ecg.accordions || {};

ecg.accordions = {
    scrollToDiv: function(element){
        var offset = element.offset();
        var offsetTop = offset.top - 40;
        $('body,html').animate({
            scrollTop: offsetTop
        }, 500);
    },
    
    init: function(){
        $('li[data-sf-field-type="taxonomy"]').not(':first').children('ul').hide();
        $('li[data-sf-field-type="taxonomy"]:first-child h4').addClass('expanded')

        $('li[data-sf-field-type="taxonomy"] h4').click(function(){

            if ($(this).hasClass('expanded')){
                $(this)
                    .next()
                    .slideUp('fast');
                $(this).removeClass('expanded');
            }else{
                $('.expanded').each(function(){
                    $(this)
                        .next()
                        .slideUp('fast');
                    $(this).removeClass('expanded');
                });                     
                $(this)
                    .next()
                    .slideDown('fast', function(){
                        var el = $(this);
                        ecg.accordions.scrollToDiv(el);
                    });
                $(this).addClass('expanded');
            }
            return false;
        });
    } // init
} // ecg.accordions

Here are the hooks provided by the filter plugin...

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
    console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    ecg.accordions.init();
});

In the event above, you can see that I rerun the accordion code once completed. I am considering a method where in the ajax start script, I capture the open accordion and pass it to the completed ajax event, although I'm unsure if this is feasible.

Below is a sample markup for a couple of filters


<div class="filters">
   <form action="#" method="post" class="searchandfilter" data-sf-form-id="20" data-is-rtl="0" data-results-url="#" data-ajax-form-url="#" data-use-history-api="1" data-template-loaded="1" data-lang-code="" data-ajax="1" data-ajax-target=".listing" data-ajax-links-selector=".pagination a" data-update-ajax-url="1" data-only-results-ajax="1" data-scroll-to-pos="0" data-auto-update="1" data-auto-count="1" data-auto-count-refresh-mode="1" id="search-filter-form-20" autocomplete="off">
      <ul>
         <li class="sf-field-taxonomy-ce_venue" data-sf-field-name="_sft_ce_venue" data-sf-field-type="taxonomy" data-sf-field-input-type="checkbox">
            <h4>Venue</h4>
            <ul data-operator="or" class="">
               <li class="sf-level-0 sf-item-39" data-sf-count="2">
                    <input  class="sf-input-checkbox" type="checkbox" value="ven1" name="_sft_ce_venue[]" id="sf-input-60a0def98ed13c6d6f9a27aee1c13e70">
                    <label class="sf-label-checkbox" for="sf-input-60a0def98ed13c6d6f9a27aee1c13e70">ven1<span class="sf-count">(2)</span></label>
                </li>
               <li class="sf-level-0 sf-item-42" data-sf-count="1">
                    <input  class="sf-input-checkbox" type="checkbox" value="ven2" name="_sft_ce_venue[]" id="sf-input-500ece294de752754740cc49b255a686">
                    <label class="sf-label-checkbox" for="sf-input-500ece294de752754740cc49b255a686">ven2<span class="sf-count">(1)</span></label>
                </li>
            </ul>
         </li>
         <li class="sf-field-taxonomy-ce_color" data-sf-field-name="_sft_ce_color" data-sf-field-type="taxonomy" data-sf-field-input-type="checkbox">
            <h4>Color</h4>
            <ul data-operator="or" class="">
               <li class="sf-level-0 sf-item-81" data-sf-count="2">
                    <input  class="sf-input-checkbox" type="checkbox" value="color1" name="_sft_ce_color[]" id="sf-input-39bf68813f58db9c7013a386ac7d5201">
                    <label class="sf-label-checkbox" for="sf-input-39bf68813f58db9c7013a386ac7d5201">color1<span class="sf-count">(2)</span></label>
                </li>
               <li class="sf-level-0 sf-item-43" data-sf-count="1">
                    <input  class="sf-input-checkbox" type="checkbox" value="color2" name="_sft_ce_color[]" id="sf-input-68bb548aeaab5440359a3afbdf9d9513">
                    <label class="sf-label-checkbox" for="sf-input-68bb548aeaab5440359a3afbdf9d9513">color2<span class="sf-count">(1)</span></label>
                </li>
            </ul>
         </li>
      </ul>
   </form>
</div>

javascript ajax accordion

Answer 1

Answer №1

One solution that comes to mind is keeping track of which accordion was open so it can be reopened if necessary.

Instead of attaching event handlers directly to individual elements, using event bubbling ensures that the init function is only called once.

For example:

        $('.filters').on('click', 'li[data-sf-field-type="taxonomy"] h4', function(){

When an accordion is activated, we can store a reference to the expanded list item. Using the content of <h4> tags as identifiers seems like a viable option.

In the click handler section where you have:

                $(this).addClass('expanded');

We can add:

                var $h4 = $(this); // ...
                $h4.parents('.filters').data('reference', $h4.text());

(I simplified the code by reusing the queried object ($(this)) instead of generating it each time, e.g.

var $h4 = $(this); $h4.next().slideUp('fast'); //...

)

To implement this for the default accordion as well, modify the init function from:

        $('li[data-sf-field-type="taxonomy"]:first-child h4').addClass('expanded')

To:

        var $first_h4 = $('li[data-sf-field-type="taxonomy"]:first-child h4');
        $first_h4.addClass('expanded').parents('.filter').data('reference', $first_h4.text());

Next, update the search and filter complete code to make use of this feature:

//detect when the ajax request has finished and the content has been updated
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    //ecg.accordions.init();
    // Loop through each filter, check if they had an expanded accordion, loop through the new h4's to see if there's match.
    $('.filters').each(function(){
        var $filter = $(this);
        var id     = $filter.data('reference');
        if (id) {
            $filter.find('li[data-sf-field-type="taxonomy"] h4:contains(' + id + ')').toggleClass('expanded', true);
        }
    });
});

If you want a specific accordion to always remain open, similar to how the first item is opened with init, create a separate function for this and reuse it in the search & filter complete event as well. Some adjustments may be needed, but it should work effectively.

Answer 2

One solution that comes to mind is keeping track of which accordion was open so it can be reopened if necessary.

Instead of attaching event handlers directly to individual elements, using event bubbling ensures that the init function is only called once.

For example:

        $('.filters').on('click', 'li[data-sf-field-type="taxonomy"] h4', function(){

When an accordion is activated, we can store a reference to the expanded list item. Using the content of <h4> tags as identifiers seems like a viable option.

In the click handler section where you have:

                $(this).addClass('expanded');

We can add:

                var $h4 = $(this); // ...
                $h4.parents('.filters').data('reference', $h4.text());

(I simplified the code by reusing the queried object ($(this)) instead of generating it each time, e.g.

var $h4 = $(this); $h4.next().slideUp('fast'); //...

)

To implement this for the default accordion as well, modify the init function from:

        $('li[data-sf-field-type="taxonomy"]:first-child h4').addClass('expanded')

To:

        var $first_h4 = $('li[data-sf-field-type="taxonomy"]:first-child h4');
        $first_h4.addClass('expanded').parents('.filter').data('reference', $first_h4.text());

Next, update the search and filter complete code to make use of this feature:

//detect when the ajax request has finished and the content has been updated
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    //ecg.accordions.init();
    // Loop through each filter, check if they had an expanded accordion, loop through the new h4's to see if there's match.
    $('.filters').each(function(){
        var $filter = $(this);
        var id     = $filter.data('reference');
        if (id) {
            $filter.find('li[data-sf-field-type="taxonomy"] h4:contains(' + id + ')').toggleClass('expanded', true);
        }
    });
});

If you want a specific accordion to always remain open, similar to how the first item is opened with init, create a separate function for this and reuse it in the search & filter complete event as well. Some adjustments may be needed, but it should work effectively.

AJAX reconstructs accordion elements and shatters them apart

Answer №1

Similar questions

Configuring settings for gulp-jshint

Is there a way to place two input fields from different forms side by side on the same line?

The function Yii2 isAjax returns a boolean value of false

Quantify the duration it takes for Angular to display a directive

Notes on using touch devices with Angular

When two divs are activated, the third div goes into invisible mode

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

"Deploying code to Heroku using Node.js: A guide to adding git commits directly on

Use multiple lines to create a stunning visualization using morris.js. Let your data

What is the best way to specify the CSS :hover state within a jQuery selector?

Is it possible for the Jquery Accordion to retract on click?

Using Node.JS and MySQL to optimize data retrieval by combining queries to define variables and select data efficiently

Activate the following and preceding elements within the 'vue-owl-carousel' component for Vue.js

How can you use CSS animations to animate two images in a way that hides one while showing the other?

How to use jQuery with multiple selectors?

How come I am unable to terminate this Angular HTTP request?

How to Determine If a String Represents an HTML Tag Using jQuery

In Node.js, the mongodb+srv URI does not support including a port number

Add data to a nested array with Vuex

Error message displayed: "An error occurred while processing the VueJS InertiaJS Uncaught (in promise) TypeError. It seems that the property 'search'