Power By 专否社区

Jquery tabs inside a table layout

Go To StackoverFlow.com

0

The part I want to "tab" is inside a nested table layout.

It starts after a table mess like this:

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> 
        <div id ="SearchModuleContainer">
       <ul class="tabNavigation">
          <li><a href="#PersonSearchPanel"></a></li>
          <li><a href="#TypeSearchPanel"></a></li>
       </ul>

      <div id="PersonSearchPanel" runat="server">
        <table width="100%" border="0" cellspacing="0">
           <tr>
             <td align="center" valign="top">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                   <tr>
            ...
            ...
      </div>
      <div id="TypeSearchPanel" runat="server">
        <table width="100%" border="0" cellspacing="0">
           <tr>
             <td align="center" valign="top">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                   <tr>
            ...
            ...
      </div>
    </div>

I've added a ref to jquery-ui-1.7.1, and in my js file, I have:

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

My question is, have I missed something, or are there some issues when using jquery inside an "old-school" messed up table layout like this?

2009-06-16 10:14
by Soeren
Did you also add a reference to the jQuery core library - Tomas Aschan 2009-06-16 10:19
in this link u have a very good example http://www.remotesynthesis.com/post.cfm/adding-and-removing-tabs-with-jquery-and-jquery-u - Haim Evgi 2009-06-16 10:31
First i would make sure the id's for the panel's are unique and not twice (PersonSearchPanel). Also make sure that the id of the panel is PersonSearchPanel because you have a RUNAT="SERVER" tag and this could change the id of the panel to somithing like this: ct00myTablePersonSearchPane - jeroen.verhoest 2009-06-16 10:31
oops, the double id's were a copy paste error, the second one is called TypeSearchPanel. I removed the runat = "Server", but it didn't change anything. You're right, runat = "Server" changes the id at runtime, but I think it only happens if you use master pages, which I don't. I also have a ref to jquery-1.3.2.min.j - Soeren 2009-06-16 10:42
What happens if you call the .tabs() function on the ul list instead? (what I mean is: $('#tabNavigation').tabs(); - Tomas Aschan 2009-06-16 11:14
Hey Thomas, I tried it, but no luck, nothing happens.. - Soeren 2009-06-16 11:28
Tomas, sorry :- - Soeren 2009-06-16 11:29

0

You need to make sure you have the css correctly implemented for the ui-tabs-hide, ui-tabs-selected classes. If you havn't done this correctly it will seem like the script isn't working. The most easy way to check it adding the following:

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css" />

Just add this in the head section of your html page before your javascript files. I tested your example and the tabs functionality works with tables.

[EDIT] I pasted the source code from my test example here.

2009-06-16 11:46
by jeroen.verhoest
Thanks alot that worked :- - Soeren 2009-06-16 20:18
Ads