加载程序在淘汰赛中无法正常工作

Question

I have a menu bar in html page. When i click on any menu option loader is showing until web user control loads. But problem is loader stops when user control load with initial html but that user control has some dynamic data which takes time to load so no loader is coming. I wanted the loader to continue showing until user control loads completely. Following is my knockout js code

function ClientAdminTabViewModel() {
    var that = this,
        view = {};

    this.loading = ko.observable(false);

    this.tabs = [
        {
            dataUrl: null,
            isSelected: ko.observable(false),
            name: "residents",
            onOpen: function (e, tabData) {
                new ResPortal.Admin.ClientAdmin();
            },
            title: "Residents",
            url: "Default.aspx/ClientAdminTab"
        },
        {
            dataUrl: null,  // TODO
            isSelected: ko.observable(false),
            name: "reports",
            onOpen: function (e, tabData) {
                that.openTab(that.tabs[1].subMenus[0]);
            },
            subMenus: [
                {
                    dataUrl: null,
                    name: "userDetail",
                    onOpen: function () {
                        new ResPortal.Admin.ClientAdminUserDetailReport();
                    },
                    title: "User Detail",
                    url: "/Admin/Default.aspx/ClientAdminUserDetailReportTab",  // Tab
                    visible: ko.observable(true)
                },
                {
                    dataUrl: null,  // TODO
                    name: "residentStatus",
                    onOpen: function () {
                        new ResPortal.Admin.ClientAdminResidentStatusReport();
                    },
                    title: "Resident Status",
                    url: "/Admin/Default.aspx/ClientAdminResidentStatusReportTab",  // Tab
                    visible: ko.observable(true)
                }
            ],
            title: "Reports",
            url: "Default.aspx/ClientAdminUserDetailReportTab"  // TODO
        }
    ];

    this.currentTab = ko.computed(function () {
        var result = _(that.tabs).find(function (tab) {
            return tab.isSelected();
        });

        return result;
    });

    this.formatTabs = function (elements, data) {
        var $ul = $(elements).filter("li").parent();

        if ($ul.children("li").length < that.tabs.length) {
            return;
        }

        $ul.htmlClean();
    };

    this.openTab = function (tab, data) {
        var $mainPanel = $("#MainPanel"),
            isSubMenu,
            render;

        if (!tab) {
            window.location.hash = "";

            return;
        }

        isSubMenu = (tab.isSelected === undefined);

        render = function (html) {
            $mainPanel.html(html);

            if (tab.onOpen) {
                tab.onOpen($.event, data);
            }
        };

        if (!isSubMenu && tab.isSelected()) {
            return;
        }

        if (!isSubMenu) {
            that.selectTab(tab);
        }

        if (tab.url === "") {
            return;
        }

        $mainPanel.html("");

        if (view[tab.name]) {
            render(view[tab.name]);
        } else {
            that.loading(true);

            $.ajax({
                type: "POST",
                url: tab.url,
                data: JSON.stringify({
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }).fail(function (data) {
                ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
            }).done(function (data) {
                // Cache the tab's HTML
                view[tab.name] = data.d;

                render(data.d);

                that.loading(false);
            });
        }

        location.hash = tab.name;
    };

    this.selectTab = function (tab) {
        var tb = _(that.tabs).find(function (t) {
            return t === tab;
        });

        if (tb) {
            tb.isSelected(true);

            _(that.tabs).each(function (t) {
                if (t !== tab) {
                    t.isSelected(false);
                }
            });
        } else {
            window.location = window.location;
        }
    };
};

function MaAdminTabViewModel() {
    var that = this,
        view = {};

    this.loading = ko.observable(false);

    this.tabs = [
        {
            dataUrl: null,
            isSelected: ko.observable(false),
            name: "clientadmins",
            onOpen: function (e, tabData) {
                new ResPortal.Admin.MaAdmin();
            },
            title: "Client Admins",
            url: "MaAdminTab.html"
        },
        {
            dataUrl: null,
            isSelected: ko.observable(false),
            name: "tools",
            onOpen: function (e, tabData) {
                new ResPortal.Admin.Tools();
            },
            subMenus: [
                {
                    dataUrl: null,
                    name: "TestEmail",
                    onOpen: function () {
                        new ResPortal.Admin.Tools();
                    },
                    title: "Test Email",
                    url: "ToolsTab.html",
                    visible: ko.observable(true)
                }
            ],
            title: "Tools",
            url: "ToolsTab.html"
        }
    ];

    this.currentTab = ko.computed(function () {
        var result = _(that.tabs).find(function (tab) {
            return tab.isSelected();
        });

        return result;
    });

    this.formatTabs = function (elements, data) {
        var $ul = $(elements).filter("li").parent();

        if ($ul.children("li").length < that.tabs.length) {
            return;
        }

        $ul.htmlClean();
    };

    this.openTab = function (tab, data) {
        var $mainPanel = $("#MainPanel"),
            isSubMenu,
            render;

        if (!tab) {
            window.location.hash = "";

            return;
        }

        isSubMenu = (tab.isSelected === undefined);

        render = function (html) {
            $mainPanel.html(html);

            if (tab.onOpen) {
                tab.onOpen($.event, data);
            }
        };

        if (!isSubMenu && tab.isSelected()) {
            return;
        }

        if (!isSubMenu) {
            that.selectTab(tab);
        }

        if (tab.url === "") {
            return;
        }

        $mainPanel.html("");

        if (view[tab.name]) {
            render(view[tab.name]);
        } else {
            that.loading(true);

            if (tab.url.indexOf(".html") === -1) {
                $.ajax({
                    type: "POST",
                    url: tab.url,
                    data: JSON.stringify({
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).fail(function (data) {

                    ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                }).done(function (data) {
                    // Cache the tab's HTML
                    view[tab.name] = data.d;

                    render(data.d);

                    that.loading(false);
                });
            } else {
                $.get(tab.url, function (html) {
                    view[tab.name] = html;

                    render(html);
                }).fail(function (d) {
                    ResPortal.Helpers.notify("Server error", "error");
                }).always(function () {
                    that.loading(false);
                });
            }
        }

        location.hash = tab.name;
    };

    this.selectTab = function (tab) {
        var tb = _(that.tabs).find(function (t) {
            return t === tab;
        });

        if (tb) {
            tb.isSelected(true);

            _(that.tabs).each(function (t) {
                if (t !== tab) {
                    t.isSelected(false);
                }
            });
        } else {
            window.location = window.location;
        }
    };
};

function ResidentTabViewModel() {
    var that = this,
        view = {};

    this.loading = ko.observable(false);

    this.tabs = tabs = [
        {
            dataUrl: null,
            isSelected: ko.observable(true),
            name: "landing",
            onOpen: $.noop,
            title: "Home",
            url: "/Home/Default.aspx/LandingTab"  // TODO
        },
        {
            dataUrl: "/Home/Default.aspx/Account",  // TODO
            isDefault: true,
            isSelected: ko.observable(false),
            name: "account",
            onOpen: function (e, tabData) {
                $.ajax({
                    type: "POST",
                    url: "/Home/Default.aspx/Account",  // TODO
                    data: JSON.stringify({}),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).fail(function (data) {
                    ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                }).done(function (data) {
                    var myAccountVm = new ResPortal.Home.MyAcountViewModel(data.d);

                    if ($("#GetStatementForm").length) {
                        ko.applyBindings(myAccountVm, document.getElementById("GetStatementForm"));
                        ko.applyBindings(myAccountVm, document.getElementById("EditEbillingInfoForm"));
                    }

                    if (tabData && tabData.split && tabData.split("/")[0].toLowerCase() === "statement") {  // tabData.split tests that this event wasn't triggered by a tab change to the My Account tab
                        myAccountVm
                            .currBillId(tabData.split("/").slice(1).join("/"))
                            .viewBill();
                    }
                });
            },
            subMenus: [
                {
                    dataUrl: "/Home/Default.aspx/Account",  // TODO
                    name: "account",
                    onOpen: function () {
                        var acctTab = _.find(that.tabs, function (t) {
                            return t.name === "account";
                        });

                        acctTab.onOpen();
                    },
                    title: "My Account",
                    url: "/Home/Default.aspx/AccountTab",  // Tab
                    visible: ko.observable(true)
                },
                {
                    dataUrl: "/Home/Default.aspx/ManageAccount",
                    name: "manage",
                    onOpen: function () {
                        $.ajax({
                            type: "POST",
                            url: "/Home/Default.aspx/ManageAccount",
                            data: JSON.stringify({}),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        }).fail(function (data) {
                            ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                        }).done(function (data) {
                            var bankAccountVm = new ResPortal.Home.BankAccountViewModel(data.d),
                                creditCardAccountVm = new ResPortal.Home.CreditCardAccountViewModel(data.d),
                                residentSummaryVm = new ResPortal.Home.ResidentSummaryViewModel(bankAccountVm, creditCardAccountVm, tabVm, data.d.Data.CurrentBalance, data.d.Data.CurrentLedgerBalance, data.d.Data.HasStopPayment);

                            ko.applyBindings(bankAccountVm, document.getElementById("EditBankAccountForm"));
                            ko.applyBindings(creditCardAccountVm, document.getElementById("EditCreditCardAccountForm"));
                            ko.applyBindings(residentSummaryVm, document.getElementById("middle"));
                        });
                    },
                    title: "Manage Account",
                    url: "/Home/Default.aspx/ManageAccountTab",  // TODO
                    visible: ko.observable(isFundTechProp)
                },
                {
                    dataUrl: "/Home/Default.aspx/MakePayment",  // TODO
                    name: "pay",
                    onOpen: function () {
                        $.ajax({
                            type: "POST",
                            url: "/Home/Default.aspx/MakePayment",  // TODO
                            data: JSON.stringify({
                            }),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        }).fail(function (data) {
                            ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                        }).done(function (data) {
                            var autoPayVm = new ResPortal.Home.AutoPayViewModel(data.d),
                                makePaymentVm = new ResPortal.Home.MakePaymentViewModel(data.d),
                                payNearMeVm = new ResPortal.Home.PayNearMeViewModel(data.d);

                            ko.applyBindings(makePaymentVm, document.getElementById("OneTimePaymentPanel"));
                            ko.applyBindings(payNearMeVm, document.getElementById("PnmPaymentPanel"));
                            ko.applyBindings(autoPayVm, document.getElementById("AutoPayPanel"));
                        });
                    },
                    title: "Make a Payment",
                    url: "/Home/Default.aspx/MakePaymentTab",  // TODO
                    visible: ko.observable(true)
                },
                {
                    dataUrl: "/Home/Default.aspx/PaymentHistory",  // TODO
                    name: "payments",
                    onOpen: $.noop,
                    title: "Payment History",
                    url: "/Home/Default.aspx/PaymentHistoryTab",  // TODO
                    visible: ko.observable(true)
                }
            ],
            title: "My Account",
            url: "/Home/Default.aspx/AccountTab"  // TODO
        },
        {
            dataUrl: "/Home/Default.aspx/Personal",  // TODO
            isSelected: ko.observable(false),
            name: "personal",
            onOpen: function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/Default.aspx/Personal",  // TODO
                    data: JSON.stringify({
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).fail(function (data) {
                    ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                }).done(function (data) {
                    var loginVm = new ResPortal.Home.LoginViewModel(data.d),
                        emailVm = new ResPortal.Home.EmailViewModel(data.d),
                        passwordVm = new ResPortal.Home.PasswordViewModel(),
                        securityQuestionsVm = new ResPortal.Home.SecurityQuestionsViewModel(data.d);

                    ko.applyBindings(loginVm, document.getElementById("EditLoginForm"));
                    ko.applyBindings(loginVm, $("#top span.login").get()[0]);
                    ko.applyBindings(emailVm, document.getElementById("EditEmailForm"));
                    ko.applyBindings(emailVm, $("#top span.email").get()[0]);
                    ko.applyBindings(passwordVm, document.getElementById("EditPasswordForm"));
                    ko.applyBindings(securityQuestionsVm, document.getElementById("EditSecurityQuestionsContainer"));
                });
            },
            title: "Personal Information",
            url: "/Home/Default.aspx/PersonalTab"  // TODO
        }
    ];

    this.currentTab = ko.computed(function () {
        var result = _(that.tabs).find(function (tab) {
            return tab.isSelected();
        });

        return result;
    });

    this.formatTabs = function (elements, data) {
        var $ul = $(elements).filter("li").parent();

        if ($ul.children("li").length < that.tabs.length) {
            return;
        }

        $ul.htmlClean();
    };

    this.openTab = function (tab, data) {
        var $mainPanel = $("#MainPanel"),
            isSubMenu,
            render;

        if (!tab) {
            window.location.hash = "";

            return;
        }

        isSubMenu = (tab.isSelected === undefined);

        render = function (html) {
            $mainPanel.html(html);

            if (tab.onOpen) {
                tab.onOpen($.event, data);
            }
        };

        if (!isSubMenu && tab.isSelected()) {
            return;
        }

        if (!isSubMenu) {
            that.selectTab(tab);
        }

        if (tab.url === "") {
            return;
        }

        $mainPanel.html("");

        if (view[tab.name]) {
            render(view[tab.name]);
        } else {
            that.loading(true);

            $.ajax({
                type: "POST",
                url: tab.url,
                data: JSON.stringify({
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }).fail(function (data) {
                ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
            }).done(function (data) {
                // Cache the tab's HTML
                view[tab.name] = data.d;

                render(data.d);

                that.loading(false);
            });
        }

        location.hash = tab.name;
    };

    this.selectTab = function (tab) {
        var tb = _(that.tabs).find(function (t) {
            return t === tab;
        });

        if (tb) {
            tb.isSelected(true);

            _(that.tabs).each(function (t) {
                if (t !== tab) {
                    t.isSelected(false);
                }
            });
        } else {
            window.location = window.location;
        }
    };
};

switch (role) {
    case "clientadmin":
        tabVm = new ClientAdminTabViewModel();

        break;
    case "maadmin":
        tabVm = new MaAdminTabViewModel();

        break;
    case "resident":
        tabVm = new ResidentTabViewModel();

        break;
}

$logoutLink
    .text($logoutLink.text())
    .children("span")
    .remove()
    .end()
    .button();

ko.applyBindings(tabVm, document.getElementById("MenuPanel"));
ko.applyBindings(tabVm, document.getElementById("BusyText"));

switch (role) {
    case "clientadmin":
    case "maadmin":
        var defaultTab = tabVm.tabs[0];

        tabVm.openTab(defaultTab, "");

        break;
    case "resident":
        $.ajax({
            type: "POST",
            url: "/Home/Default.aspx/ManageAccount",
            data: JSON.stringify({
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).fail(function (data) {
            if (data.status === 401) {
                window.location = "/";  // TODO

                return;
            }

            ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
        }).done(function (data) {
            var bankAccountVm,
                creditCardAccountVm,
                residentSummaryVm ,
                defaultTab,
                defaultSubMenu,
                hashParts,
                hashTab;

            if (!data.d.Success) {
                return;
            }

            bankAccountVm = new ResPortal.Home.BankAccountViewModel(data.d);
            creditCardAccountVm = new ResPortal.Home.CreditCardAccountViewModel(data.d);
            residentSummaryVm = new ResPortal.Home.ResidentSummaryViewModel(bankAccountVm, creditCardAccountVm, tabVm, data.d.Data.CurrentBalance, data.d.Data.CurrentLedgerBalance, data.d.Data.HasStopPayment);

            ko.applyBindings(residentSummaryVm, document.getElementById("middle"));

            // Open to the requested statement
            // This routine could be expanded to something more robust when needed
            if (window.location.hash.length) {
                hashParts = window.location.hash.split("/");
                hashTab = hashTab = hashParts[0].slice(1).toLowerCase();

                _.each(tabVm.tabs, function (tab) {
                    if (tab.name === hashTab) {
                        defaultTab = tab;
                    }

                    if (!defaultTab && tab.subMenus) {
                        _.each(tab.subMenus, function (subMenu) {
                            if (subMenu.name === hashTab) {
                                defaultTab = tab;
                                defaultSubMenu = subMenu;
                            }
                        });
                    }
                });

                if (defaultSubMenu) {
                    tabVm.selectTab(defaultTab);

                    tabVm.openTab(defaultSubMenu, hashParts.slice(1).join("/"));
                } else {
                    tabVm.openTab(defaultTab, hashParts.slice(1).join("/"));
                }
            }
        });

        break;
}

};

Answer 1

Firstly you have to remove the expression that.loading(false); from its current position.

Secondly insert this expression into .always(...) callback for every .ajax subrequest performed by tab's onOpen handler:

onOpen: function () {
    $.ajax({
        // ...
    }).fail(function (data) {
        // ...
    }).done(function (data) {
        // ...
    }).always(function(){
        that.loading(false);
    });
},

Answer 2

You can simply use the methods provided by the javascript jquery

beforeSend: function(data){
    // you can put your loader here
  },
  success: function(data){
    // events after you data gets load completely
  }