Question

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 (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?

Answer 1

$.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