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 <input type="submit"
../>, 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/
