Javascript errors when editing columns
I am getting javascript errors when trying to edit columns. And because of the errors, clicking the ‘Update’ button does nothing. Below are the javascript error information that I can get from Safari.
Any suggestions on what to do?
[Error] Error: Option ‘multiple’ is not allowed for Select2 when attached to a <select> element.
(anonymous function) (select2.min.js:1:18524)
each (load-scripts.php:2:2980)
prepareOpts (select2.min.js:1:18315)
prepareOpts (select2.min.js:2:17684)
init (select2.min.js:1:13782)
(anonymous function) (select2.min.js:2:30581)
each (load-scripts.php:2:2980)
each (load-scripts.php:2:840)
select2 (select2.min.js:2:30269)
(anonymous function) (layouts.js:96)
dispatch (load-scripts.php:4:8555)
handle (load-scripts.php:4:5258)
trigger (load-scripts.php:4:7656)
trigger (load-scripts.php:8:6737)
(anonymous function) (load-scripts.php:4:15525)
each (load-scripts.php:2:2980)
each (load-scripts.php:2:840)
trigger (load-scripts.php:4:15498)
cpac_init (admin-settings.min.js:1:4149)
(anonymous function) (admin-settings.min.js:1:4491)
j (load-scripts.php:2:27315)
fireWith (load-scripts.php:2:28124)
ready (load-scripts.php:2:29968)
J (load-scripts.php:2:30328)
[Error] TypeError: undefined is not an object (evaluating ‘e.hasClass’)
(anonymous function) (load-scripts.php:605:1534)
dispatch (load-scripts.php:4:8555)
handle (load-scripts.php:4:5258)
trigger (load-scripts.php:4:7656)
trigger (load-scripts.php:8:6737)
(anonymous function) (load-scripts.php:4:15525)
each (load-scripts.php:2:2980)
each (load-scripts.php:2:840)
trigger (load-scripts.php:4:15498)
(anonymous function) (load-scripts.php:604:2925)
j (load-scripts.php:2:27315)
fireWith (load-scripts.php:2:28124)
x (load-scripts.php:5:22123)
b (load-scripts.php:5:26032)
Hi Gilles,
This is a known issue since the 3.8 release and we have a ticket for this.
https://github.com/codepress/admin-columns-issues/issues/470
The problem is that other plugins (mainly WooCommerce) load their own select2 script on our setting page.
We’re looking for a way to include select2 without any conflicts.
We like to know which plugin is also loading select2. Are you using WooCommerce addons or can you figure out which script from which plugin is causing the script error?
A temporary fix would be to disable the script loaded by the plugin by using wp_dequeue_script( 'select2' ) on our admin page (parameter page=codepress-admin-columns). I believe the mentioned WooCommerce addons use this ‘select2’ handle but you have to check which handle is used.
The plugin triggering the conflict is:
WooCommerce Custom Order Status & Actions
How am I supposed to implement this temporary fix?
A temporary fix would be to disable the script loaded by the plugin by using
wp_dequeue_script( ‘select2’ )
on our admin page (parameter page=codepress-admin-columns).
Oh and thank you for the prompt reply!
Hi Gilles,
Can you send me a copy of the WooCommerce Custom Order Status & Actions plugin so we can try to reproduce the issue and see if we can make a fix? Of course we use it for development only.
Hereby the temporary fix that removes other select2 libraries when on the Admin Columns settings page
function cac_select2_conflict_fix(){
if( function_exists( 'cac_is_setting_screen' ) && cac_is_setting_screen() ){
wp_dequeue_script( 'select2' );
}
}
add_action( 'admin_enqueue_scripts', 'cac_select2_conflict_fix' );The above did not work.
Gilles
By the way, I tried to send you a copy of the plugin, but the email address you used is a noreply@admincolumns.com, which I cannot reply to.
Gilles
Here is the code from the plugin loading select2:
if ( defined('WC_VERSION') && version_compare( WC_VERSION, '2.3', '>=' ) ) {
if( !wp_script_is( 'select2', 'enqueued' ) ){
$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
wp_register_script( 'select2', WC()->plugin_url() . '/assets/js/select2/select2' . $suffix . '.js', array( 'jquery' ), '3.5.2' );
wp_register_script( 'wc-enhanced-select', WC()->plugin_url() . '/assets/js/admin/wc-enhanced-select' . $suffix . '.js', array( 'jquery', 'select2' ), WC_VERSION );
wp_localize_script( 'select2', 'wc_select_params', array(
'i18n_matches_1' => _x( 'One result is available, press enter to select it.', 'enhanced select', 'woocommerce' ),
'i18n_matches_n' => _x( '%qty% results are available, use up and down arrow keys to navigate.', 'enhanced select', 'woocommerce' ),
'i18n_no_matches' => _x( 'No matches found', 'enhanced select', 'woocommerce' ),
'i18n_ajax_error' => _x( 'Loading failed', 'enhanced select', 'woocommerce' ),
'i18n_input_too_short_1' => _x( 'Please enter 1 or more characters', 'enhanced select', 'woocommerce' ),
'i18n_input_too_short_n' => _x( 'Please enter %qty% or more characters', 'enhanced select', 'woocommerce' ),
'i18n_input_too_long_1' => _x( 'Please delete 1 character', 'enhanced select', 'woocommerce' ),
'i18n_input_too_long_n' => _x( 'Please delete %qty% characters', 'enhanced select', 'woocommerce' ),
'i18n_selection_too_long_1' => _x( 'You can only select 1 item', 'enhanced select', 'woocommerce' ),
'i18n_selection_too_long_n' => _x( 'You can only select %qty% items', 'enhanced select', 'woocommerce' ),
'i18n_load_more' => _x( 'Loading more results…', 'enhanced select', 'woocommerce' ),
'i18n_searching' => _x( 'Searching…', 'enhanced select', 'woocommerce' ),
) );
wp_localize_script( 'wc-enhanced-select', 'wc_enhanced_select_params', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'search_products_nonce' => wp_create_nonce( 'search-products' ),
'search_customers_nonce' => wp_create_nonce( 'search-customers' )
) );
wp_enqueue_script('wc-enhanced-select');
}
}else{
if( !wp_script_is( 'chosen', 'enqueued' ) ){
wp_register_script('chosen_js', WC()->plugin_url() . '/assets/js/chosen/chosen.jquery.min.js', array('jquery'), '2.66', true);
wp_register_script('ajax-chosen_js', WC()->plugin_url() . '/assets/js/chosen/ajax-chosen.jquery.min.js', array('jquery'), '2.66', true);
wp_enqueue_script('chosen_js');
wp_enqueue_script('ajax-chosen_js');
}
}
wp_enqueue_script( 'select2', WC()->plugin_url() . '/assets/js/select2/select2.min.js', array( 'jquery' ), '3.5.2' );My guess is that the fix is to make your admin screen register the script as ‘enqueued’ before the other plugin has a chance to reach this stage.
Gilles
I think the fact that you are using a different handle for the same script is the problem:
wp_register_script( 'cacie-select2', CAC_INLINEEDIT_URL . 'library/select2/select2.min.js', array( 'jquery' ), CAC_PRO_VERSION );
If you had kept ‘select2’ as the name, my guess is that things would work as expected.
Hmm changing this to ‘select2’ does not seem to fix the problem. I will let you investigate and suggest another fix.
Thanks for thinking with us.
We use our own prefix in css and js because we want to prevent conflicts :)
Thanks for the plugin, it seems that dequeueing the script is not enough.
But deregistering the script seems to solve the issue for now (temporary fix)
You can use this code in functions.php, we will look for a solution in the plugin.
function cac_select2_conflict_fix(){
if( function_exists( 'cac_is_setting_screen' ) && cac_is_setting_screen() ){
wp_deregister_script( 'select2' );
}
}
add_action( 'admin_enqueue_scripts', 'cac_select2_conflict_fix', 11 );
I am getting this same error for Admin Columns Events when trying to inline edit tags and categories
select2.min.js?ver=3.2:503 Uncaught Error: Option 'multiple' is not allowed for Select2 when attached to a <select> element.
and author
Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element.
Admin Columns Pro – Events Calendar Version 1.4.1
Admin Columns Pro Version 4.7.2
And I already tried the above code:
function cac_select2_conflict_fix(){
if( function_exists( 'cac_is_setting_screen' ) && cac_is_setting_screen() ){
wp_deregister_script( 'select2' );
}
}
add_action( 'admin_enqueue_scripts', 'cac_select2_conflict_fix', 11 );The issue is that there is another select2 version running on the page.
We use version 4 and the error comes from version 3 if I’m correct.
First, you’ll need to find from which plugin the error comes from.
You can do that by looking at the error in your console and find the path that throws the error.
The snippet that you mention does not work anymore since the method that checks if you’re on the settings screen does not exist anymore. You could try to remove the conditional and see if that changes anything.
If that works, you can make the script more specific and only load on the table overview pages for example. I also can’t tell you for sure if the old select2 version is actually needed on the page or that is simply loaded on every admin page, which is bad practice if you ask me :)
Thank you Stefan – I’ll try those ideas…
You must be logged in to reply to this topic.