Question

Finally got it! I didn’t have the css loaded!! silly me… thanks for helping me with the other issues!

I’m using ruby on rails locally.

attempting to work with “jquery-ui-1.8.16.custom.min.js” & “jquery-1.6.2.min.js”

i was able to get jQuery ui “accordion” to work just fine.. but “tabs” will not work!!!

I’ve check that files are called properly and in the correct locations…

<script type="text/javascript" src="/javascripts/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js">
<script type="text/javascript" src="/javascripts/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js">

firebug shows the following 3 errors (attempting to use jquery ui “tabs”):

jQuery is not defined
[Break On This Error] c.ui.isOverAxis(b,e,i)}})}})(jQuery);


jquery...4700986 (line 18)
element.dispatchEvent is not a function
[Break On This Error] element.dispatchEvent(event);


protot...4640791 (line 5653)
$("#tabs").tabs is not a function
[Break On This Error] $( "#tabs" ).tabs(); 

these errors tell me something is wrong with the jQuery UI lib I just downloaded from their “stable” link…. Is that the case or is something else going on here?

Thanks!

After changing the order of my libs I was able to get it down to 1 error (error with prototype lib)….

element.dispatchEvent is not a function

[Break On This Error] element.dispatchEvent(event);

below is an update which contains my tabs html and js…

<div id="tabs">
<ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
    <li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">
    <p>tab1 content</p>
</div>
<div id="tabs-2">
    <p>tab2 content</p>
</div>
<div id="tabs-3">
    <p>tab3 content</p>
</div>
    </div>

jQuery:

$(document).ready(function(){


$( "#tabs" ).tabs();

});

and when I replace the “.tabs()” with “.hide()” the tabs element does hide properly…

What am I doing wrong here?

I also tried noConflict mode with the following JS:

 jQuery(document).ready(function(){
 var $j = jQuery.noConflict();

  $j( "#tabs" ).tabs();

 });

same issues…

Answer 1

Your error:

jQuery is not defined

This translates to: your <script> tags are in the wrong order.

jQuery should load before jQuery UI:

<script type="text/javascript" src="/javascripts/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js">
<script type="text/javascript" src="/javascripts/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js">