Skip to main content

Using JavaScript to update content in UpdatePanel

One of my recent pages needed to have a client side JavaScript function to select all items in a given multi select box. An event was wired to fire (to submit and update UpdatePanel) when one of these items were selected. This was working fine when selection was done by the end user using a mouse/keyboard. However, when I used a JavaScript function to select all items, the event was not firing. I had to fire it myself which basically meant that I had to submit the form (asynchronously).

Here is what I did in my JavaScript function that was selecting all the items in a given select box to submit the form to update the contents in UpdatePanel.

function SelectAll(objectId, submit) {
    if(objectId) {
       var str = '#' + objectId + ' *';
       $(str).attr('selected', 'selected');
    }
    if(submit) {
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm._doPostBack(objectId, '');
    }
}

This function receives two input parameters. The first parameter is the ClientID of the select box that needs all items selecting. The second parameter is an optional boolean parameter that flags the function to submit using PageRequestManager.

As you can see, I am using the PageRequestManager object to do a postback. I first get an instance of the object by calling getInstance method. Once that is done, I am just calling the _doPostBack function passing in the objectId for sender, and empty string for EventArgs. For this to work, the control whose id is objectId must be within the UpdatePanel.

Comments