Skip Navigation

[Resolved] js_event_wpv_parametric_search_results_updated not applied

This thread is resolved. Here is a description of the problem and solution.

Problem: I am trying to initialize the select2.js library on my custom search filters but I see an error in the console:

select2.min.js - Uncaught Error: No select2/compat/inputData

Solution:
Be sure to initialize select2 only on select fields. In this case, a checkbox field was included in the jQuery selector, resulting in an error.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by romanB-3 1 year, 2 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1742963

Hi,
I have 2 selects on a view:
1- a select based on a taxonomy;
2- a select based on a radio buttons backend field.
I also have a JS code

jQuery( function( $ ) {
  $(".js-wpv-filter-trigger").select2({
    placeholder: "Cliquer pour choisir"
  });
} );

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
  jQuery( function( $ ) {
    $(".js-wpv-filter-trigger").select2({
      placeholder: "Cliquer pour choisir"
    });
  } );
});

meant to apply select2 design on both fields.
When loading my page hidden link, it displays great, but still have a console error.
When editing any of the search field, I lost the select2 design and have another console error.
Thank you.

#1743505
Screen Shot 2020-08-18 at 4.20.07 PM.png

I think the error is occurring because your code is attempting to initialize select2 on a checkbox filter input. The checkbox filter also has the class js-wpv-filter-trigger. The .js-wpv-filter-trigger selector here must be adjusted so that checkboxes are not included in the selector:

$(".js-wpv-filter-trigger").select2({
    placeholder: "Cliquer pour choisir"
  });

See the screenshot - the checkbox has the CSS class used in your select2 selector. Your code should only attempt to initialize select2 on select fields, not checkbox inputs.

#1743557

Thank you!