Forums › Forums › Search & Filter Pro › Cannot get Value onChange

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  October 22, 2020 at 4:42 am #263695

    Hello

    On this page, I have a filtering system:

    http://igastaging.wpengine.com/recipes/test-page

    I want to pickup the value selected from any of the dropdowns, and I have an onchange function in jQuery. If you open the Chrome Inspector -> Console, and try to change the first dropdown, the value shows. For example, Desserts.

    However, subsequently, the onchange function does not fire. What I mean is, on the second time, and on any other dropdown, the onchange function will not fire once it gets a value.

    Here is the jQuery:

    ` $(‘select[name =”_sfm_assigned_meal_type[]”]’).change(function() {
    var val = this.value;
    console.log(“_sfm_assigned_meal_type[]: ” +val);
    });

    $(‘select[name =”_sfm_assigned_dietary_requirements[]”]’).change(function() {
    var val = this.value;
    console.log(“_sfm_assigned_dietary_requirements[]: ” + val);
    });

    $(‘select[name =”_sfm_assigned_ingredients[]”]’).change(function() {
    var val = this.value;
    console.log(“_sfm_assigned_ingredients[]: ” + val);
    });`

    Please see image:

    Please see console - I selected Desserts, which shows, but any other selection does not.

    Trevor
    (Private)  October 22, 2020 at 12:19 pm #263722

    When the values are first selected, does anything else happen? I ma thinking that the JavaScript might no longer be applied – I am assuming that you applied the JS you showed on document ready?

    For example, are the results re-loading using Ajax, and do you have Auto Count ON?

    You may need to re-apply your JavaScript after our two events:

    sf:ajaxfinish

    and

    sf:ajaxformfinish

    The first fires after an Ajax refresh of the results, the second fires after Auto Count works on the form after a user interaction. The code looks like this:

    <script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>
    <script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>
    Anonymous
    (Private)  October 23, 2020 at 4:51 am #263794

    Thank you, this helped!

    Trevor
    (Private)  October 23, 2020 at 7:55 am #263802

    Thanks for letting me know. I will close this thread for now.

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