Run javascript everytime page is loading

Question!

In my web application I have a modal popup containing a loading bar. I make this appear on any command that I know will take a few seconds to execute, button click etc.

This is currently working fine except for one complication, the in house web server it is running on is pretty crappy and depending on the number of users can slow down on simple tasks like navigating to a page.

How can I get the loading modal to appear every time a page is thinking about doing something without having to hard code it to every possible scenario?

My web application is using a master page that contains the modal code.

Thanks

Script

function ShowLoading() {
    $('#modalLoading').modal({ backdrop: 'static', keyboard: false, show: true });
}

function HideLoading() {
    $('#modalLoading').modal('hide');
}

ASPX

<div id="modalLoading" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <h2>
                    Please Wait...</h2>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

C# Class

public void loadingAlert()
{
    var page = HttpContext.Current.CurrentHandler as Page;
    page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "$(function () { ShowLoading(); });", true); 
}


Answers

FORM SUBMIT

You have to use Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "alert", "$(function () { ShowLoading(); });"); .

Put this in the 'Page Init' or 'Page Render' events in a base class or in your master page and make all your aspx pages extends this base class.

AJAX REQUEST

In this case you shoud attatch the jquery event ajaxSend in the document object. Put this in your master page:

$( document).ajaxSend(function() {
   ShowLoading();
});
By : anmarti


Set in your javascript a BeginRequestHandler and a EndRequestHandler like this:

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});

function BeginRequestHandler(sender, args) {
    var postBackId = args._postBackElement.id;

    // Here you can add some exceptions if you want
    if (postBackId != "control_exception_1" && postBackId != "control_exception_2") {
        ShowLoading();
    }
}

function EndRequestHandler(sender, args) {
    HideLoading();
}

Minimal ASP.NET controls: a form runat server, a ScriptManager and an UpdatePanel. You can choose to set the UpdateMode of the UpdatePanel to Conditional (set the id of your controls triggering the UpdatePanel in Triggers) or Always (you can remove the Triggers element).

<form id="form" runat="server">
    <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="updatePanel" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <%-- Your elements --%>
            <%-- Your buttons --%>
        </ContentTemplate>
        <Triggers>
            <asp:PostBackTrigger ControlID="btn_id" />
        </Triggers>
    </asp:UpdatePanel>
</form>
By : krlzlx


This video can help you solving your question :)
By: admin