CODEWITHSUNDEEP
jqueryjquery-pluginsjoomlajoomla3.0
user1448031
user1448031

Reputation: 2166

jQuery plugin not working in Joomla 3 module

I am trying to implement a jQuery plugin for converting tabs to responsive accordion in my Joomla 3 module. The plugin is called Easy Responsive Tabs to Accordion (https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion). I have correctly included the required css and js files in the module but it's not firing up the plugin for me.

In the module's tmpl/default.php, I've included the scripts as below:

$document = JFactory::getDocument();
$document->addScript(JURI::base() . 'modules/mod_mytest/js/easyResponsiveTabs.js');
$document->addScript(JURI::base() . 'modules/mod_mytest/js/jquery-1.9.1.js');
$document->addStyleSheet(JURI::base() . 'modules/mod_mytest/css/mytheme/easyResponsiveTabs.css');
<script type="text/javascript">
$(document).ready(function() {
    $('#horizontalTab').easyResponsiveTabs();
});
</script>

I also have the correct HTML markup in tmpl/default.php as shown in the docs.

When I download and run the plugin, it works fine but when I integrate it in Joomla, it fails. I may be missing some simple steps while integrating it but I am unable to figure it out.

Upvotes: 0

Views: 1637

Answers (2)

Lodder
Lodder

Reputation: 19733

Firstly, check in Chrome Dev Tools or Firebug (whatever your browser uses) to see if the 3 files you have imported are actually being imported. There is nothing wrong with the way you have done that, but always good to check. Then, replace:

<script type="text/javascript">
$(document).ready(function() {
    $('#horizontalTab').easyResponsiveTabs();
});
</script>

with the following:

$document->addScriptDeclaration('$("#horizontalTab").easyResponsiveTabs();');

I think it's the way you were calling the plugin so pretty sure the code above will sove the issue

Update:

Just realised that you're using Joomla 3.0, so rather than importing jQuery the way you have done so, use the following instead:

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

make you insert it before the other scripts. This uses the Joomla 3.x coding standards to import jQuery in noConflict mode.

Hope this helps

Upvotes: 2

Joao Paulo
Joao Paulo

Reputation: 1103

Try to include jquery library first:

$document = JFactory::getDocument();
$document->addScript(JURI::base() . 'modules/mod_mytest/js/jquery-1.9.1.js');
$document->addScript(JURI::base() . 'modules/mod_mytest/js/easyResponsiveTabs.js');
$document->addStyleSheet(JURI::base().'modules/mod_mytest/css/mytheme/easyResponsiveTabs.css');

If don't solve, try to use jQuery no conflict

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
jQuery('#horizontalTab').easyResponsiveTabs();
});
</script>

Upvotes: 0

Related Questions