Search code examples
javascriptjqueryconflict

Conflicts in Mootools & jQuery In Joomla


I read all the related post but I think I am missing something.

My page structure is:

1 - Load Motools library in Joomla. Code:

JHTML::_('behavior.tooltip');
JHTML::_('behavior.mootools');
JHTML::_('behavior.formvalidation');

2 - Then load the Jquery library code is:

<script language="javascript" src="<?=$this->baseurl;?>/includes/js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?=$this->baseurl;?>/includes/js/jquery/customjsfile.js"></script>`

3 - Then there are few JS function which uses Jquery Functionalities. The code is:

function abc() { /* -.stuffs uses jquery */ }
function xyz() { /* ..another function which uses jquery */}

4 - Load body of the page

5 - At the end again few lines of JS code . Which again use Jquery. Code is:

<script language="javascript">
  $("#dialog").html(newHTML);
</script>

This is how my page is. Now I am getting the Conflict errors in Motools & Jquery.

How do I resolve it.


Solution

  • use jQuery instead of $ and

    give

    jQuery.noConflict();
    

    jQuery.noConflict

    Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():