What's wrong is that you're reinitializing tabs in the inline click
events (bad practice anyway) inside the checkChangeFlag function.
Specify the select handler in a single/first initialization and remove
those inline event handlers, pretty straightforward:
$(function() {
$('#ap > ul').tabs({
fx: { opacity: 'toggle', duration: 'fast' },
select: function() {
return confirm('Are you sure you want to tab away without
saving?');
}
});
});
--Klaus
On Sep 17, 10:48 pm, simpi <[EMAIL PROTECTED]> wrote:
> 2nd Issue is: Once select returns false in the callback you cannot tab
> away even if you click on “YES, I am sure I want to Tab away”. You are
> stuck with the same tab untill you refresh the screen.
> -------------------------------------------------------------------------
> In the following example I am only using static tabs instead of Ajax
> Tabs before. For Ajax Tabs, Tab contents refresh even if you stay on
> the same tab. But for static tabs, tab contents are not refreshed.
> -------------------------------------------------------------------------
> before using this example please make sure you have jquery-1.2.6.js,
> ui.core.js, ui.tabs.js & ui.tabs.css in the same folder as where you
> have following:
> ------------tab_index.htm----------------------------------------
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
> TR/html4/strict.dtd">
>
> <html lang="en">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=utf-8">
> <meta http-equiv="Content-Style-Type" content="text/css">
> <meta http-equiv="Content-Script-Type" content="text/
> javascript">
>
> <title>jQuery UI Tabs / Tabs 3</title>
>
> <link rel="stylesheet" href="ui.tabs.css" type="text/css"
> media="print, projection, screen">
>
> <script src="jquery-1.2.6.js" type="text/javascript"></script>
> <script src="ui.core.js" type="text/javascript"></script>
> <script src="ui.tabs.js" type="text/javascript"></script>
>
> <script type="text/javascript">
> $(function() {
>
> $('#ap > ul').tabs({
> fx: { opacity: 'toggle', duration: 'fast' }
> });
>
> });
>
> function checkChangeFlag()
> {
> var agree = confirm("Are you sure you want to
> tab away without
> saving?");
> if (agree)
> {
> return true ;
> }
> else
> {
> //stay on the same tab
> $('#ap > ul').tabs({
> select: function(e, ui) {
> return false ;
> }
> });
> }
> }
> </script>
> </head>
>
> <body>
> <h2>Testing Tab Library</h2>
>
> <div id="ap">
> <ul>
> <li><a href="#fragment-16" onclick="return
> checkChangeFlag()"><span>One</span></a></li>
> <li><a href="#fragment-17" onclick="return
> checkChangeFlag()"><span>Tab Two</span></a></li>
> <li><a href="#fragment-18" onclick="return
> checkChangeFlag()"><span>Tab Three</span></a></li>
> </ul>
> <div id="fragment-16">
> <p>
> Define callback functions that are invoked at
> different points in time during the tab switch process.
> <br>
> If the select callback returns false, the clicked
> tab won't be selected. This is useful if switching
> tabs requires form validation before for example.
> This is Page One.
> </p>
> </div>
>
> <div id="fragment-17">
> <p>Page Two from Div</p>
>
> </div>
>
> <div id="fragment-18">
> <p>Page Three from DIV</p>
> </div>
>
> </body>
> </html>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
