[Resolved] ajax search with chosen or select2 parametric search

[Author]

Posts

[Benjamin]

Tell us what you are trying to do?
Since the latest update my ajax updated parametric search with chosen multiselect isn't working anymore.

In view HTML:

<select name="wpv-lehrinhalt[]" class="chosen-select js-wpv-filter-trigger form-control" multiple="multiple" size="10" style="display: none;"></select>

In function.php:

/**
 * Enqueue scripts and styles.
 */
function education_scripts() {

/* Scripts */
	wp_enqueue_script( 'semantic', '/wp-content/themes/wuuzilla-education/semantic-ui/semantic.min.js', array(), $ver = false , $in_footer = false );
	wp_enqueue_script( 'chosen', '/wp-content/plugins/types/vendor/toolset/toolset-common/res/lib/chosen/chosen.jquery.min.js', array(), $ver = false , $in_footer = false );
	wp_enqueue_script( 'select2', '/wp-content/plugins/types/vendor/toolset/toolset-common/res/lib/select2/select2.min.js', array(), $ver = false , $in_footer = false );
	wp_enqueue_script( 'script', '/wp-content/themes/wuuzilla-education/js/script.js', array(), $ver = false , $in_footer = false );

	/* Styles */
	wp_enqueue_style( 'semantic.css', get_stylesheet_directory_uri().'/semantic-ui/semantic.min.css' );
	wp_enqueue_style( 'theme.css', get_stylesheet_directory_uri().'/semantic-ui/theme.css' );
	wp_enqueue_style( 'chosen.css', get_stylesheet_directory_uri().'/chosen/chosen.css' );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'education_scripts' );

In script.js:

jQuery( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	*/
	
	/* Chosen */	
 $(".chosen-select").chosen({
no_results_text: "Leider kein Treffer!",
max_selected_options: 5,
placeholder_text_multiple: "Suche..."

 }); 

Error occuring:

Uncaught TypeError: $ is not a function
for the line $(".chosen-select").chosen({}):

Website hidden link

Thanks for your help!

[Christian Cox]

Hello, the error says you cannot use the $ namespace, so try using the jQuery namespace instead. Current code:

$(".chosen-select").chosen({

Updated code:

jQuery(".chosen-select").chosen({

[Benjamin]

Hallo Christian,

I already tried. Then the error says:

jQuery(.....) is not a function.

Regards
Benjamin

[Christian Cox]

Can you show me exactly where you see this error? I am able to use the developer tools to change $ to jQuery in scripts.js, but I don't see the same error. I must not understand where you see the error. What I see is you have many instances where $ must be replaced with jQuery.

Here is a video showing you my debug process:
hidden link

If you can show me in a screenshot or video where the "jQuery is not a function" error is triggered, I will take a closer look. Thank you!

[Benjamin]

Thanks for the help!

I changed every $ to jQuery, now my search works again. Was there a change? The code worked before the update with $ too?

Regards Benjamin

[Christian Cox]

I'm not aware of anything specific in Toolset related to the jQuery namespace, but so many different plugins and libraries use jQuery that it would be difficult for me to track down exactly what caused this in your site. It could be something as simple as the order in which some dependencies are loaded, or the position of some code in the page markup. Regardless, it's always a good idea to use the jQuery namespace with Toolset plugins, or use a callback of some kind that provides access to the $ namespace in a closure:

jQuery(document).ready(function($) {
  // it is okay to use $ here
});

// it is best to use jQuery here instead of $