0

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

3

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.

1

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');
  • thanks for help but it didnt work , when i changed addCustomTag , even the JS functions didnt work anymore – Ahmed Apr 25 '15 at 19:25
  • I didn't only change addCustomTag. Please make sure you copied all my code exactly and replaced your code with it. Also make sure that the files exist in those paths by typing the following URL in your browser www.YOURSITE.com/components/com_sgrmre/lib/DataTables-1.10.6/media/css/jquery.dataTables.css – Lodder Apr 25 '15 at 19:27
  • i did changes but yet it didnt work , and after searching i guess the problem is with the CSS i want to include which is ThemeRoller , maybe Mootools is having conflict with JQuery on Joomla :/ – Ahmed Apr 25 '15 at 19:34
  • 1
    Joomla ensures there are no conflicts with Mootools and jQuery. It might be something to do with your script. Please check your browser console for any errors that may be occurring – Lodder Apr 25 '15 at 19:41
  • they exist within the correct paths , ok i will check thanks – Ahmed Apr 25 '15 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.