How to execute a javascript function before update panel updates

Question

I'd like to run a jQuery function BEFORE an update panel is fired for refreshing. As this refresh can be done with any of many buttons and other ways, I was hoping to use the submit handler or something like that, but it did not work.

I tried this to attach the event to the main form:

jQuery('form').submit(function () { alert('submit!'); });

and also this to attach to the update panel

jQuery('#pnlContent').submit(function () { alert('submit!'); });

Anyone knows how to do this?

The UpdatePanel form isn't "submitted" in the normal sense. It is "submitted" via ajax so those event will not fire. — Chad
– Chad, Commented Feb 12, 2013 at 14:22

mason · Accepted Answer · 2015-08-27 12:58:55Z

6

This worked for me. Got the idea here. Basically, you define a function to run before the update, and a function to run afterwards. Then you register those functions to run with the page request manager.

<script type="text/javascript">
    /* Put your code to run before UpdatePanel begins async postback here */
    function beforeAsyncPostBack() {
        var curtime = new Date();
        alert('Time before PostBack:   ' + curtime);           
    }

    /* Put your code to run after UpdatePanel finishes async postback here */
    function afterAsyncPostBack() {
        var curtime = new Date();           
        alert('Time after PostBack:    ' + curtime);
    }

    /* Don't mess with any of the below code */
    Sys.Application.add_init(appl_init);

    function appl_init() {
        var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
        pgRegMgr.add_beginRequest(beforeAsyncPostBack);
        pgRegMgr.add_endRequest(afterAsyncPostBack);
    }      
</script>

edited Aug 27, 2015 at 12:58

answered Aug 26, 2015 at 19:50

mason

32.8k12 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Psddp Over a year ago

It seems the event is not triggered for AutoPostBack, is there another event for that?

mason Over a year ago

@Psddp It should be. But if you're dealing with UpdatePanel and having to hack around like this, then I highly suggest you rethink your entire strategy and ditch the UpdatePanel. You'll spend far less time rewriting it than you will fixing all the UpdatePanel and Web Forms nonsense.

Devang Rathod · Accepted Answer · 2013-02-12 14:33:01Z

0

You can use onsubmit="return check();" in form. it will check this function before submit form like this.

function check(){
   // do javascript code
   // after check your javascript
   document.getElementById("frm1").submit();
}

HTML :

<form id="frm1" action="#" onsubmit="return check();">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" name="submit" value="Submit form">
</form>

answered Feb 12, 2013 at 14:33

Devang Rathod

6,7342 gold badges25 silver badges32 bronze badges

Comments

Dis Shishkov · Accepted Answer · 2013-02-12 14:58:35Z

0

function PageLoad()
{
    if (!window.Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
    {
        window.Sys.WebForms.PageRequestManager.getInstance().add_endRequest( AjaxEnd );
        window.Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest( AjaxBegin );
    }
}

function AjaxEnd()
{
    alert("AjaxEnd");
}

function AjaxBegin()
{
    alert("AjaxBegin");
}

answered Feb 12, 2013 at 14:58

Dis Shishkov

6567 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to execute a javascript function before update panel updates

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related