We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 25551 ☆ A M B ☆
    • 1,231 Posts
    Hi, i’m wondering if anyone has managed to get jquery and mootools working together on the same page? I’m using jquery for an accordion menu and I want to use a gallery that uses mootools. The mootools gallery functions fine but it’s stopping the menu from working. The menu is fully expanded as if the script isn’t even there... could someone help me with the conflict?
      Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
      AugmentBLU - MODX Partner

      BLUcart - MODX Revolution E-Commerce & Shopping Cart
      • 28042 ☆ A M B ☆
      • 24,524 Posts
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 25551 ☆ A M B ☆
        • 1,231 Posts
        Thanks for the link... i did find lots of info on how to stop the conflict but it’s still happening.
        Even when i put the conflict script in with out the call for mootools it’s stopping the jquery script to stop working.

        Here is a sample of my header code.

        <head>
        <title>[(site_name)] | [*pagetitle*]</title>
        
                    <!-- jquery main script -->
                        <script src="assets/js/jquery.js" type="text/javascript"></script>
                    <!-- END jquery -->
                         
                    <!-- javascript for SWF FLASH movies -->
                        <script src="assets/js/swfobject.js" type="text/javascript"></script>
                    <!-- END javascript for SWF FLASH movies -->
        
                    <!-- javascript for sidebar menu -->
                        <script type="text/javascript" src="assets/js/menu/menu.js"></script>
                    <!-- END javascript for sidebar menu -->
        
                    <!-- main style sheet for site -->
                        <link href="assets/templates/eye/css/new.css" rel="stylesheet" type="text/css" />
                    <!-- END main style sheet for site -->
        
        
        </head>



        The next piece of code is a domain search tool that uses mootools.

        <link href="assets/snippets/ajaxwhois/style/style.css" rel="stylesheet" type="text/css" />
        	<script type="text/javascript" src="assets/snippets/ajaxwhois/js/mootools.js"></script>
        <script type="text/javascript" language="javascript">
           var http_request = false;
           function makeRequest(url, parameters) {
              http_request = false;
              if (window.XMLHttpRequest) { // Mozilla, Safari,...
                 http_request = new XMLHttpRequest();
                 if (http_request.overrideMimeType) {
                 	// set type accordingly to anticipated content type
                    //http_request.overrideMimeType('text/xml');
                    http_request.overrideMimeType('text/html');
                 }
              } else if (window.ActiveXObject) { // IE
                 try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                 } catch (e) {
                    try {
                       http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                 }
              }
              if (!http_request) {
                 alert('Cannot create XMLHTTP instance');
                 return false;
              }
              http_request.onreadystatechange = alertContents;
              http_request.open('GET', url + parameters, true);
              http_request.send(null);
           }
        
           function alertContents() {
              if (http_request.readyState == 4) {
                 if (http_request.status == 200) {
                    //alert(http_request.responseText);
                    result = http_request.responseText;
                    document.getElementById('log_res').innerHTML = result;            
                 } else {
                    alert('There was a problem with the request.');
                 }
              }
           }
         
        </script>


        If I take out the mootools script the jquery functions on the page how it should... add the mootools script line and mootools works but the jquery script doesn’t.

        I have tried

        <script>
             var $j = jQuery.noConflict();
           </script>


        <script>
             var j = jQuery.noConflict();
           </script>


        Just before the end of the head tag and it’s not stopping the conflict. If I leave the non conflict code in and take out the mootools script, jquery still doesn’t work. What on earth am i doing incorrectly? huh
          Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
          AugmentBLU - MODX Partner

          BLUcart - MODX Revolution E-Commerce & Shopping Cart
          • 25551 ☆ A M B ☆
          • 1,231 Posts
          Ok i managed to find a post that explained that i had to change all $ to $j.

          I just thought you had to put the one conflict line of code in and that was it lol. FIXED!
            Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
            AugmentBLU - MODX Partner

            BLUcart - MODX Revolution E-Commerce & Shopping Cart