Skip Navigation

[Resolved] Conflict between AJAX and select2 library in Views

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.

This topic contains 4 replies, has 2 voices.

Last updated by romanB-3 1 year, 1 month ago.

Assigned support staff: Luo Yang.

Author
Posts
#1774777

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.

#1775213

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

bts.JPG

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

#1775733

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() . 'https://cdn.toolset.com/select2.min.css'); 
	wp_enqueue_script('select2script',get_stylesheet_directory_uri() . 'https://cdn.toolset.com/select2.min.js');
}
add_action( 'wp_enqueue_scripts', 'select2_scripts' );

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

#1776559

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1776763

My issue is resolved now. Thank you!