How do I get basic jQuery tabs to work inside a .Net modal popup?

Really simple question: Am I missing something? Seems like this should be all that is necessary for the basic setup... currently I'm getting an un-stylized version (i.e. no tabs, just plain text/html). So they don't look like tabs and when you click them nothing hides/shows as would be expected with tabs. Do I have to manually hook up javascript to show and hide the con开发者_运维百科tents of the tabs or does the framework do this for me?

Update:

So I tested the code out and this works fine for basic tabs. However, I need to use this inside a .Net modal popup using their "Ajax" toolkit. Essentially this is doing a postback which I've noticed tends to fight with jQuery. In the past, I've used the jQuery live events, but I'm not sure what to bind it to... Usually you bind to an event on an object, like a click handler for a button. Here, I need to attach the tab assignment/binding ( using .tabs() ) via a live event but I'm not sure which one. I tried binding to the document load event but no luck with that:

$(document).live('load', bind_tabs);

Any ideas?

Style sheet and Javascript links included on page:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

Added the following line to my stylesheet:

.ui-tabs .ui-tabs-hide { display: none; }

Added the following script to the page:

<script type="text/javascript">
  $(function () {
  $("#tabs2").tabs();
  $("#tabs").tabs();
  });
</script>

HTML:

<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>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Also noticed on the "theming" documentation on the page (http://jqueryui.com/demos/tabs/#theming) that it states the following. Should I manually put in all those styles (like ui-widget) or rely on the framework to do it?

Sample markup with jQuery UI CSS Framework classes

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is

<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>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Everything looks fine to me. Are you sure you are linking your files in correctly?

http://jsfiddle.net/GwnHq/

you could find an appropriate event that occurs after the postback completes - I'm not familiar enough with the MSAjax library to know what that would be but it seems reasonable that they would have one. In that event, you can execute the .tabs() code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

Try linking to the .css file after the two .js files. I had a similar problem with the jQuery UI datepicker, once I had reordered the list as above it worked fine.

This may not help with the use of .tabs() [your code looks ok to me], but it might help you track down the problem. Try ruling things in or out one at a time:

Using an appropriate debugger (firebug, IE Developer Tools, Chrome Developer tools, etc), put a breakpoint on the $("#tabs").tabs(); line. If you hit the breakpoint, you know that jquery framework has loaded correctly and you can rule that out.

To validate that the JqueryUI framework loaded correctly, apply some other jqueryUI specific feature to an element - such as turning a element into a button with the $('#element').button() method. If that works, you know the jQueryUI framework is loaded correctly.

To validate that the .css files have been loaded correctly, add an additional html element to the page and add one of the jquery UI classes to it (ui-state-highlight for example) - if the style changes, then the .css file is loaded correctly.

Then, evaluate the length property of the jquery object to see if the selector successfully found the elements you intended to find or add a 'watch' expression for $("#tabs") and check out what it found.

Try placing your script files after your css files and try the code below

  $(document).ready(function () {
      $("#tabs").tabs();
  });

Note i removed this line as i didnt see anything with this id in your code:

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