Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice Burgess wrote:
> Klaus,
>
> Done. Inline is the patch, I've sent you the attached full version.
>
Apparently my middle mouse button is a little trigger happy; Here is the
non broken, unrepeated changes;
[EMAIL PROTECTED] ~]$ diff tabs.old.js tabs.new.js
391,395c391,393
< if (typeof onClick == 'function') {
< // without this timeout Firefox gets really
confused and calls callbacks twice...
< setTimeout(function() {
< onClick(clicked, toShow[0], toHide[0]);
< }, 0);
---
> if (typeof onClick == 'function' && onClick(clicked,
toShow[0], toHide[0]) == false && !init) {
> container['locked'] = false;
> return false;
396a395,396
>
> init = false;
533a534
> var init=true; // True if no has been activated. When true, the
onClick function's return will have no effect.
[EMAIL PROTECTED] ~]$
~ Brice
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Klaus Hartl wrote:
> Never mind, the cleanest solution will be returning false for the
> onclick handler for now.
Klaus,
Done. Inline is the patch, I've sent you the attached full version.
---
[EMAIL PROTECTED] ~]$ diff tabs.old.js tabs.new.js
391,395c391,393
< if (typeof onClick == 'function') {
< // without this timeout Firefox gets really
confused and calls callbacks twice...
< setTimeout(function() {
< onClick(clicked, toShow[0], toHide[0]);
< }, 0);
[EMAIL PROTECTED] ~]$ diff tabs.old.js tabs.new.js
391,395c391,393
< if (typeof onClick == 'function') {
< // without this timeout Firefox gets really
confused and calls callbacks twice...
< setTimeout(function() {
< onClick(clicked, toShow[0], toHide[0]);
< }, 0);
---
> if (typeof onClick == 'function' && onClick(clicked,
toShow[0], toHide[0]) == false && !init) {
> container['locked'] = false;
> return false;
396a395,396
>
> init = false;
533a534
> var init=true; // True if no has been activated. When true, the
onClick function's return will have no effect.
[EMAIL PROTECTED] ~]$
> if (typeof onClick == 'function' && onClick(clicked,
toShow[0], toHide[0]) == false && !init) {
> container['locked'] = false;
> return false;
396a395,396
>
> init = false;
533a534
> var init=true; // True if no has been activated. When true, the
onClick function's return will have no effect.
[EMAIL PROTECTED] ~]$
---
Now, I did get rid of that timeout. Unfortunately I do not have FF1.5 to
test with, but callbacks were *not* executed twice in FF2 with my
changes. I don't see why they'd be executed twice?
~ Brice
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice Burgess schrieb:
> Also, regarding the supposed .enableTab(#).triggerTab(#) bug; I found
> it to be limited to the initial tab (index 1) Given:
>
>
>
> href="mailing/composition.php">{t}Setup{/t}
> href="mailing/template.php">{t}Templates{/t}...
>
>
>
>
> $().ready(function(){
> $('#mailing').tabs({remote: true});
> $('#mailing').enableTab(1).triggerTab(1); /* does not open tab 1 */
> // $('#mailing').enableTab(2).triggerTab(2); /* works (opens tab 2) */
> });
>
Ah, I see. I think, that's because an an already "active" Tab cannot be
triggered. I'm going to rewrite Tabs soon (Tabs 3), and it will allow
closed tabs, closing (removing) and adding tabs and some more flexibility.
Never mind, the cleanest solution will be returning false for the
onclick handler for now.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Klaus Hartl wrote:
> Brice Burgess schrieb:
>
>> You're right that wouldn't work.. that's why I would like to cancel tab
>> activation if onClick returns false. This way I can do;
>>
>>
>> $(container).tabs({remote: true, onClick: submitForm});
>>
>> var clickedTab = false;
>>
>> function submitForm(tab, content, oldContent) {
>> // pseudo code...
>>
>> clickedTab = index_of_tab;
>>
>> $(form,oldContent).submit();
>> // NOTE; the forms plugin is attached to the form, and
>> asynchronously submits it. Upon form return, successCallback is called.
>>
>>// cancel tab activation -- *KEY* behavior
>>return false;
>> }
>>
>> function successCallback() {
>> if(form passed server side validation)
>> $(container).triggerTab(clickedTab);
>> else
>> ... (form did not pass server side validation)
>> }
>>
>
> But that could be done like that:
>
> $('#tabs').tabs({ remote: true, disabled: [2, 3] });
> $('#tabs>ul>li>a:eq(2)').click(function() {
> submitForm();
> });
>
> // callback for submit form
> function callback(result) {
> if (result == form passed server side validation) {
> $('#tabs').enableTab(2).triggerTab(2);
> }
> }
>
> Well, anyway, I'll implement your request if it's possible...
>
Klaus,
I think your method is possible, and one I originally tried before
running into the $(e).enableTab(1).triggerTab(1); bug which prompted my
post (more regarding bug below). However, I also think that this method
will end up being much more complicated (vs. onClick returning false to
cancel loading of tab) as it needs to account for all the logic of
enabling/disabling the tabs as well as CSS styling && loosing the
ability to actually disable a tab (stylistically) without adding another
layer of kludge ;)
I will be extremely grateful if you are able to bring the canceling
functionality to the onClick function. I took a quick peak and realized
it was not as simple as;
if (typeof onClick == 'function') { if (!onClick) return false; }
due to that setTimeout function
Let me know how it goes, I'll have more time tomorrow to take a stab
at this.
Also, regarding the supposed .enableTab(#).triggerTab(#) bug; I found
it to be limited to the initial tab (index 1) Given:
{t}Setup{/t}
{t}Templates{/t}...
$().ready(function(){
$('#mailing').tabs({remote: true});
$('#mailing').enableTab(1).triggerTab(1); /* does not open tab 1 */
// $('#mailing').enableTab(2).triggerTab(2); /* works (opens tab 2) */
});
Anyhow, I do appreciate all your efforts man! Sorry for being a pain.
As ever,
~ Brice
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice Burgess schrieb:
> Klaus Hartl wrote:
>> That would be done like:
>>
>> $('#container>ul>li>a:eq(2)').click(function() {
>> if (formIsValid()) {
>> $('#container-1').enableTab(2).triggerTab(2);
>> }
>> return false;
>> });
>>
>> Well, not exactly. The problem is that you're submittig a form, and that
>> is going to be asynchronous I assume... That's totally not supported for
>> onClick, because I just cannot stop execution of the rest of the script
>> while waiting for the response of the form submit.
>>
> You're right that wouldn't work.. that's why I would like to cancel tab
> activation if onClick returns false. This way I can do;
>
>
> $(container).tabs({remote: true, onClick: submitForm});
>
> var clickedTab = false;
>
> function submitForm(tab, content, oldContent) {
> // pseudo code...
>
> clickedTab = index_of_tab;
>
> $(form,oldContent).submit();
> // NOTE; the forms plugin is attached to the form, and
> asynchronously submits it. Upon form return, successCallback is called.
>
>// cancel tab activation -- *KEY* behavior
>return false;
> }
>
> function successCallback() {
> if(form passed server side validation)
> $(container).triggerTab(clickedTab);
> else
> ... (form did not pass server side validation)
> }
But that could be done like that:
$('#tabs').tabs({ remote: true, disabled: [2, 3] });
$('#tabs>ul>li>a:eq(2)').click(function() {
submitForm();
});
// callback for submit form
function callback(result) {
if (result == form passed server side validation) {
$('#tabs').enableTab(2).triggerTab(2);
}
}
Well, anyway, I'll implement your request if it's possible...
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice Burgess schrieb:
> I've finally got around to using the tabs plugin && am loving it! :) In
> due time, I of course came across a complexity that I'm having a hard
> time elegantly solving.
>
> 4 tabs are setup displaying forms to aid in a mailing composition;
> "composition", "template", "message", and "preview". The content of
> these tabs is pulled via an ajax request ({remote: true}).
>
> The content of each tab contains a continue button ../>, which submits the form, and if VALID, takes them to the next tab.
> e.g. "composition" -> "template", or "message" -> "preview".
>
> This is trivial -- I submit form using the Forms plugin, in the
> onSuccess callback decipher if the form was valid (server side
> validation) and use $.triggerTab to trigger the next tab.
>
> The complexity: In addition to the continue button, I would like the
> form to be submitted upon clicking another tab. Users are bound to fill
> in form data and click the next tab (w/o clicking "continue") and expect
> the data to be "there".
>
> I realize I can use an onClick event to submit the form -- however I can
> not stop the clicked tab from becoming active. I have tried returning
> false, etc.
>
> So; If a user clicks a tab, the content's form should be submitted, and
> IF VALID, activate the clicked tab.
>
> In an attempted workaround I tried disabling all tabs, and assigning
> custom events to trigger them (yes, somewhat redundant). This didn't
> seem to play well with {remote:true}.. I noticed
>
> $('#mailing').enableTab(1).triggerTab(1); does not work, for instance.
Brice, I think something else went wrong there. On a simple test page
that works fine for me:
http://stilbuero.de/jquery/tabs/test.html
Maybe you can show some more code here...
> I think the easiest/less ugly way to go about this is to intercept
> (cancel) the onClick event if it returns false. This way I could submit
> the form in the onClick and return false. When the form response comes
> back, I can then either trigger the tab, or alert the error message.
>
> Does this make any sense?
I'm not overall sure. Would that be expected behavior? Implementation
wouldn't be to difficult, so I could do that, but maybe we can work out
a solution with the existing code...
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Klaus Hartl wrote:
> That would be done like:
>
> $('#container>ul>li>a:eq(2)').click(function() {
> if (formIsValid()) {
> $('#container-1').enableTab(2).triggerTab(2);
> }
> return false;
> });
>
> Well, not exactly. The problem is that you're submittig a form, and that
> is going to be asynchronous I assume... That's totally not supported for
> onClick, because I just cannot stop execution of the rest of the script
> while waiting for the response of the form submit.
>
You're right that wouldn't work.. that's why I would like to cancel tab
activation if onClick returns false. This way I can do;
$(container).tabs({remote: true, onClick: submitForm});
var clickedTab = false;
function submitForm(tab, content, oldContent) {
// pseudo code...
clickedTab = index_of_tab;
$(form,oldContent).submit();
// NOTE; the forms plugin is attached to the form, and
asynchronously submits it. Upon form return, successCallback is called.
// cancel tab activation -- *KEY* behavior
return false;
}
function successCallback() {
if(form passed server side validation)
$(container).triggerTab(clickedTab);
else
... (form did not pass server side validation)
}
~ Brice
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice Burgess schrieb:
> Klaus Hartl wrote:
>>> $('#mailing').enableTab(1).triggerTab(1); does not work, for instance.
>>>
>> Brice, I think something else went wrong there. On a simple test page
>> that works fine for me:
>> http://stilbuero.de/jquery/tabs/test.html
>>
>> Maybe you can show some more code here...
>>
> Klaus, did you try it w/ remote: true; && disabled tabs? Something like;
>
>
>
> href="mailing/composition.php">{t}Composition{/t}
> href="mailing/template.php">{t}Template{/t}
> href="mailing/message.php">{t}Message{/t}
> href="mailing/preview.php">{t}Preview{/t}
>
>
>
>
>
> $().ready(function(){
> $('#mailing').tabs({remote: true}});
> $('#mailing').enableTab(1).triggerTab(1);
> });
>
The second example on the test page is done with remote: true. However I
disabled the tabs like:
$('#container-9').tabs({remote: true, disabled: [2, 3]});
> (( remember, I need to submit a form on tab click, and only activate the
> clicked tab IF the form returns valid (server side validation ))
That would be done like:
$('#container>ul>li>a:eq(2)').click(function() {
if (formIsValid()) {
$('#container-1').enableTab(2).triggerTab(2);
}
return false;
});
Well, not exactly. The problem is that you're submittig a form, and that
is going to be asynchronous I assume... That's totally not supported for
onClick, because I just cannot stop execution of the rest of the script
while waiting for the response of the form submit.
>>> I think the easiest/less ugly way to go about this is to intercept
>>> (cancel) the onClick event if it returns false. This way I could submit
>>> the form in the onClick and return false. When the form response comes
>>> back, I can then either trigger the tab, or alert the error message.
>>>
>>> Does this make any sense?
>>>
>> I'm not overall sure. Would that be expected behavior? Implementation
>> wouldn't be to difficult, so I could do that, but maybe we can work out
>> a solution with the existing code...
>>
> The behavior does not seem obscure to me, and seems to offer more
> function than none at all -- in fact, it follows the flow of the general
> event system. Like I said, I could not come up with a more elegant
> solution... although look forward to any of your suggestions.
You are making a good point here, "more function than none at all". But
even if I implement that, it would be useless for you, for the reason I
described above. Or are you making synchronous requests?
A solution to your problem would be to call
$('#container-1').enableTab(2).triggerTab(2);
in the callback of the Ajax request, depending on what is returned, as
far as I understand.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Klaus Hartl wrote:
>> $('#mailing').enableTab(1).triggerTab(1); does not work, for instance.
>>
>
> Brice, I think something else went wrong there. On a simple test page
> that works fine for me:
> http://stilbuero.de/jquery/tabs/test.html
>
> Maybe you can show some more code here...
>
Klaus, did you try it w/ remote: true; && disabled tabs? Something like;
{t}Composition{/t}
{t}Template{/t}
{t}Message{/t}
{t}Preview{/t}
$().ready(function(){
$('#mailing').tabs({remote: true}});
$('#mailing').enableTab(1).triggerTab(1);
});
(( remember, I need to submit a form on tab click, and only activate the
clicked tab IF the form returns valid (server side validation ))
>> I think the easiest/less ugly way to go about this is to intercept
>> (cancel) the onClick event if it returns false. This way I could submit
>> the form in the onClick and return false. When the form response comes
>> back, I can then either trigger the tab, or alert the error message.
>>
>> Does this make any sense?
>>
>
> I'm not overall sure. Would that be expected behavior? Implementation
> wouldn't be to difficult, so I could do that, but maybe we can work out
> a solution with the existing code...
>
The behavior does not seem obscure to me, and seems to offer more
function than none at all -- in fact, it follows the flow of the general
event system. Like I said, I could not come up with a more elegant
solution... although look forward to any of your suggestions.
~ Brice
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice,
It makes sense to me. You're trying to construct a sort of "wizard"-based
interface, but want a catch if that people jump ahead or behind the current
page using tabs -- you want to validate data before letting them view that
new tab.
This might also be an issue for me soon as I redo a very old ASP intranet
app, so I'd like to keep apprised of any resolution.
SEAN O
Brice Burgess wrote:
>
> I've finally got around to using the tabs plugin && am loving it! :) In
> due time, I of course came across a complexity that I'm having a hard
> time elegantly solving.
>
> 4 tabs are setup displaying forms to aid in a mailing composition;
> "composition", "template", "message", and "preview". The content of
> these tabs is pulled via an ajax request ({remote: true}).
>
> The content of each tab contains a continue button ../>, which submits the form, and if VALID, takes them to the next tab.
> e.g. "composition" -> "template", or "message" -> "preview".
>
> This is trivial -- I submit form using the Forms plugin, in the
> onSuccess callback decipher if the form was valid (server side
> validation) and use $.triggerTab to trigger the next tab.
>
> The complexity: In addition to the continue button, I would like the
> form to be submitted upon clicking another tab. Users are bound to fill
> in form data and click the next tab (w/o clicking "continue") and expect
> the data to be "there".
>
> I realize I can use an onClick event to submit the form -- however I can
> not stop the clicked tab from becoming active. I have tried returning
> false, etc.
>
> So; If a user clicks a tab, the content's form should be submitted, and
> IF VALID, activate the clicked tab.
>
> In an attempted workaround I tried disabling all tabs, and assigning
> custom events to trigger them (yes, somewhat redundant). This didn't
> seem to play well with {remote:true}.. I noticed
>
> $('#mailing').enableTab(1).triggerTab(1); does not work, for instance.
>
> I think the easiest/less ugly way to go about this is to intercept
> (cancel) the onClick event if it returns false. This way I could submit
> the form in the onClick and return false. When the form response comes
> back, I can then either trigger the tab, or alert the error message.
>
> Does this make any sense?
>
> ~ Brice
>
>
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/TABS-plugin%3A-ajax-tabs%2C-%24.triggerTab%2C-and-intercepting-clickstf3291866.html#a9166723
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
Brice Burgess schrieb:
> I've finally got around to using the tabs plugin && am loving it! :) In
> due time, I of course came across a complexity that I'm having a hard
> time elegantly solving.
>
> 4 tabs are setup displaying forms to aid in a mailing composition;
> "composition", "template", "message", and "preview". The content of
> these tabs is pulled via an ajax request ({remote: true}).
>
> The content of each tab contains a continue button ../>, which submits the form, and if VALID, takes them to the next tab.
> e.g. "composition" -> "template", or "message" -> "preview".
>
> This is trivial -- I submit form using the Forms plugin, in the
> onSuccess callback decipher if the form was valid (server side
> validation) and use $.triggerTab to trigger the next tab.
>
> The complexity: In addition to the continue button, I would like the
> form to be submitted upon clicking another tab. Users are bound to fill
> in form data and click the next tab (w/o clicking "continue") and expect
> the data to be "there".
>
> I realize I can use an onClick event to submit the form -- however I can
> not stop the clicked tab from becoming active. I have tried returning
> false, etc.
>
> So; If a user clicks a tab, the content's form should be submitted, and
> IF VALID, activate the clicked tab.
>
> In an attempted workaround I tried disabling all tabs, and assigning
> custom events to trigger them (yes, somewhat redundant). This didn't
> seem to play well with {remote:true}.. I noticed
>
> $('#mailing').enableTab(1).triggerTab(1); does not work, for instance.
Brice, I think something else went wrong there. On a simple test page
that works fine for me:
http://stilbuero.de/jquery/tabs/test.html
Maybe you can show some more code here...
> I think the easiest/less ugly way to go about this is to intercept
> (cancel) the onClick event if it returns false. This way I could submit
> the form in the onClick and return false. When the form response comes
> back, I can then either trigger the tab, or alert the error message.
>
> Does this make any sense?
I'm not overall sure. Would that be expected behavior? Implementation
wouldn't be to difficult, so I could do that, but maybe we can work out
a solution with the existing code...
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] TABS plugin: ajax tabs, $.triggerTab, and intercepting clicks ??
I've finally got around to using the tabs plugin && am loving it! :) In
due time, I of course came across a complexity that I'm having a hard
time elegantly solving.
4 tabs are setup displaying forms to aid in a mailing composition;
"composition", "template", "message", and "preview". The content of
these tabs is pulled via an ajax request ({remote: true}).
The content of each tab contains a continue button , which submits the form, and if VALID, takes them to the next tab.
e.g. "composition" -> "template", or "message" -> "preview".
This is trivial -- I submit form using the Forms plugin, in the
onSuccess callback decipher if the form was valid (server side
validation) and use $.triggerTab to trigger the next tab.
The complexity: In addition to the continue button, I would like the
form to be submitted upon clicking another tab. Users are bound to fill
in form data and click the next tab (w/o clicking "continue") and expect
the data to be "there".
I realize I can use an onClick event to submit the form -- however I can
not stop the clicked tab from becoming active. I have tried returning
false, etc.
So; If a user clicks a tab, the content's form should be submitted, and
IF VALID, activate the clicked tab.
In an attempted workaround I tried disabling all tabs, and assigning
custom events to trigger them (yes, somewhat redundant). This didn't
seem to play well with {remote:true}.. I noticed
$('#mailing').enableTab(1).triggerTab(1); does not work, for instance.
I think the easiest/less ugly way to go about this is to intercept
(cancel) the onClick event if it returns false. This way I could submit
the form in the onClick and return false. When the form response comes
back, I can then either trigger the tab, or alert the error message.
Does this make any sense?
~ Brice
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
