jQuery UI Tabs with tables in their content

[Martin Spasovski <sh...@gmail.com>]

Hello Tapestry Users,

I have a little problem. I can successfully use Tabs from jQuery UI (
http://jqueryui.com/demos/tabs/ ) and when I click on a tab the URL in the
address bar changes to mark the opened tab (which is good for bookmarking),
but when I have a table generated in the tabs, then the URL doesn't change
(it doesn't add to it which tab is selected). Everything works fine, but,
the URL doesn't change to reflect the opened tab.

Example: here is the code from jQuery UI for Tabs:

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

And I use it the next way:

<div id="tabs">
> <ul>
>    <li t:type="loop" source="categories" value="category">
>     <a href="#${tabName}">${category.name}</a>
>    </li>
>  </ul>

  <div id="${tabName}" t:type="loop" source="categories" value="category">
>    <table>
>    <thead>
>    <tr>
>     <th>${label:label1}</th>
>     <th>${label:label2}</th>
>     <!-- th... -->
>    </tr>
>    </thead>
>    <tr t:type="loop" source="labels" value="label">
>     <!-- do the TDs here -->
>    </tr>
>    </table>
>    </div>
> </div>
>

So, if I don't make tables in the second div, when I choose a different tab,
the URL in the address bar will change.

Possible solution? Cause it really annoys me. BTW I'm using Tapestry
5.1.0.5.