Jquery Design Problem

Question

I'm working with Jquery and Joomla3 and Nooku framework and I need to add CSS style to my page which I'm using the following for:

JFactory::getDocument()->addCustomTag("<script type='text/javascript' src='".JURI::root(1)."/components/com_sgrmre/lib/DataTables-1.10.6/media/js/jquery.dataTables.min.js'></script>");   
JFactory::getDocument()->addCustomTag("<style src='components/com_sgrmre/lib/DataTables-1.10.6/media/css/jquery.dataTables.css'/>");

The first JFactory line is to import a JS file into my page and it works fine.

The second line is to import the CSS file into my page, but it doesn't work, as if the jquery.dataTables.css had no effect.

Please help and thank you

Answer 1

If you are using Nooku Framework to build your component you can make use of the build in template engine and special ktml tags which makes it very easy to add assets to your page head.

First of all, you need to ensure that your component assets are in the Joomla /media folder. Example : /media/com_foo/css/bar.css

Now you can use <ktml:style src="media://com_foor/css/bar.css" /> in your component template.

Please note that this only works in a template and if you are using Nooku Framework 2.x.

The <ktml:style src="[]" /> is a special tag that the template engine will replace into a correct script tag and move into the head of your page.

The media:// is a special asset URL scheme. It's a shortcut for the Joomla media folder used in URLs to media assets. It will be filtered by the template engine upon render and replaced by the absolute path for the folder being JURI::root(). Unless you define this otherwise.

The use of the <ktml:style src="[]" /> makes it very easy to include css files in your Nooku powered extensions and it makes your template more re-usable and simpler.

For an example check our Nooku example todo component.

More about the Joomla media folder can be found in the Joomla developer best practives.

For loading javascript you can use the <ktml:script scr="[..]" /> tag.

Answer 2

Firstly, you don't need to use addCustomTag to import your scripts. You can use addScript and addStylesheet for this, or even JHtml. Secondly, you haven't defined the root of the path for the stylesheet.

Try replacing all you code with this:

$doc = JFactory::getDocument();
$doc->addScript(JUri::root() . 'components/com_sgrmre/lib/DataTables-1.10.6/media/js/jquery.dataTables.min.js');
$doc->addStylesheet(JUri::root() . 'components/com_sgrmre/lib/DataTables-1.10.6/media/css/jquery.dataTables.css');

or this:

JHtml::_('script', JUri::root() . 'components/com_sgrmre/lib/DataTables-1.10.6/media/js/jquery.dataTables.min.js');
JHtml::_('stylesheet', JUri::root() . 'components/com_sgrmre/lib/DataTables-1.10.6/media/css/jquery.dataTables.css');