CODEWITHSUNDEEP
javascriptasp.netajaxupdatepanel
user1041481
user1041481

Reputation: 75

Embedded javascript does not work after async postback from UpdatePanel

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?

Upvotes: 4

Views: 3583

Answers (1)

PCasagrande
PCasagrande

Reputation: 5412

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'
    });
};

Upvotes: 4

Related Questions