Loader is not working properly in knockoutjs

227
May 04, 2017, at 6:16 PM

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;
}

};

Rent Charter Buses Company
READ ALSO
Get top position of dynamic element with no events involved

Get top position of dynamic element with no events involved

Currently working on a project and got stuckHave a lazy loading implemented on UL element and want to get its relative/absolute top position on load/fetch new elements

264
Any card stack horizontal slider jQuery plugin ?

Any card stack horizontal slider jQuery plugin ?

I need a card stack horizontal slider jQuery plugin ? it should swipe right to left and left to right, card placing one above the previous, slide in loop, also should work on mobile devices it means finger swipe should be enabled

349
Parsley + Trying to validate Full-Width Text and Half-Width Text

Parsley + Trying to validate Full-Width Text and Half-Width Text

Parsley + Trying to validate Full-Width Text and Half-Width Text

300