Are you enjoying the extensions? Did you like the support? Help others decide

Leave a review

02Oct2020
Information
Print

Removing the Chosen jQuery plugin with jQuery Easy Profiles

Information
First published October 02, 2020
162 hits - No rating
 

The Chosen jQuery plugin is widely used in Joomla 3 and is primarily used to 'beautify' html select boxes. Many components load it but it may stand in the way in some website designs. While some extensions may give you the option to skip the plugin, you may not have any possibility to remove it. Let see how jQuery Easy Profiles, developed for Joomla, can help.

Starting with jQuery Easy Profiles version 4.1, the process is fairly easy.

Go to Extensions -> Plugins, select the System plugin type and enter the jQuery Easy Profiles plugin. In the jQuery tab, get into the last section Independent Modifications.

Choose 'Yes, by overload' of the Disable Chosen parameter. 'Overload' is a technical term used when replacing the loading of a specific Joomla core functionality. Basically, jQuery Easy Profiles replaces the call to Chosen with nothing very early on during the page creation, preventing anything related to Chosen to ever reach your website pages.

If you do not want the changes to be applied everywhere on your public site, you can set the Disable Chosen parameter to 'Yes' in any of the jQuery Easy Profile instance you have created or you may even create an instance just for that purpose and assign it to the pages where you want Chosen to be removed.

Wait, I have an older version of jQuery Easy Profiles, can I still remove the Chosen plugin?

Yes, definitely, but it requires a few more steps.

The Chosen plugin is made of several building blocks:

  • a stylesheet chosen.css,
  • a script chosen.js,
  • a few script declarations that initialize and assign the changes to specific 'select' form elements.

Apply the following changes inside the main plugin (if you want the changes to be available site-wide) or in any jQuery Easy Profile module instance(s) you have created to target specific areas of your site (or create a module instance specifically for that task).

Removing the stylesheet

Go to the Styles tab and enter media/jui/css/chosen.css in the Strip Remaining CSS field.

Removing the script

Go to the Scripts tab and enter media/jui/js/chosen.jquery.min.js in the Strip Remaining Scripts field.

Removing the script declarations

It is the most difficult part. A lot of javascript is involved and the plugin cannot remove everything without a big performance hit. Therefore, we are only going to focus on the code that can be removed without generating errors on the page.

Go to the Regular Expressions tab.

Create 2 new patterns. One will remove the javascript call to initChosen(), the other the initialisation of Chosen inside sub-forms. We will ignore everything else.

Pattern #1 pattern initChosen\(\);
replacement
limit 1
Pattern #2 pattern \$\("body"\).on\("subform-row-add", initChosen\);
replacement
limit 1

Each pattern tells the plugin to replace the script with nothing and to stop looking for it after at most one replacement.

You could also do it in one shot by creating only one unique pattern (most likely both declarations will follow each other):
initChosen\(\);[\s]*\$\("body"\).on\("subform-row-add", initChosen\);

That's it!

Note this mainly works when the Chosen plugin is added to your pages through the Joomla API. If, by any chance, an extension loads Chosen outside the API (please slap the developer's wrists), you will probably have to tailor the changes to your specific case.

Finally, you may have noticed that media/jui/js/chosen.jquery.min.js is added to the jQuery's Ignore Scripts parameter by default. You cannot remove that value unless you have other listed scripts for that parameter. It's ok, the plugin is smart enough to ignore it when Disable Chosen is set to 'Yes'.