home > textual > blog > technical > More on using jQuery with Joomla
More on using jQuery with Joomla
technical
Wednesday, 14 April 2010 19:58

I recently received an email from Hugo asking me for some advice on using jQuery with Joomla.

He writes:

where does the jquery library go and how do you reference it in joomla? i wanted to put the asmSelect form into joomla, its fantastic, but not sure how easily it travels.

First off: I'm not familiar with the asmSelect form. (That said, I'll be sure to add it to my already-too-long 'stuff-to-check-out' list.) Therefore, my advice is generic at best. I don't have time to write up a full tutorial on how to incorporate that specific jQuery-based product into Joomla, but I think I can help give some suggestions on the path to follow and where/how to find the specific information you'll need to get there.

 

Just like any usage of jQuery, you need to reference the main jQuery script prior to your own scripts, preferably in the document's head. However, just like any JS application, you don't have to limit the scripts to the head. That usually means editing or creating your own template.

Remember, Joomla uses MooTools, which also uses the $ variable, so you need to release it using jQuery.noConflict();. Then, you must avoid the use of the $ variable unless it's wrapped in a self-contained function in which it is passed in as the variable. There's already a lot of content out there on the web on how that works, so I needn't repeat it here.

There's also a great Joomla plugin that adds jQuery and jQuery UI to your head automatically, as well as a $('document').ready() function that you can customize. However, the one time I used it, I ended up hacking the extension to include another script, which I used to hold all of my extensions and various $.('document').ready(); scripts I wrote. I was about to suggest that it isn't too hard to hack, but I guess that really depends entirely on your own coding knowledge and experience. For me, however, it was pretty easy to do.

Ultimately, the exact way in which you incorporate your use of jQuery into your Joomla site will really depend on several factors, including:

  • what you're actually trying to do,
  • your template's architecture / coding style, and
  • how much you really understand either jQuery & Joomla.

In other words, your mileage may vary.

Finally, in the interest of full-disclosure, keep this in mind: in my day job, I don't use Joomla at all, or even PHP. In my day job, we work in old-school ASP with a custom database-driven application, and I pretty much work mostly on front-end architecture. And I use jQuery exclusively as my only JS library at the day-job, so I don't have to worry about using .noConflict(). Because of all this, I don't spend much time doing development for Joomla... I'll use jQuery in building templates to add interactivity to my modules, but incorporating jQuery into specific articles, modules, or other extensions just hasn't really been on my radar yet. All that said, I do use jQuery enough to have a pretty good idea on what's involved.

Good luck, and I look forward to seeing how everyone incorporates jQuery into their Joomla sites.

Cheers!