CODEWITHSUNDEEP
c#javascriptasp.net
Martin
Martin

Reputation: 1956

Run Javascript when Asp.net page is loading

I wonder if there is way to run JS code whenever a asp.net page is contacting the server. I.e. I'm looking for a general event handler that is triggered whenever a call to the server is made for runat="server" components.

I know there's a way to get jQuery.ajax() to run JS code before and after a call to the server is made, but I'm not sure how to do it in asp.net. Especially, since this projects uses a lot of custom components.

The goal here is to show some kind of loading image when a button is clicked, to prevent the user to click a button twice and also to show the user that the system is working.

If the click causes the page or an updatepanel to refresh, I'd only like to display the loading image before the refresh, eg. User clicks, "loading" is shown, page/update panel is refreshed (causing the "loading" to disappear), the new page/content is displayed as normal.

Update 1: I can't use UpdateProgress because some of the buttons aren't inside UpdatePanels. What I really want to do is to fire a JS as soon as any button/control that will contact the server is clicked. I.e. if the user clicks a dropdown which doesn't contact the server, nothing should happend. But if that dropdown has any connection to the server, a JS should be run.

I understand that this is ASP.NET Ajax and not jQuery Ajax, I only used jQuery as an example. Because I've used a jQuery method before (with jQuery Ajax) to trigger JS before the server call was made. Eg. to lock the element that was clicked or to display a "Loading..." screen.

I could of course add a bit of a JS hack to every page which adds a "onclick" event to every button manually, but I thought it would be better if there was a general solution for this (since I've got lots of pages, each with a few buttons that contact the server on them).

Update 2: When I think about it, it doesn't necessarily need to be a JS that is triggered. It would be good enough if the page somehow only made sure that the same button wasn't clicked twice. Either by disabeling the button or by adding something in front of it (like a "Loading..." screen).

Upvotes: 0

Views: 533

Answers (2)

Esteban
Esteban

Reputation: 3139

Here is how you can do it using jquery:

$(function() {
    $('a[href]').on('click', function(e) {
        var self = this;
        e.preventDefault();
        loadAsync($(self).attr('href'));
    });
});

function loadAsync(url) {
    $('div#result').fadeOut(200, function() {
        $('div#loader').fadeIn(200, function() {
            $.get(url, function(data) {
                $('div#result').html($(data));                    
            }).done(function() {
                console.log('done');
            }).fail(function() {
                $('div#result').html('Error');
            }).always(function() {
                $('div#loader').fadeOut(200, function() {
                    $('div#result').fadeIn(200);
                });
            });
        });
    });
}

Upvotes: 0

Coding Flow
Coding Flow

Reputation: 21881

You can use an UpdateProgress for this to use with update panels, but if you are doing a full page postback (i.e. not ajax) the only loading animation you can have is the browsers own.

UpdateProgress:

 <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
       Shiny loading aninmation
    </ProgressTemplate>
  </asp:UpdateProgress?

Upvotes: 1

Related Questions