Forums › Forums › Search & Filter Pro › Checkbox loosing "styled" class after results are filtered

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  October 9, 2017 at 10:49 am #135475

    Hi Trevor,
    Love the plugin. I have created a page (using the new Thrive Architect) that simply has 2 columns and the relevant short code for the search form in the left column and the results in the right column. I have also created a custom results.php file

    Everything works fine re results and filtering however the check boxes have a “styled” class on them when the page first loads and as soon as you select any of the filters in the form and the results reload. The check boxes in the form then loose the “styled” tag.

    On Page Load:

    <li class="sf-level-0 sf-item-36" data-sf-count="4" data-sf-depth="0">
	<input value="masterclass" name="_sft_category[]" id="sf-input-c9d6c3225e54e2a88ba6865be80c549f" class="sf-input-checkbox styled" type="checkbox">
	<label class="sf-label-checkbox" for="sf-input-c9d6c3225e54e2a88ba6865be80c549f">Masterclass<span class="sf-count">(4)</span></label>
</li>

    After page results are filtered:

    <li class="sf-level-0 sf-item-36" data-sf-count="4" data-sf-depth="0">
	<input value="masterclass" name="_sft_category[]" id="sf-input-c9d6c3225e54e2a88ba6865be80c549f" class="sf-input-checkbox" type="checkbox">
	<label class="sf-label-checkbox" for="sf-input-c9d6c3225e54e2a88ba6865be80c549f">Masterclass<span class="sf-count">(4)</span></label>
</li>

    Please advise on a fix for this.

    FYI. As yet I have not added our License key to the plugin on the settings page as it is on our staging server.

    Kind Regards
    Rick

    Trevor
    (Private)  October 9, 2017 at 11:53 am #135493

    As for the FYI, that is what we recommend, so no problem there!

    Are you using Ajax to filter the results? If so, try disabling that. If that works, then you must be adding classes using javascript. In which case, you need to re-run the javascript after Ajax has run, like this:

    <script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your javascript here
  });
}(jQuery));</script>

    It would be made easier if you made your original styling javascript as a function (if it is not already), as then you can simply reload it.

    Anonymous
    (Private)  October 9, 2017 at 12:01 pm #135495

    Yep I had AJAX on…
    Didn’t think to turn that off… :/ thanks.
    Works fine now. Although with AJAX off I just have to hit enter after using the searchbox.

    I’m assuming the //load your javascript here part is where I add the code to add the “styled” class back to the checkbox?

    Cheers

    Trevor
    (Private)  October 9, 2017 at 12:22 pm #135515

    Yes, assuming you know what script does that. Then you can switch Ajax back on.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)