Try the select event. If the handler for that event returns false you
won't be allowed to switch tabs. Something like:
var $tabs = $('#foo').tabs().bind('select.ui-tabs', function(e, ui)
{
return validateForm( $('#tabcontent div.ui-tabs-container:visible
form')[0] );
});
I assumed youhave to pass in a form element to the validateForm
function and that this function returns true or false.
I guess it'll be better if the ui object also contained the currently
selected tab/panel and not only the one that was clicked - that way
it'll be a bit easier to get the form out of the visible tab panel.
But my solution should work for now.
--Klaus
On Feb 14, 6:47 pm, "[EMAIL PROTECTED]"
<[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm using the jQuery tabs plugin from herehttp://docs.jquery.com/UI/Tabs.
> I have a number of AJAX tabs. When one of the tabs loads (the tab
> "Properties"), it loads with a form. How do I call my validate form
> function and then submit this form when a user clicks on a different
> tab?
>
> Here are the relevant parts of the code:
>
> <html>
> <head>
>
> <script type="text/javascript">
> function validateForm(whichForm) {
> ...
> }
>
> $(function() {
> $('#tabcontent > ul').tabs();
> });
> </script>
> </head>
> <body>
>
> <div id="tabcontent">
> <ul>
> <li><a href="doc_properties.php"
> title="Document"><span>Properties</span></a></li>
> <li><a href="tabs.php" title="Tabs"><span>Tab #2</
> span></a></li>
> </ul>
> </div>
>
> </body>
> </html>
>
> Thanks, - Dave
