How to Load jQuery and Prototype in Magento Admin Panel

This is an issue that comes up more often these days because more and more third party magento extensions simply throw in the jQuery library in the admin panel, even just for simple JS functionality that is fully supported in Prototype. I guess in the sake of a ‘working’ extension everything is compromised, right? well, ok. I guess so. but there is always a better way to doing things. Here is a little example that can make including the jQuery library in the Magento Admin Panel a little less painful and make your extension play nice with other third party extensions.

Before I continue to this short example, let me say that even a better way is to not include jQuery at all and learn how to use Prototype, because it is a fully functioning library after all – and most likely what you need done is doable with Prototype anyway. Ok, enough for the lecturing…

So let’s say you want to add the jQuery library to the admin panel, you’ll naturally add an admin layout update file by including these lines in your extension’s config.xml:

Now, this layout update file will be placed in this folder and be called my_extension.xml:
/app/design/adminhtml/default/default/layout/my_extension.xml

For this example we will update the Product Edit Page which is referred to by the handle <adminhtml_catalog_product_edit>, so assuming we just want to introduce jQuery and a jQuery color picker JS file, the code inside this file will normally look like this:

However, this setup will most likely result in some sort of conflict, and the reason is that by the time that we add jQuery files here, the Prototype library is already loaded in the page. This introduces a conflict in most browsers. In order to address this, you should follow best practices for loading both jQuery and Prototype library in the same page, which calls for loading jQuery first and Prototype second. So we will want to remove the prototype initially and add it after the jQuery library is added, here is the code:

Don’t forget to add the noConflict() line at the end of your jQuery library file:

Essentially, by removing the prototype and then adding it after the jQuery library is added to the page we have avoided a conflict. This worked well on a few examples of third party magento extensions that I was asked to fix for my clients.

Happy coding!

One Comment