I need jquery to fire when the user selects a value in the main form from a popup viewer

Question

Has anyone tried to try to trigger the jquery change event when the people collector returns the value to the main form from the popup viewport? I tried several tags in a jquery statement but nothing works. (SP 2010)

<wssawc:PeopleEditor AllowEmpty="false" AcceptAnyEmailAddresses="true" ValidateResolvedEntity="true" ShowButtons="true" ShowDataValidationErrorBorder="true" ShowEntityDisplayTextInTextBox="true" ShowErrorPlaceHolder="true" ValidatorEnabled="true" MultiSelect="false" ID="primaryOwnerPicker" runat="server" SelectionSet="User" Width="12em" AllowTypeIn="false" DoPostBackOnResolve="false" EnableBrowse="true" ForceClaims="true" Title="Primary Owner People Picker" /> 

I tried

 $("textarea[title='Primary Owner People Picker']").change(function () { alert("here"); }); 

any help would be greatly appreciated ...

Answer 1

You did not specify a version of SharePoint, but the following explanation applies to SharePoint 2007 and was not confirmed in 2010.

The people selection value can be set by clicking the Check Names icon or the Browse icon.

If you click the Check Names icon, which is an anchor tag, the onclick event triggers a WebForm_DoCallback, which will asynchronously make an HTTP request to the SharePoint server to validate the name entered in the people collector.

The following is the signature of WebForm_DoCallback:

 function WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync){ ... } 

One of the WebForm_DoCallbacks arguments that interests you the most is the "eventTarget", a text area for selecting people. You will also be interested in "eventCallback" since the callback method is called after the async HTTP request is returned. In this case, it is the "EntityEditorHandleCheckNameResult (result, ctx)" defined in the js core.

The following is a definition of the EntityEditorHandleCheckNameResult function

 function EntityEditorHandleCheckNameResult(result, ctx) { EntityEditorClearWaitCursor(ctx); EntityEditorCallback(result, ctx); } 

Note that he delegates the processing of the event to the EntityEditorCallback method. This also happens if you click the Browse icon, which opens a dialog box for searching and selecting a user. The Browse icon obviously uses a different call stack, but since both of them rely on EntityEditorCallback, I will focus on this method since the solution works when you click Check Names or Browse.

To execute your code after calling EntityEditorCallback, you can use the following code:

 var invokeAfterEntityEditorCallback = function(func) { var old__EntityEditorCallback = EntityEditorCallback; if (typeof EntityEditorCallback != 'function') { EntityEditorCallback = func; } else { EntityEditorCallback = function(result, ctx) { old__EntityEditorCallback(result, ctx); func(result, ctx); } } }; 

The following is a custom event handler for people that notifies the result and the identifier of the people selection area:

 function onPeoplePickerFieldSet(result, ctx){ alert(result); alert(ctx); } 

The following logic allows you to call the onPeoplePickerFieldSet method after the name of the people picker is verified or selected in the browse dialog box. Alternatively, you can call this statement in the document.ready event handler if you are using jQuery.

 invokeAfterEntityEditorCallback(onPeoplePickerFieldSet); 

The 'result' argument to the onPeoplePickerFieldSet method is an XML result that indicates a successful validation, as well as a username named quailified. The following XML example is the result of clicking the Check Names button:

 <Entities Append="False" Error="" Separator=";" MaxHeight="3"> <Entity Key="HOLLOWAY\csteel" DisplayText="Craig Steel" IsResolved="True" Description="HOLLOWAY\csteel"> <ExtraData> <ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <DictionaryEntry> <Key xsi:type="xsd:string">DisplayName</Key> <Value xsi:type="xsd:string">Craig Steel</Value> </DictionaryEntry> <DictionaryEntry> <Key xsi:type="xsd:string">Email</Key> <Value xsi:type="xsd:string"> [e-mail] </Value> </DictionaryEntry> <DictionaryEntry> <Key xsi:type="xsd:string">SPUserID</Key> <Value xsi:type="xsd:string">16</Value> </DictionaryEntry> <DictionaryEntry> <Key xsi:type="xsd:string">PrincipalType</Key> <Value xsi:type="xsd:string">User</Value> </DictionaryEntry> </ArrayOfDictionaryEntry> </ExtraData> <MultipleMatches /> </Entity> </Entities> 

The argument 'ctx' is the identifier of the text area of ​​the people picker and can be used in jQuery selector instructions.

What is it!

Answer 2

I took advantage of the answer from Athens Holloway above, with a few tricks. In my case, there was an exception of a specific user from the people picker. You can exclude a user from the people’s collector using pathpackerdirectorypaths peoplepicker on the central administration server, but for various reasons for controlling changes that were not an option for us. Adding Javascript to one specific site will allow us to do this work without compromising the entire site collection.

This is a complete script that excludes one user from a set of people:

  var peoplePickerCtx; var invokeAfterEntityEditorCallback = function(func) { var old__EntityEditorCallback = EntityEditorCallback; if (typeof EntityEditorCallback != 'function') { EntityEditorCallback = func; } else { EntityEditorCallback = function(result, ctx) { old__EntityEditorCallback(result, ctx); func(result, ctx); } } }; function onPeoplePickerFieldSet(result, ctx){ // gets the long ID string of the people-picker control when the user touches the control if (result != undefined) { var checkThis = result.toString(); peoplePickerCtx = ctx.toString(); } } function userMessage (checkThis) { if (checkThis.indexOf("USERNAME TO EXCLUDE GOES HERE") !=-1) { alert ('That account is not valid YOUR ERROR MESSAGE GOES HERE') return false; } return true; } function PreSaveAction() { // this is a standard function - give it this name and it runs pre-save var returnMe = false; // used simple getElementById instead of jQuery because it picks up what is actually in the blank. // jQuery picked up the old value until after the user clicked CheckNames button var checkThis= document.getElementById(peoplePickerCtx+"_upLevelDiv").innerText.toLowerCase() if (checkThis!=undefined) { returnMe = userMessage (checkThis) } return returnMe ; }; invokeAfterEntityEditorCallback(onPeoplePickerFieldSet); </script> 

Answer 3

Try this instead:

 $("textarea[title='Primary Owner People Picker']").live(function () { alert("here"); }); 

And it would be helpful to understand your problem if you can post the full html / js code.

Answer 4

How about this:

 $("textarea[title='Primary Owner People Picker']").on('change', function () { alert('here'); }); 

Answer 5

The answer to Athena worked for me like a charm. Since the check sometimes causes an error (for example, a few matches with the name), I do not want my code to run until the check returns any errors. Unfortunately, this requires users to click the validate button again after selecting the correct name from among those returned. Here is just a little additional code that I used to analyze the result:

 function onPeoplePickerFieldSet(result, ctx){ xmlDoc = $.parseXML(result); $xml = $(xmlDoc) if($xml.find("Entities").attr("Error") == "") { getUserData($xml.find("Entity").attr("Key")); //this is the username } }