Execute javascript after a partial postback of an updatepanel?

Question

I have a page that add tree file script to it .

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

I have a updatepanel with a dropdownlist. When run SelectedIndexChanged event (partial postback of an updatepanel), don't execute javascript .

Here is how you do it: http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker/3341741#3341741 — Aristos, Dec 26 '12 at 09:46

score 35 · Accepted Answer · edited Jan 31 '20 at 06:31

35

Use the pageLoad function:

function pageLoad(sender, args) {
  InitialiseSettings();
}

function InitialiseSettings(){
    // replace your DOM Loaded settings here. 
    // If you already have document.ready event, 
    // just take the function part and replace here. 
    // Not with document.ready 
    $(element).slideUp(1000, method, callback});

    $(element).slideUp({
                   duration: 1000, 
                   easing: method, 
                   complete: callback});
}

Or, try adding an "end request" event handler with .add_endRequest():

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InitialiseSettings)

Edit:

It would be a better idea for you to move your code from document.ready into InitialiseSettings(), and to then register it as a pageLoaded event handler.

Code Example

 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitialiseSettings)

edited Jan 31 '20 at 06:31

Cloud

938
1
8
24

answered Dec 26 '12 at 09:46

Murali Murugesan

22,423
17
73
120

Thanks a lot, but to initialization easing in InitialiseSettings . – Niloo Dec 26 '12 at 09:48
1

Thanks, I should use this: `$(document).ready(function () {Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InitialiseSettings) function InitialiseSettings() { //easing, other initialization goes here } }) ` – Niloo Dec 26 '12 at 10:00
@Niloo, No man no. Please share more code. Do you have document.ready block in your page? Where do you configure those easing and all. – Murali Murugesan Dec 26 '12 at 10:13
I add my function with document.ready, it is work for me ... Thanks a lot :) – Niloo Dec 27 '12 at 06:08
Is this compatible on all browsers? – Pierre Apr 15 '14 at 13:43
1

@Pierre, yes it is compatible – Murali Murugesan Apr 15 '14 at 13:45
Thanks for this, I'll stick with the add_endRequest as using the add_pageLoaded event makes the ScriptResource.axd throw the following error: Uncaught Sys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null. Parameter name: panelsCreated[1] – army Jul 30 '14 at 09:52

Avishek · Answer 2 · 2012-12-27T07:03:40.707

24

To run your javascript in full and partial postbacks, put your javascript code into javascript pageLoad() function.

function pageLoad()
{
   //your javascript code
}

Example:

function pageLoad() {

    $(':submit').click(function () {
        CommodityArray();
    });
    $('#btn_image').click(function () {
       CommodityArray();
    });
    $(".repHeader").disableSelection();

    CommodityArray();
}

Hope it helps! :)

edited Dec 27 '12 at 07:03

answered Dec 26 '12 at 09:55

Avishek

1,896
14
33

@Aristos :: Do you mean that, this does not work with update panel? Have you tried it yourself?? – Avishek Dec 26 '12 at 10:43
@Niloo:: write your code within pageLoad(){ // } instead of $(document).ready(function () { // } to run it every-time the Page reloads or postbacks. – Avishek Dec 26 '12 at 10:47
+1 Ok, its works for net 4+ http://msdn.microsoft.com/en-us/library/bb386417(v=vs.100).aspx – Aristos Dec 26 '12 at 11:38
@Avishek : Thanks, I have 3 script file. how do add this to pageload() – Niloo Dec 26 '12 at 15:57
@Niloo : You dont have to re-add the script files after each partial/full postback. You just have to call the functions you need to run after each postback / write events inside pageLoad(){ // } in the js files. I will also edit the answer with an example.. :) – Avishek Dec 27 '12 at 06:58

score 7 · Answer 3 · edited May 01 '14 at 06:00

You have to use following code after your update panel.

<script type="text/javascript" language="javascript">
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
pageRequestManager.add_endRequest(NewCharacterCount);
</script>

where NewCharacterCount is your javascript function name.

Read this article Sys.WebForms.PageRequestManager endRequest Event Hope it may help you.

score 1 · Answer 4 · edited Jun 29 '15 at 08:51

If you are using UpdatePanel and you want to call a javascript function after content refresh in update panel, you can use below way to do it easily. In Page body tag , call a function RefreshContent()

<body onload="RefreshContent()">

<script type="text/javascript">
  function RefreshContent()
  {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  }

  function EndRequestHandler()
  {
    alert("Add your logic here" );
  }
</script>

Reference link http://www.infoa2z.com/asp.net/how-to-call-javascript-function-after-an-updatepanel-asychronous-request-to-asp.net-page

score 1 · Answer 5 · answered Jun 26 '17 at 13:22

You can use PageRequestManager client events. The sender parameter will contain the information you need. For example one could do this:

// Register event handler
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

/// Executed when all page content is refreshed, full page or async postback: https://msdn.microsoft.com/en-us/library/bb397523.aspx
function pageLoaded(sender, args) {
    var isPostBack = sender.get_isInAsyncPostBack();
    if(!isPostBack) return;

    // PostBack logic here.
}

Execute javascript after a partial postback of an updatepanel?

5 Answers5

Linked