Embedded javascript does not work after async postback from UpdatePanel

Question

I have created a server control where I have embedded some JavaScript files. This works ok, but when the server control is put within an ajax UpdatePanel, it stops working after an async postback is triggered within the updatepanel.

Here is my code in the server control:

protected override void OnPreRender(EventArgs e)
{
  base.OnPreRender(e);

  ClientScriptManager clientScriptManager = Page.ClientScript;
  const string DATE_TIME_PICKER_JS = "JQueryControls.Scripts.DateTimePicker.js";

  clientScriptManager.RegisterClientScriptResource(typeof(DateTimePicker), DATE_TIME_PICKER_JS);

  if (Ajax.IsControlInsideUpdatePanel(this) && Ajax.IsInAsyncPostBack(Page))
  {
      Ajax.RegisterClientScriptResource(Page, typeof(DateTimePicker), DATE_TIME_PICKER_JS);
  }
}

Ajax is a class from this link.

Where this code is executed on the async postback:

public static void RegisterClientScriptResource(Page page, Type type, string resourceName) {
    object scriptManager = FindScriptManager(page);
    if (scriptManager != null) {
        System.Type smClass = GetScriptManagerType(scriptManager);
        if (smClass != null) {
            Object[] args = new Object[] { page, type, resourceName };
            smClass.InvokeMember("RegisterClientScriptResource",
                    System.Reflection.BindingFlags.Static |  System.Reflection.BindingFlags.Public |
                    System.Reflection.BindingFlags.InvokeMethod,
                    null, null, args);
        }
    }
}

Any ideas on how to get this to work within an UpdatePanel?

PCasagrande · Accepted Answer · 2011-11-14 15:28:23Z

4

UpdatePanels cause new elements to be placed in the page when they post back. It is no longer the same element so your bindings are not in place any longer. If you are using jQuery and are tying events together you can use their live API found here. Otherwise for things, such as datepickers, that fire once and fundamentally change the functionality of an item you need to fire some javascript once the new elements are loaded; all this requires is tying some javascript calls to a Microsoft provided call back function:

function BindEvents()
{
    //Here your jQuery function calls go
}

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(BindEvents);

Edit: Based on your comment I would make the DatePicker.js file like this:

$(document).ready(function () {
    // Call BindDatePicker so that the DatePicker is bound on initial page request
    BindDatePicker();

    // Add BindDatePicker to the PageRequestManager so that it
    // is called after each UpdatePanel load
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(BindDatePicker);
});

// We put the actual binding of the DatePicker to the input here
// so that we can call it multiple times. Other binds that need to happen to the
// elements inside the UpdatePanel can be put here as well.
var BindDatePicker = function() {
    $('.DatepickerInput').datepicker({
        showAnim: 'blind',
        autoSize: true,
        dateFormat: 'dd-mm-yy'
    });
};

edited Nov 14, 2011 at 15:28

answered Nov 11, 2011 at 13:31

PCasagrande

5,4123 gold badges29 silver badges36 bronze badges

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

4 Comments

user1041481 Over a year ago

Thank you for the feedback, but I am still not sure on how to set this up. FYI in addition to the DateTimePicker.js-file, I have also embedded jquery-1.6.3.min.js and jquery-ui-1.8.16.custom.min.js the same way. The content of my DateTimePicker.js file so far is: $(document).ready(function () { $('.DatepickerInput').datepicker({ showAnim: 'blind', autoSize: true, dateFormat: 'dd-mm-yy' }); }); Could you help me out with some more details?

PCasagrande Over a year ago

I edited the questions to give you the specific code I would use for that file.

user1041481 Over a year ago

Great, got it working now. Just had to change prm.add_endRequest(BindDatePicker()); to prm.add_endRequest(BindDatePicker);

PCasagrande Over a year ago

Ah, a typo. I have fixed it in the solution.

Collectives™ on Stack Overflow

Embedded javascript does not work after async postback from UpdatePanel

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related