Embedded Javascript fails to function following an async postback triggered by an UpdatePanel

Question

Embedded Javascript fails to function following an async postback triggered by an UpdatePanel

After embedding some JavaScript files in a server control, everything works fine. However, when the server control is placed within an ajax UpdatePanel, it ceases to function after an async postback triggered within the updatepanel.

This is the 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);
  }
}

The Ajax functionality can be found here.

This piece of code runs during 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);
        }
    }
}

Is there any solution to make this work inside an UpdatePanel?

javascript asp.net ajax updatepanel

Answer 1

Answer №1

When UpdatePanels trigger a post back, new elements are added to the page. These new elements are not the same as before, so your bindings will no longer be in place. If you're using jQuery and want to tie events together, you can utilize their live API which can be found here. For components like datepickers that only need to fire once and completely change how an item functions, you'll need to execute some JavaScript code after the new elements are loaded; this simply involves linking some JavaScript calls to a callback function provided by Microsoft:

function BindEvents()
{
    //Your jQuery function calls go here
}

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

Edit: Based on your comment, I suggest modifying the DatePicker.js file as follows:

$(document).ready(function () {
    // Call BindDatePicker to bind the DatePicker during initial page load
    BindDatePicker();

    // Add BindDatePicker to PageRequestManager so it's executed after each UpdatePanel load
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(BindDatePicker);
});

// The actual binding logic of the DatePicker to the input is placed here
// to allow for multiple calls. Any other bindings needed inside the UpdatePanel can also be included here.
var BindDatePicker = function() {
    $('.DatepickerInput').datepicker({
        showAnim: 'blind',
        autoSize: true,
        dateFormat: 'dd-mm-yy'
    });
};

Answer 2

When UpdatePanels trigger a post back, new elements are added to the page. These new elements are not the same as before, so your bindings will no longer be in place. If you're using jQuery and want to tie events together, you can utilize their live API which can be found here. For components like datepickers that only need to fire once and completely change how an item functions, you'll need to execute some JavaScript code after the new elements are loaded; this simply involves linking some JavaScript calls to a callback function provided by Microsoft:

function BindEvents()
{
    //Your jQuery function calls go here
}

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

Edit: Based on your comment, I suggest modifying the DatePicker.js file as follows:

$(document).ready(function () {
    // Call BindDatePicker to bind the DatePicker during initial page load
    BindDatePicker();

    // Add BindDatePicker to PageRequestManager so it's executed after each UpdatePanel load
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(BindDatePicker);
});

// The actual binding logic of the DatePicker to the input is placed here
// to allow for multiple calls. Any other bindings needed inside the UpdatePanel can also be included here.
var BindDatePicker = function() {
    $('.DatepickerInput').datepicker({
        showAnim: 'blind',
        autoSize: true,
        dateFormat: 'dd-mm-yy'
    });
};

Embedded Javascript fails to function following an async postback triggered by an UpdatePanel

Answer №1

Similar questions

Tips for accessing the HTML content enclosed within a specific HTML tag using Python with Selenium

Creating a Dynamic Input Validation Range with JQuery

How to enable CORS in Flask while avoiding the "Response to preflight request does not have an HTTP ok status" issue

I'm wondering, on a storybook, where is the best place to set my MUI X license key

Achieving Compatibility Between jQuery 3.6.0 and Node.js v12.16.1

Is React State with JSON Object Losing Updates?

Sophisticated method in JavaScript to conceal and reveal div elements

The browser freezes when attempting to upload an image using an ajax call

Exploring protractor and webdriver basics in the context of a non-angular application

Utilizing PHP Variables in Ajax Calls: Transferring Data between JS and PHP

Preserve Text Selection While Utilizing DIV as a Button

What could be causing my fetch() function to send a JSON body that is empty?

Guide on activating an event when a slider image is updated using jquery

Manipulate the label content of the last child using Javascript

"Enhancing user experience through file uploads using the onchange event

An unusual error occurred stating that the `forEach` property does not exist on the given type

"JQuery's selector is failing to locate elements once they have been loaded through an

AngularJS - encountering a 404 error when reloading the page after removing the Hashbang

Utilizing a switch to deactivate all currently active classes on individual div elements

How to launch a new window for a popup