Ajax, Update Panel, & the People Picker

Alot of people complain about issues with the People Picker when attempting to use an Ajax Update Panel with it because it just doesn’t work.  In my particular problem I have a drop down list that does some processing to add people to the people picker list. When the drop-down is set to auto post back and there is no ajax, the page will post back and the people picker will have the new users in it.

Everything works with the post back. However the new requirements by the customer was to add some ajax and elimnate this postback. So I added an update panel around the drop down list and people picker. This causes the people picker to stop working altogether. Online postings lead me to believe that the people picker has its own set or javascript which gets broken by Ajax.

What can I do to make this work? I came up with a method of still using the update panel to update a normal text box, then have some client side processing to move the people in to the people picker. Let me elaborate. This is not the complete plug-play solution.. just the details.    

 Process: 

  1. Page Loads
    1. Javascript registers ->EndRequestHandler
  2. Selected Index change on the drop down list
  3. Selected Index Change code Executes (this code not shown)
    1. Code generates user string in the format ‘DOMAIN\user1;DOMAIN\user2’. (These are definately good working accounts pre-checked by our code);  
  4. AJAX partial page update occurs
  5. EndRequestHandler Code Executes
    1. stores the value of the txtAutoAddUsers text box
    2. pops the value into people picker

ASPX – Code Behind .CS  

//txt box   txtAutoAddUsers = new TextBox();   

txtAutoAddUsers.ID = “txtAutoAddUsers”;   

//drop down   

ddlCategory = new DropDownList();   

ddlCategory.ID = “ddlCategory”;   

ddlCategory.AutoPostBack = true;   

ddlCategory.SelectedIndexChanged += new EventHandler(ddlCategory_SelectedIndexChanged);   

//people picker   

peAssignRep = new PeopleEditor();   

peAssignRep.ID = “peAssignRep”;   

peAssignRep.MultiSelect = true;   

//Update Panel   

UpdatePanel up = new UpdatePanel();  

// pnRender .. is my asp panel where I’m going to put the update panel  

// Add the txt box and the ddl to the update panel  

base.Controls.Add(new LiteralControl(“<script src=’/_layouts/jquery-1.4.2.min.js’></script>”));  

base.Controls.Add(new LiteralControl(“<script src=’/_layouts/autoAdd.js’></script>”));  

pnlRender.Controls.Add(up);  

up.ContentTemplateContainer.Controls.Add(txtAutoAddUsers);  

up.ContentTemplateContainer.Controls.Add(ddlCategory);  

pnlRender.Controls.Add(peAssignRep);  

  

 AutoAdd.JS File  

window.onload = go();  

 function go()
{
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}  

 function EndRequestHandler(sender, args)
{
 var autoAddUsers = $(“input[id$=’txtAutoAddUsers’]”).val();
 $(“div[id$=’_peAssignRep_upLevelDiv’]”).text(autoAddUsers);
}  

 function pageLoad()
{
 $(“input[id$=’txtAutoAddUsers’]”).css(“display”,”none”);
}  

 

Conclusion 

Using the javascript to register the jquery code to run on the partial page update, enables us to take advantage on the update panel to generate users and populate a regular text box.

Advertisements