Ajax, Update Panel, & the People Picker

A lot 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(""));
base.Controls.Add(new LiteralControl(""));
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.