Select2 Orderby Not displaying

Ross Moderator

#46638

Hi Andrew

It looks like the code I gave your originally for that should have worked – however, perhaps you didn’t try it inside the ready function, so your custom_js.js should be:

var $j = jQuery.noConflict();

$j(document).ready(function() {
	"use strict";
	$j(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//so load your lightbox or JS scripts here again+
		$j('.searchandfilter select').select2(); //re-init select2
	});
});

Let me know when you’ve added that and if it works!

Thanks

Anonymous

#46988

Sorry for late reply. Tried the code but still no joy change unfortunately.

Ross Moderator

#47493

Hey Andrew

I’ve started to write a reply several times.

Essentially, it seems like you don’t know where to add JS to your theme – I think – so for this I guess you must contact your theme authors. Once we know that then we can add the S&F code.

As a test, what happens when you update the file to:

var $j = jQuery.noConflict();

$j(document).ready(function() {
	"use strict";
	alert("ready");
});

This should show an alert when any page is loaded on the frontend – of course you’ll want to disable this – but if you do not see the alert, you JS is definitely in the wrong place.

Thanks

Anonymous

#47494

It was because I was using the code in my child theme. When I add your alert code to the parent theme it displayed the alert message. So I then went ahead and added the previous code to the same file but it still doesnt work.

The console outputs “ajax complete” which I presume it is meant to, if I click on the ajax complete message in the console it opens the js code I added to the file so it must be loading it correctly.

To explain where I was adding it was originally in child-theme/js/custom_js.js, I then copied your alert code to parent-theme/js/custom_js.js and the alert message displayed, so I then copied the previous code to it.

Anonymous

#47495

I believe I now have it working. I changed the line from this:

$j('.searchandfilter select').select2(); //re-init select2

to this:

$j('.woocommerce-ordering select').select2(); //re-init select2

And it is successfully adding the select2 js to the drop-down!. However, how do I remove the extra search field it’s adding to the drop-down?.

Ross Moderator

#47671

Ah this may be an option of select2 – that S&F has enabled by default, but I guess WooCommerce didn’t – take a look at this quick google result 🙂

http://stackoverflow.com/questions/17480040/select2-hiding-the-search-box

Thanks

Anonymous

#47681

Thanks, my final code looks like below incase anyone else finds they need a similar solution, I had to change the opening and closing brackets after the select2 initilization to get it working:

var $j = jQuery.noConflict();

$j(document).ready(function() {
	"use strict";
	$j(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//so load your lightbox or JS scripts here again+
		$j('.woocommerce-ordering select').select2({ //re-init select2
		 	minimumResultsForSearch: Infinity
		});
	});
});

[Author]

Posts