How to add Jquery or Jquery plugins to Joomla 3

StackOverflow https://stackoverflow.com/questions/20539513

Question

I have basic knowledge of HTML, CSS, Jquery and PHP. I would say my understanding of Joomla is very good though. My problem is that I have looked endlessly through search engines on how exactly to implement Jquery into Joomla 3. From my understanding Joomla 3 already comes with Jquery? Does that mean I no longer have to reference it in my HTML? I realize Joomla Documentation states I should call JHtml::_('jquery.framework'); but where and how exactly would I call this? I am assuming in the head of my HTML document? Another question is that is my understanding was that Joomla's default editor is a word processor not a HTML editor? I realize their are other editor extensions I could download, is their one that is recommended?

I am looking for clear instructions on exactly how I would add my own Jquery or a plugin already available, my apologies in advance if my question sounds stupid in any way as I am very new to this and did attempt to search and experiment for an answer before coming here.

Was it helpful?

Solution

You can add jQuery and your own Javascript files and also style sheets by adding the necessary commands at the top of the file where you need to use them, as in the following example:

<HTML>
<head>

<?php

defined('_JEXEC') or die;

JFactory::getDocument()->addStyleSheet(JURI::root().'/tmpl/default.css');
JHtml::script(JURI::base() . '/tmpl/jquery-ui-1.10.3.custom.js');
JHtml::_('jquery.framework'); // load jquery
JHtml::_('jquery.ui'); // load jquery ui
JHtml::script(JURI::base() . 'tmpl/sample.js');

</head>

<body>

<!-- Remainder of your page content would go here -->

</body>

?>

I have found that sometimes Joomla is sensitive to the order in which things are loaded but a little experimentation generally solves the problem.

OTHER TIPS

Using JHtml::_('jquery.framework'); will automatically call jQuery (in noConflict mode) and import it on the site. You can use this snippet anywhere in your code as it will also automatically get appended to the <head> tags

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top