I have a form that uses tabs - however I need to use Ajax to update
portions of the form. Trouble is - after the ajax load, the events
bindings are messsed up and re-attaching has very ugly results!
Here's the code -
<pre><code>
<div id="tabsDiv">
<ul id="test">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
<div id="Updatable">
<div id="one">
original message 1
</div>
<div id="two">
original message 2
</div>
</div>
<input type="submit" id="submit" />
</div>
<!---</form>--->
<script type="text/javascript">
$(document).ready(function()
{
init();
$("#submit").click(function()
{
$("#tabsDiv > ul").tabs("remove", 1);
$("#tabsDiv > ul").tabs("remove", 0); // NOTE I tried
destroy - but it was worse
$("#Updatable").load("http://wcorptw6r7p7d1/VehicleStockIn/
Test/UpdateTabText");
$("#tabsDiv > ul").tabs("add", "#one", "One",
0);
$("#tabsDiv > ul").tabs("add", "#two", "Two", 1); // I
tried init() here but it did not work.
});
});
function init()
{
$("#tabsDiv > ul").tabs();
}
</script>
</code></pre>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
