Announcement

Collapse
No announcement yet.

jQuery UI tabs not working

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    jQuery UI tabs not working

    I trying to using jQuery UI tabs in a Account Edit page and for some reason the tabs won't display I having added the required code. Is there any conflict for the tabs not to work.

    Thanks
    Keyboard Not Found..... Press F1 to continue

    #2
    Re: jQuery UI tabs not working

    Originally posted by tammu View Post
    I trying to using jQuery UI tabs in a Account Edit page and for some reason the tabs won't display I having added the required code. Is there any conflict for the tabs not to work.

    Thanks
    Are the following scripts in the head tag...

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    With these types of issues it is always best to test the issue outside of the admin to make sure it is functioning before you add it to the admin.
    Try using the exact code from the documentation in your html editor to make sure it is working.

    http://jqueryui.com/tabs/
    Last edited by hmendenhall; 03-18-15, 03:21 PM.
    Happie Mendenhall
    Support Technician
    Miva, Inc.

    Comment


      #3
      Re: jQuery UI tabs not working

      Thanks for replying,

      There is no need to jquery.min.js as the theme comes with jQuery 2.1.1 so I just added the jQuery ui 1.11.3 js in the footer after jQuery 2.1.1 and added the jQuery UI stylesheet in the head tag. here is my code below

      In head tag

      Code:
      <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/blitzer/jquery-ui.css" />
      tab code

      Code:
      <div id="tabs1">
           <ul>
             <li><a href="#tabs-1">General</a></li>
             <li><a href="#tabs-2">Profile</a></li>
            <li><a href="#tabs-3">Logout</a></li>
          </ul>
      
         <div id="tabs-1">
            tab 1 content goes here
           </div>
         <div id="tabs-2">
            tab 2 content goes here
           </div>
      
         <div id="tabs-3">
            tab 3 content goes here
           </div>
      </div>
      at the bottom of the page here are script files

      Code:
      <script src="../js/vendor.min.js"></script> [this contains the jQuery v2.1.1]
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
              $("#tabs1").tabs();        
          
          });         
      </script>
      Thanks
      Last edited by tammu; 03-18-15, 03:44 PM.
      Keyboard Not Found..... Press F1 to continue

      Comment


        #4
        Re: jQuery UI tabs not working

        FYI, we've been advised by Miva to put jQuery/jQuery UI loading in the bottom of the page along with all scripts. As more modules and Miva themselves load jQuery without regard to what is already there, conflicts will occur and features will stop working.

        A neat trick to determine which version of jQuery is loaded:

        In Chrome Inspector, in the Console, type:
        $().jquery; <press Enter or Return>

        or

        jQuery().jquery; <press Enter or Return>
        Gordon Currie
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit Any Document Easily | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


          #5
          Re: jQuery UI tabs not working

          Yes all of them are at bottom and jQuery 2.1.1 is running and I see jQuery UI 1.11.3 works with jQuery 2.1.1
          Keyboard Not Found..... Press F1 to continue

          Comment


            #6
            Re: jQuery UI tabs not working

            I'd insert a console.log('Hello world') statement just before the $("#tabs1").tabs(); statement so you can see if it ever gets that far.
            Gordon Currie
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit Any Document Easily | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              Re: jQuery UI tabs not working

              Nope nothing happens. I even tried Bootstrap tabs with no success :(
              Keyboard Not Found..... Press F1 to continue

              Comment


                #8
                Re: jQuery UI tabs not working

                Well, that means the function to call the tabs is not loaded or blocked.

                The only other thing I would try is replace $ with jQuery, to see if there is a conflict somehow.
                Also triple-check your jQuery UI path - one typo torpedoes the whole thing.
                I rely heavily on Chrome Inspector for this type of thing since every darn error shows up.

                Edit: I noticed this is on Suivant. We have observed Suivant does a LOT of JS/jQuery and it can be super difficult to stay isolated from it.
                Last edited by Gordon - Phosphor Media; 03-18-15, 04:59 PM.
                Gordon Currie
                Phosphor Media - "Your Success is our Business"

                Improve Your Customer Service | Get MORE Customers | Edit Any Document Easily | Free Modules | Follow Us on Facebook
                phosphormedia.com

                Comment


                  #9
                  Re: jQuery UI tabs not working

                  The only thing I did not try is the noconflict method. I don't think about it. I will try that and see. Its pretty frustrating that such a simple code won't work.

                  Thanks
                  Keyboard Not Found..... Press F1 to continue

                  Comment


                    #10
                    Re: jQuery UI tabs not working

                    @tammu - Are you receiving any console errors? Are you using jQueryUI for more than just the tabs? Generally, we wouldn't recommend adding it for just one function as it can increase your page load time due to the size of the JS and CSS needed. If you are looking for a basic tab structure, I would recommend a plugin like TinyTabs or just building your own structure through a tutorial like this Simple Tabbed Content Area with CSS and jQuery.

                    Matt Zimmermann

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    Comment

                    Working...
                    X