Can't get People Picker value on 'Edit' form load

Question

When opening a SharePoint EDIT form, I'm trying to capture a people picker value using JavaScript. Unfortunately, the people picker isn't loaded with data when I call .GetAllUserInfo.

I'm using the following line inside $(document).ready(function()...

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', readyFunction);

When readyFunction() runs I get:

GetAllUserUserInfo: object is null or undefined

Basically it looks like I need to slow down the execution of my code until the people picker is fully loaded WITH the value. Waiting for sp.js to be loaded doesn't seem to be the answer. Any ideas? Using setTimeout to call the function works, but it's obviously not an ideal way to have to do it.

Here is the code I expected to work:

$(document).ready(function(){

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', theFunction);

theFunction(){
    var dispTitle = "myPpField";      
    var pickerDiv = $("[id$='ClientPeoplePicker'][title='" + dispTitle + "']");      
    var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
    var theUser = peoplePicker.GetAllUserInfo();
    var theUserId = theUser[0].EntityData.SPUserID;
    alert(theUserId);
}

});

Answer 1

Try wrapping your JavaScript inside the SharePoint 'ready' function:

<script>
function _spBodyOnLoad()
{
    var pickerPeople = SPClientPeoplePicker.SPClientPeoplePickerDict['<ID of my people picker>'].GetAllUserInfo();
    if (pickerPeople.length > 0) {
        alert("User: " + pickerPeople[0].DisplayText);
    }
}
</script>

Not sure how you are loading your JS. For my quick test, I put my script file on the edit form by clicking on the List tab, then Form Web Parts, then Default Edit Form. I then put a content editor web part on the page and linked it to my JS file in the documents library.

The code above is exactly what I have in my JS file, including the <script> tags.

EDIT Based on your code snippet and the extra information you've provided, I tried again. Here is what works for me:

I put this snippet at the bottom of PlaceHolderMain in the Edit form using SharePoint Designer:

<script>
function _spBodyOnLoad()
{
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {

        var dispTitle = "Users";      
        var pickerDiv = document.getElementById("Users_3a52bbd5-aac9-4ced-84d2-080f9fa5f59e_$ClientPeoplePicker");      
        var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv.id];
        var theUser = peoplePicker.GetAllUserInfo();
        var theUserId = theUser[0].EntityData.SPUserID;
        alert("SP User ID: " + theUserId);

    });
}
</script>

You should be able to take your code out of the jQuery ready function and use the SharePoint ready function instead.

The only other difference for me was not using jQuery but you should be able to adapt my snippet to match yours.

Hopefully this solves your problem.

Answer 2

try to enclose your code in

_spBodyOnLoadFunctions.push(function(){
// code to capture people picker value
});

Or use JSLink to add PostRender callback

ovverideCtx.OnPostRender = function(ctx){
   //code here
};

Answer 3

I have a template I use for all my scripts that I will post below. I believe it works when you delay the script because "sp.js" has finished loading by then. If you remove the delay you're not giving "sp.js" enough time to load. The script I use will not run until sp.js has finished loading, then it loads my functions and everything runs. I use a CEWP and point to the script file.

<SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>
<SharePoint:FormDigest ID="MyFormDigest" runat="server"/>

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(OnLoad, "sp.js");
    function OnLoad()   
    {       

    }   // End OnLoad    
</script>

Place your code in the OnLoad wrapper function and you should be able to remove the delay. Hope this helps!