We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Problem with Modx & jQuery?

    • 35158
    • 2 Posts
    jloescher Reply #1, 15 years, 2 months ago
    Hello Everyone,

    I’m new to jQuery but I decided to use it with a new site I am working on. I was able to get the project woirking correctly through a regular html page but once I loaded it onto a template for Modx Reolution it failed.

    Please review both of these sites:

    Modx Revolution / Not Working - http://olympus.jloescher.com/

    Non CMS / Working - http://olympus.jloescher.com/temnplate v1.html

    I used the below tutorial to create the image slider.

    http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

    This is attached as a script "assets/js/featured.js":

     $(document).ready(function(){ $("#featured-hd").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); $("#featured-hd").hover( function() { $("#featured-hd").tabs("rotate",0,true); }, function() { $("#featured-hd").tabs("rotate",5000,true); } ); });


    This is the HTML Source:


     <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
                <a href="#fragment-1" style="padding: 5px;">
                    <img src="assets/img/hd/featured/vehicles/towncar-small.png" alt="Lincoln Town Car L" />
                    <span>Lincoln Town Car L Series</span>
                   </a>
            </li>
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
                <a href="#fragment-2" style="padding: 5px;">
                    <img src="assets/img/hd/featured/vehicles/2011mercedesS550-small.png" alt="2011 Mercedes S550" />
                    <span>2011 Mercedes S550</span>
                   </a>
            </li>
        </ul>
        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="assets/img/hd/featured/vehicles/towncar.png" alt="" />
            <div class="info">
            <h2><a href="#">Lincoln Town Car L Series</a></h2>
            <p>Information about the car & features</p>
            </div>
        </div>
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="assets/img/hd/featured/vehicles/2011mercedesS550.png" alt="" />
            <div class="info">
            <h2><a href="#">2011 Mercedes S550</a></h2>
            <p>Information about the car & features</p>
            </div>
        </div>


    Both site are using the same jQuery source files:

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.15/jquery-ui.min.js"></script>




    Any help would be appreciated. It may be something simple but at 1:30 AM, I might just not be able to wrap my head around it. But since the pure HTML version is working I am guessing there might be some kind of conflict?
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 15 years, 2 months ago
      As long as you are sure that you have all of the required .js library files loaded in the required order, then it would be a conflict. What other javascript do you have on the page? I usually create a "testing" resource with a minimal template just to make sure I can get my javascript working correctly all by itself. Then I change the testing page’s template to the template I’ll be using, and see what breaks. That way I know if it’s a conflict or a silly typo causing the failure. Of course, Firebug or some other javascript debugger and error reporting tool is essential.

      Ah, looking at the two sites, I see that in the MODx site you have the UI library loaded before the JQuery library. That’s probably your problem.
      <script type="text/javascript" src="http://code.jquery.com/ui/1.8.15/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="assets/js/featured.js"></script>
        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
        • 35158
        • 2 Posts
        jloescher Reply #3, 15 years, 2 months ago
        Awesome, Sottwell. That fixed the problem lol. Something so minor smiley