I am using a joomla module which uses jquery, is called organic tabs,
on the same page where this module is rendered, there is an slider for images which I think is using also jquery or mootools,
If I unpublish this slider on the page, the tabs will work but when both are working together I get:
//Message: Object doesn't support this property or method
//Line: 362
//Char: 9
//Code: 0
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
($params->get('loadjq')==1)? $mainframe->addCustomHeadTag('<script type="text/javascript" src="'.$module_base.'jquery.js"></script>'):'';
$mainframe->addCustomHeadTag('<link type="text/css" rel="stylesheet" href="'.$module_base.'/style/basic/black/style.css" />');
$mainframe->addCustomHeadTag('<script type="text/javascript" src="'.$module_base.'tabs.js"></script>');
?>
<script type='text/javascript'>
jQuery(function(){
jQuery("#tx-tabs").organicTabs({
"speed":"<?php echo $transition_speed;?>",
"action":'<?php echo $rotate_action;?>'
});
});
</script>
<div id="tx-tabs" style="width:<?php echo $module_width,'px';?>">
<?php if($control_panel=='top'):?>
<ul class="nav" style="width:<?php echo $tab_width,'px';?>">
<?php for ($i=0; $i < $items; $i++) : ?>
<li ><a href="#<?php echo str_replace(' ', '',$list[$i]->title);?>" <?php echo ($i==0)? 'class="current"':'';?> ><?php echo $list[$i]->title;?></a></li>
<?php endfor;?>
</ul>
<?php endif;?>
<div class="list-wrap">
<?php for ($i=0; $i < $items; $i++) : ?>
<div id="<?php echo str_replace(' ', '',$list[$i]->title);?>" <?php echo ($i!=0)?'class="hide "':'';?>>
<?php modOrganicTabHelper::renderItem($list[$i], $params, $access); ?>
<div class="clear"></div>
</div>
<?php endfor;?>
</div> <!-- END List Wrap -->
<?php if($control_panel=='bottom'):?>
<ul class="nav" style="width:<?php echo $tab_width,'px';?>">
<?php for ($i=0; $i < $items; $i++) : ?>
<li ><a href="#<?php echo str_replace(' ', '',$list[$i]->title);?>" <?php echo ($i==0)? 'class="current"':'';?> ><?php echo $list[$i]->title;?></a></li>
<?php endfor;?>
</ul>
<?php endif;?>
</div>
Can someone help on how to troubleshooot this error?
If you're getting errors only when using both these two modules, then it may be that they're conflicting with each other.
It's very hard to know what's happening because your question is vague; it would help if we could see the error actually happening; ie if you could provide a link to a test page which shows it. It would also help if we could be sure what libraries were in play here (ie JQuery and Mootoools? Or just JQuery?), and what versions.
The PHP code you've given us is largely irrelevant too, because the error is Javascript based, and the only things you've shown us of your Javascript code are the includes.
But in the absence of better diagnostic data, I'm going to take a wild guess.
If you're right that the second module uses Mootools, it's important to know that there are likely to be major issues if you try to use JQuery and Mootools on the same site. Both JQuery and Mootools define a function called $(), which is a core function for them both, but which works completely differently between the two of them.
What is likely to be happening is that you're loading both libraries, but $() ends up referring only to the one which loads second (it would override the code that loaded first), so any code which refers to the other library will immediately break, probably with an error similar to the one you described.
Ideally you wouldn't use them both libraries together because it's a lot of overhead to have two libraries that do basically a very similar job. It is better to pick one and stick to using modules that use it. So my advice if you are using a Mootools-based slider control is to switch to JQuery-based on. (or switch everything else to Mootools; whichever is easier)
If you have to have both JQuery and Mootools on the same page, then there are ways to run the two libraries together in a compatible way, but you need to know what you're doing. Instructions can be found on the JQuery and Mootools sites.
The other possible cause of this problem is if the two modules are both using the same library (ie JQuery), but are including different versions of it. For example, if one is shipped with JQuery 1.3 and the other with 1.6, there are significant differences between these two versions. The net effect could be virtually the same as described above, and for similar reasons.
If this is the case, you should try to make sure you're only loading JQuery once on the page, and that you're loading the most recent version possible. Ideally a library like JQuery shouldn't be loaded with a module as it is in your example code, but should be part of your core template, so that all modules can know they're looking at the same single version.
Hope that helps.