How to best include jQuery Themeroller in an extension?

Question

With J3x having jQuery included, half the battle of easily including Themeroller is taken care of, but I still have problems getting the Themeroller aspect to work properly. I've found that adding the script tag "somewhere" usually works, but where that script tag goes seems to vary - rendering the widgets broken unless it's "just before this, or just after that".

Is there a Joomla-Correct way of adding Themeroller and all of it's widgets properly to a component?

Answer 1

to include specific JS and CSS in a component, I follow Michael Babker's advice:

Use the media Folder, Allow Overridable Media

http://www.babdev.com/blog/139-use-the-media-folder-allow-overridable-media

• at your root component folder, create a folder called media

• inside, create 2 folders, css and js Don't forget to include the required blank index.html in all these folders

• Modify the yourcomponent.xml file accordingly:

---

<media folder="media" destination="com_yourcomponent">               
    <filename>index.html</filename>                 
    <folder>css</folder>
    <folder>images</folder>              
    <folder>js</folder>
</media>

• in /views/yourcomponent/default.php

or

/views/whateveristhenameofthisfolder/default.php

call your JS / CSS files this way :

JHtml::_('stylesheet', 'com_yourcomponent/yourcss.css', false, true);
JHtml::_('script', 'com_yourcomponent/yourjs.js', false, true);

Of course, you can use different JS/CSS scripts for each of your views.

Hope it helps.

Answer 2

To ensure the JS library will be loaded with your component, you need to include it in your component's view. Something like this in your view.html.php or the template file should work:

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

Note that this will include jQuery in noConflict Mode. It also ensures that the framework will be loaded only once.

To load jQuery in Normal mode, use:

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

Update:

You want your js loaded on the view part of your component, so this is the place to add it. So after including any required frameworks, you also include any other js and css on the view.

To add to this, and depending on how you like to do things or if there is any other reason, you could create a helper file with your own class and methods, that on call, it will decide what js/css files to add, based on each condition. You can also consider to use the media folder as the location of your js/css.

<?php $doc = JFactory::getDocument();
$doc->addScript(JURI::root(true).'/media/com_component/js/myscript.js');
?>

Joomla: Adding JS - Documentation