News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Jquery tabs not working

Started by Witherbones, February 04, 2016, 09:01:59 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Witherbones

February 04, 2016, 09:01:59 AM
Hello!

I am trying to input a very simple tabbed table into my site. However, anytime I use it, I am getting ALL tabs displayed, none hidden, with clicking the tab title only moving the top of my window to that tab content and doing nothing else.

I am running this on my computer locally, so I am not able to give you a link: all of it is on my computer only, while I work on a layout.

I have added this to my index.template.php
Code Select
echo '
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus...</p>
  </div>
  <div id="tabs-2" style="display: none;">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc...</p>
  </div>
  <div id="tabs-3" style="display: none;">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti...</p>
  </div>
</div>';

Here is the Javascript that I added to theme.js
Code Select
$(document).ready(function() {
    $("#tabs").tabs();
});

under Admin> Configuration > Features and Options > General > Source for the jQuery Library I have selected "Auto".

Inspecting my page gives me the error
Code Select
Uncaught TypeError: $(...).tabs is not a function

Other features of JQuery are working on the site, it seems to only be tabs that are not working so far, but I don't have a large amount of Jquery on my site, so other things my theoretically not work as well. What am I doing wrong here? Is something conflicting or not downloading right? I've been trying to get this to work for hours now!

Illori

#1
February 04, 2016, 09:10:55 AM
which version of SMF are you using? SMF 2.1? if so why are you using SMF 2.1? it is in beta and should not be used in production.

can you verify that you are actually getting jquery to load?

Witherbones

#2
February 04, 2016, 05:01:16 PM
Ive used the append ui for jquery, and it works fine, along with the sites own jquery.

And yes I have 2.1

In very bew to SMF so I just donwnloaded the most recent version number for the sake of being uo to date. Ill download the other version when I get home and see if that yoelds a different result.

Illori

#3
February 04, 2016, 05:07:50 PM
SMF 2.0 does not include jquery by default.

Witherbones

#4
February 05, 2016, 12:08:28 AM
There is an option in the admin panel asking which source you would like your JQuery to be loaded from. I'm assuming since V2.1 is in Beta that this is something that hasn't been loaded in yet?

Just got home, downloading the most recent edition of V2.0 right now. Will let you know what happens.

Kindred

#5
February 05, 2016, 12:12:19 AM
I think that you are confused.

1.1.x is at the end of its life and will cease support soon.

2.0.x is still being supported, but only maintenance/security releases.  This is, however, the current version which is distributed. There is no jquery setting in 2.0.x

2.1 is in beta right now. This does include a jquery setting.


In other words, if you have a jquery setting, you are using 2.1 beta
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Witherbones

#6
February 05, 2016, 01:11:08 AM Last Edit: February 05, 2016, 01:29:00 AM by Witherbones
QuoteYes, I understand, which is why I mentioned the jquery setting.

Now that I have installed a fresh version of 2.0, I'm running into an entirely new issue.

I have included the following links between the <head> tags of my index.template.php to load jquery
Code Select
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>';

This is the html
Code Select
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus...</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc...</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti...</p>
  </div>
</div>

This is the javascript
Code Select
$.noConflict();
jQuery( document ).ready(function( $ ) {
  $("#tabs").tabs();
});

This is the error code that inspecting my page gets me:
Code Select
Uncaught ReferenceError: $ is not defined

hxxp:gyazo.com/d7de35a429afe01c22db1f1b7dcca0fa [nonactive] This is what I get. All tabs visible, no default jquery styling, no tabs functionality. This is on SMF v2.0.

Found my mistake... I'm a little rusty so please don't hate me  ;D :'( I added my jquery links in after my local script link, which caused the error. IM A DOOF!

Thank you for your help, I appreciate it guys!
Print
Go Up Pages1
User actions
Advertisement: