correct way to load jQuery plugin in Joomla 3.0

Jindan Zhou

unread,

Jun 12, 2013, 8:53:02 PM6/12/13

to joomla-de...@googlegroups.com

Hi all,
I am working on a plugin that adds jQuery jPlayer (http://jplayer.org/) to my site, I'll need to put a plugin jquery.jplayer.min.js after jQuery is loaded, I tried two methods:
1.              $document = JFactory::getDocument();
            $document->addScript('/plugins/content/jplayhtml5/script/jquery.jplayer.min.js');

This method loads the plugin, but before jQuery is loaded;
2
87             $filename = 'jquery.jplayer.min.js';
88             $path = 'plugins/content/jplayhtml5/scripts/';
89             JHTML::script($filename, $path);
This method won't load the plugin at all.

What is the correct way to load jQuery plugin in order? BTW, I tried on Joomla 3.1.1 with the default Protostar template.

Thanks,

Mark Dexter

unread,

Jun 12, 2013, 11:24:36 PM6/12/13

to joomla-de...@googlegroups.com

If you look at the file administrator/templates/isis/index.php, you
see this code:

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');

That is loading the bootstrap framework and then loading some
additional .js file that might depend on it. So I think that is one
way that should work. There are also examples where we do <script>
elements after the boostrap.framework method, but I think addScript()
is preferred.

Mark

> --
> You received this message because you are subscribed to the Google Groups
> "Joomla! General Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to joomla-dev-gene...@googlegroups.com.
> To post to this group, send an email to joomla-de...@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/joomla-dev-general?hl=en-GB.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

Viper

unread,

Jun 13, 2013, 12:24:23 AM6/13/13

to joomla-de...@googlegroups.com

Unfortunately it's maybe works in backend(but I think what no). In a frontend this way isn't correct in any way. Why? Because the component initialized before the template, so all addScript in component will be overridden by template(not component template). And even if you remove the bootstrap.framework in the template, the jquery allways will be loaded after the component scripts.

I see only one way to load script that depend on jQuery - load it in component template. It will be inserted into <body>. This is not good, but it only one right way.
A few days ago I was trying to remove from the isis template code 'bootstrap.framework'. But this just reorder the loading order for script(mootools and core was loaded first and jquery last). Look at the JHtmlBehavior and JHtmlJquery classes in libraries/joomla/html.

Allon Moritz

unread,

Jun 13, 2013, 2:48:51 AM6/13/13

to joomla-de...@googlegroups.com

JHtml::_('jquery.framework');

JFactory::getDocument()->addScript(JURI::root().'plugins/content/jplayhtml5/script/jquery.jplayer.min.js');

Then the order should be correct....

--

Matt Thomas

unread,

Jun 13, 2013, 6:51:27 AM6/13/13

to joomla-de...@googlegroups.com

The issue, as I understand it, is execution order of extensions and when the _scripts array is added to. If a component adds to the array before JHtml::_('bootstrap.framework'); is called, the component script added to the _scripts array will be before jQuery is loaded. Is that correct?

Best,

Matt Thomas
Founder betweenbrain™
Lead Developer Construct Template Development Framework
Phone: 203.632.9322
Twitter: @betweenbrain
Github: https://github.com/betweenbrain

Sent from mobile. Please excuse any typos and brevity.

--

Jindan Zhou

unread,

Jun 13, 2013, 11:48:56 AM6/13/13

to joomla-de...@googlegroups.com

Issue solved per Mark and Laoneo's code (and order;-), they are called from a plugin script. For the record:

            $document = JFactory::getDocument();
            JHtml::_('jquery.framework');
            $document->addScript('/plugins/content/jplayhtml5/scripts/jquery.jplayer.min.js');

Good lesson!

Thanks,

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-general+unsub...@googlegroups.com.

Reply all

Reply to author

Forward