jQuery Tabs wizard with server side validation
I have created a Check Out wizard utilizing the jQuery UI Tabs in an Asp.Net MVC 3 website. Each tab in the wizard loads a partial view containing a form. If the form is valid, I post the form data and save it to the database.
Currently I am able to check the client-side validation and if the current tab is not valid, prevent the next/previous tab from being selected when the next or previous button is clicked using the method described here http://jqueryui.com/demos/tabs/#...prevent_switching_to_the_tab_on_click_depending_on_form_validation.
However, not all of the validation can be done client-side as we need to perform some server side checks. So if a tab passes the client-side validation, then I submit the form and check the response returned from the server. If server-side validation passes an empty string is returned, but if it fails I return the same partial view for that tab.
Here is the select function in my jQuery UI Tabs selector:
select: function (event, ui) {
var checkOutTabs = $(".checkout-tabs").tabs();
var currentTabIndex = checkOut.getSelectedTabIndex();
var currentTab = $(".checkout-step").get(currentTabIndex);
var isValid = checkOut.validateTab(currentTab, ui.index);
//prevent tab change
if (!isValid) {
return false;
}
var form = $(currentTab).find("form");
//Submit this tab
$.post(form.attr("action"), form.serialize(), function 开发者_如何学Go(data) {
if (!data) {
checkOutTabs.tabs("enable", ui.index + 1);
return true;
} else {
$(currentTab).find(".checkout-step").parent().html(data);
return false;
}
});
}
The problem I am having is that as soon as I call the jQuery $.post() method, the tabs switch to the next tab, regardless of wether I return true or false. I found a post ( Better Way to Build jQuery Tabs ) that is doing a smiliar implementation, but they didn't report having this issue. Am I doing something wrong, or is this the expected behavior?
$.post
returns immediately as it's asynchronous
maybe you have to block (using async = false in $.ajaxOptions or something) until response is get, then return what you want by changing a broader-scoped variable
精彩评论