CODEWITHSUNDEEP
asp.net
Jay
Jay

Reputation: 539

How to run a javascript function before postback of asp.net button

I have an asp.net button which is runat server, there is a function handle that postback of button onclick.

How can I display a "loading ..." word in the page before going to the server procedure?

Upvotes: 17

Views: 33526

Answers (3)

Dan Herbert
Dan Herbert

Reputation: 103417

You could use the onsubmit event of your page's form. This happens before the form is submitted, and will allow you to stop submission of the form if you need by cancel bubbling. In case you need this, the last 2 lines in this example will cancel bubbling across browsers.

<form runat="server" onsubmit="ShowLoading()">
</form>
<script type="text/javascript">
    function ShowLoading(e) {
        var div = document.createElement('div');
        var img = document.createElement('img'); 
        img.src = 'http://www.oppenheim.com.au/wp-content/uploads/2007/08/ajax-loader-1.gif'; 
        div.innerHTML = "Loading...<br />";
        div.style.cssText = 'position: fixed; top: 30%; left: 40%; z-index: 5000; width: 222px; text-align: center; background: #fff; border: 1px solid #000'; 
        div.appendChild(img);
        document.body.appendChild(div); 
        
        // These 2 lines cancel form submission, so only use if needed.
        window.event.cancelBubble = true;
        e.stopPropagation();
    }
</script>

The JavaScript above is just for example, however this is (in my opinion) the preferred way to do what you're looking for. It looks something like this (in the center of the screen):

Loading...

This will work for any element that raises a PostBack, so you don't have to manually call ShowLoading() on every button or form element you may have on your page. I would replace the contents of ShowLoading() with some real loading functionality and not just the example code I threw together.

Upvotes: 12

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

Hook up OnClientClick to some javascript function that returns true or false. The postback occurs if it returns true else it is canceled. 

  <asp:Button id="MyButton" runat="Server" Text="Close" 
                       OnClientClick="return  PromptClose();"/>


  <script type="text/javascript">
   function PromptClose(){
       return prompt("Do you really want to close this window?");
   }
  </script>

Upvotes: 25

blu
blu

Reputation: 13175

Look at OnClientClick, you can add a call to a js function, or inline JS there.

Or you can wire into the button with JQuery and display a modal dialog with an async callback.

Upvotes: 3

Related Questions