[Gelöst] Conflict between AJAX and select2 library in Views

[Author]

Artikel

[romanB-3]

Hi,
I think I may have found a conflict between the AJAX reloading and select2 library into Views.
Please see hidden link
Add a "Domaine" filter, for instance "Agrculture", and as soon as possible, after the list is being loading, but before the map has completely loaded, click the "Domaine" select2 again in order to open it up and add another term.
Now we're stuck and :
- it's impossible to add any new term with the select ;
- it's impossible to close the select once we've reoppened it ;
- there is console error saying :

Uncaught TypeError: Cannot read property 'id' of undefined
    at HTMLLIElement.<anonymous> (select2.min.js?ver=5.5.1:1)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at n.fn.init.each (jquery.js?ver=1.12.4-wp:2)
    at select2.min.js?ver=5.5.1:1
    at d.current (select2.min.js?ver=5.5.1:1)
    at d.c.setClasses (select2.min.js?ver=5.5.1:1)
    at e.<anonymous> (select2.min.js?ver=5.5.1:1)
    at e.d.invoke (select2.min.js?ver=5.5.1:1)
    at e.d.trigger (select2.min.js?ver=5.5.1:1)
    at e.trigger (select2.min.js?ver=5.5.1:2)

Thank you.

[Luo Yang]

Hello,

I have checked the URL you mentioned above, there isn't any JS errors in my Chrome browser console window. See my screenshot

How do you setup the "select2 library into Views"?

Are you using custom codes?
Please elaborate the questions with more details, and provide detail steps to duplicate the same problem

[romanB-3]

Please try to reproduce the issue by following those steps :
Add a "Domaine" filter, for instance "Agriculture", and as soon as possible, after the list is being loading, but before the map has completely loaded, click the "Domaine" select2 again in order to open it up and add another term.
The select2 library is added threw this code

/* AJOUTER LES SELECT2 */
add_action( 'wp_enqueue_scripts', 'select2_load_javascript_files' );
function select2_scripts() {
	wp_enqueue_style('select2style', get_stylesheet_directory_uri() . '/select2.min.css'); 
	wp_enqueue_script('select2script',get_stylesheet_directory_uri() . '/select2.min.js');
}
add_action( 'wp_enqueue_scripts', 'select2_scripts' );

as recommended in a previous Toolset Support Ticket.
Thank you.

[Luo Yang]

Thanks for the details, I can see the problem in your website, it seems to be a custom JS codes problem.

You are using below custom JS codes to trigger select2 JS function:

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

Please try with another Views JS event "js_event_wpv_parametric_search_results_updated", for example:

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

And test again

[romanB-3]

My issue is resolved now. Thank you!