CODEWITHSUNDEEP
jqueryasp.net
Carl R
Carl R

Reputation: 8214

Using javascript loading indicator with UpdatePanel/UpdateProgress?

Is is possible to combine for instance spin.js with an UpdatePanel?

The normal way is to put a gif in an UpdateProgress, but can it be done with a javascript driven spinner/loading indicator instead?

Upvotes: 0

Views: 3823

Answers (2)

zdrsh
zdrsh

Reputation: 1667

<script type="text/javascript">

    window.onload = function () {
        var opts = {
            lines: 14, // The number of lines to draw
            length: 7, // The length of each line
            width: 4, // The line thickness
            radius: 10, // The radius of the inner circle
            color: '#000', // #rgb or #rrggbb
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false // Whether to render a shadow
        };
        var target = document.getElementById('foo');
        var spinner = new Spinner(opts);
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(panelLoaded);

        prm.add_beginRequest(panelUpdateRequest);
        function panelLoaded(sender, args) {
            spinner.stop();
        }
        function panelUpdateRequest(sender, args) {                   
            spinner.spin(target);
        }              
    }           

</script>


<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div id="foo" style="font-size: large">
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Upvotes: 4

NakedBrunch
NakedBrunch

Reputation: 49413

Yes, you can.

Think of this problem in the following terms: you want to execute JavaScript before and after an asynchronous postback with an update panel. You have the spinner loaded on the page (but hidden). When you're ready to postback through the UpdatePanel, show the div that contains the spinner, and then when the UpdatePanel has completed, hide the div that contains the spinner.

See here for a full explanation (with code) of how to do this: Executing ClientScript Before and After an Asynchronous PostBack using ASP.NET AJAX

Upvotes: 1

Related Questions