By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,608 Members | 1,925 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,608 IT Pros & Developers. It's quick & easy.

JQuery problem in a Joomla template

100+
P: 106
hello ,
i'm facing a problem in executing a very simple fading effect on an image in jquery , the code works fine but when placed in the index file for a joomla template , nothing at all happens !!the code is not working , i googled and found that i may have to use jQuery.noConflict(); function but also that did not work for me ..pls help i'm stuck
Jun 6 '12 #1

✓ answered by omerbutt

which version of joomla are you using joomla versions higher than 1.5 by default include the support for mootools thats why you are having problems running jquery as you have to CALL THE JQUERY BEFORE THE MOOTOOLS LIBRARY IS LOADED AND THEN CALL THE JQUERY.NOCONFLICT() and then load the mootools library if you are designing the component or module for joomla then you may have to use he righ method of loading the libraries from with in the module / component to let joomla arrange the loading of the motools and the jquery library , it would have been better if you provided the index page link where you are calling the jquery so that i may point out to you why this is happening and would be easier for you to know the logic behind this error.
here is an example how i used to manage these conflicts
may be it would help you out

Expand|Select|Wrap|Line Numbers
  1.  
  2. $uri = JFactory::getURI();
  3.  
  4.     $filename_js="js/jquery.js";
  5.     $filename_js_2="js/moo-tip.js";
  6.     $filename_js_3="js/reservations.js";
  7.     $filename_js_4="js/MooDialog.js";
  8.     $filename_js_5="js/MooDialog.Alert.js";
  9.     $filename_js_6="js/MooDialog.Confirm.js";
  10.     $filename_js_7="media/system/js/mootools-more.js";
  11.     $filename_css="css/styles.css";    
  12.     $filename_css_2="css/MooDialog.css";
  13.  
  14.         JHTML::Script($filename_js_7,true);
  15.     JHTML::Script($filename_js_4,$path_component);
  16.     JHTML::Script($filename_js_5,$path_component);
  17.     JHTML::Script($filename_js_6,$path_component);
  18.     $document->addScript($path_component.$filename_js_2);
  19.     $document->addScript($path_component.$filename_js);
  20.     $document->addScript($path_component.$filename_js_3);
  21.       $document->addStyleSheet($path_component.$filename_css);
  22.     $document->addStyleSheet($path_component.$filename_css_2);
  23.       $document->addScriptDeclaration($this->customScripts());
  24.  
  25.  
regards,
Omer Aslam

Share this Question
Share on Google+
5 Replies


omerbutt
100+
P: 638
can you provide the code or link to the url where you are working , normally when you use the jQuery.noConflict() it means you are using another library along jquery and when you do it , you have to replace the $ from jquery code with jQuery
, for example
Expand|Select|Wrap|Line Numbers
  1. $('#my_id').val() 
will be changed to
Expand|Select|Wrap|Line Numbers
  1. jQuery.("#my_id").val();
Jun 7 '12 #2

100+
P: 106
i was testing a small script from W3schools
Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function(){
  2.              $('button').click(function(){
  3.              $('p').toggle();
  4.               });
i did not include the source for the jquery library since i found it in the original source code for the joomla template im working on but i also tried including it once again above the following code and also nothing happens
Jun 7 '12 #3

omerbutt
100+
P: 638
which version of joomla are you using joomla versions higher than 1.5 by default include the support for mootools thats why you are having problems running jquery as you have to CALL THE JQUERY BEFORE THE MOOTOOLS LIBRARY IS LOADED AND THEN CALL THE JQUERY.NOCONFLICT() and then load the mootools library if you are designing the component or module for joomla then you may have to use he righ method of loading the libraries from with in the module / component to let joomla arrange the loading of the motools and the jquery library , it would have been better if you provided the index page link where you are calling the jquery so that i may point out to you why this is happening and would be easier for you to know the logic behind this error.
here is an example how i used to manage these conflicts
may be it would help you out

Expand|Select|Wrap|Line Numbers
  1.  
  2. $uri = JFactory::getURI();
  3.  
  4.     $filename_js="js/jquery.js";
  5.     $filename_js_2="js/moo-tip.js";
  6.     $filename_js_3="js/reservations.js";
  7.     $filename_js_4="js/MooDialog.js";
  8.     $filename_js_5="js/MooDialog.Alert.js";
  9.     $filename_js_6="js/MooDialog.Confirm.js";
  10.     $filename_js_7="media/system/js/mootools-more.js";
  11.     $filename_css="css/styles.css";    
  12.     $filename_css_2="css/MooDialog.css";
  13.  
  14.         JHTML::Script($filename_js_7,true);
  15.     JHTML::Script($filename_js_4,$path_component);
  16.     JHTML::Script($filename_js_5,$path_component);
  17.     JHTML::Script($filename_js_6,$path_component);
  18.     $document->addScript($path_component.$filename_js_2);
  19.     $document->addScript($path_component.$filename_js);
  20.     $document->addScript($path_component.$filename_js_3);
  21.       $document->addStyleSheet($path_component.$filename_css);
  22.     $document->addStyleSheet($path_component.$filename_css_2);
  23.       $document->addScriptDeclaration($this->customScripts());
  24.  
  25.  
regards,
Omer Aslam
Jun 7 '12 #4

100+
P: 106
Wow, this helped alot !
problem solved
Thanks a million :)
Jun 7 '12 #5

omerbutt
100+
P: 638
my pleasure :) , please choose the right answer so that it may help others who come here searching for the same issue ,
regards,
Omer Aslam
Jun 14 '12 #6

Post your reply

Sign in to post your reply or Sign up for a free account.