none
Sharepoint 2013 Setting people picker with Jquery not working in IE8 RRS feed

  • Question

  • In a SharePoint 2013 list with a people picker column labeled Name the following code works great in IE9 and IE10, however in IE8 the script shows an undefined is null or not an object error message at spPeoplePicker.AddUnresolvedUserFromEditor(true);

    FYI using jquery min 1.10.2

    Any ideas on how to resolve the issue?

    <script type="text/javascript">
    $(document).ready(function () {
    var userid = _spPageContextInfo.userId;
    //alert(userid)
    function GetCurrentUser() {
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
    var requestHeaders = { "accept" : "application/json;odata=verbose" };
    $.ajax({
      url : requestUri,
      contentType : "application/json;odata=verbose",
      headers : requestHeaders,
      success : onSuccess,
      error : onError
    });
    }
    function onSuccess(data, request){
     var userName = data.d.Title;
     //set following "field" as column to set in people picker
     SetUserFieldValue("Name",userName);
    }
    
    function onError(error) {
      //alert(error);
    }
    function SetUserFieldValue(fieldName, userName) {
     
    var controlName = fieldName;
     
    var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");
     
    var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");
     
    var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
     
    //comment out this field if edit form needs to be read only 
    peoplePickerEditor.val(userName);
    //comment out this field if edit form needs to be read only  
    spPeoplePicker.AddUnresolvedUserFromEditor(true);
     
    //disable the field
     
    spPeoplePicker.SetEnabledState(false);
     
    //hide the delete/remove use image from the people picker
     
    $('.sp-peoplepicker-delImage').css('display','none');
     
    }
    
    
    GetCurrentUser();
    });
    </script>

    Tuesday, November 19, 2013 2:53 PM

Answers

  • Hi David,

    Below is the complete code I have used to load the current user to the people picker in SharePoint 2013.

    $(document).ready(function(){
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadCurrentUser);
    }):
    
    function LoadCurrentUser() {
    	var context = SP.ClientContext.get_current();
    	var siteColl = context.get_site();
    	var web = siteColl.get_rootWeb();
    	this._currentUser = web.get_currentUser(); 
    	context.load(this._currentUser);
    	context.executeQueryAsync(Function.createDelegate(this, SetPickersToCurrentUser), Function.createDelegate(this, LoadUserfailed));
    }
    
    function LoadUserfailed() {
        alert('failed');
    }
    
    function SetPickersToCurrentUser()
    {
    	var loginName = this._currentUser.get_title();
    	SetPeoplePicker('Order Team', loginName);
    }
    
    function SetPeoplePicker(fieldName, userAccountName) { 
    	var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + fieldName + "']"); 
    	var peoplePickerEditor = peoplePickerDiv.find("[title='" + fieldName + "']"); 
    	var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id]; 
    	peoplePickerEditor.val(userAccountName); 
    	spPeoplePicker.AddUnresolvedUserFromEditor(true); 
    }
    

    Let me know if you have any questions. I will help you out!

    -Praveen.


    ASP.NET and SharePoint developer
    Blog: http://praveenbattula.blogspot.com


    Please click "Propose As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you.

    • Proposed as answer by Jaydeep Mungalpara Monday, December 16, 2013 11:22 AM
    • Marked as answer by Davidatek Monday, December 16, 2013 7:14 PM
    Monday, December 16, 2013 5:48 AM

All replies

  • I was still unable to resolve this, so unless someone else has a better idea, I'll just add a script to block IE8 and below for this newform.

    Tuesday, November 26, 2013 3:56 PM
  • Hi David,

    Below is the complete code I have used to load the current user to the people picker in SharePoint 2013.

    $(document).ready(function(){
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadCurrentUser);
    }):
    
    function LoadCurrentUser() {
    	var context = SP.ClientContext.get_current();
    	var siteColl = context.get_site();
    	var web = siteColl.get_rootWeb();
    	this._currentUser = web.get_currentUser(); 
    	context.load(this._currentUser);
    	context.executeQueryAsync(Function.createDelegate(this, SetPickersToCurrentUser), Function.createDelegate(this, LoadUserfailed));
    }
    
    function LoadUserfailed() {
        alert('failed');
    }
    
    function SetPickersToCurrentUser()
    {
    	var loginName = this._currentUser.get_title();
    	SetPeoplePicker('Order Team', loginName);
    }
    
    function SetPeoplePicker(fieldName, userAccountName) { 
    	var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + fieldName + "']"); 
    	var peoplePickerEditor = peoplePickerDiv.find("[title='" + fieldName + "']"); 
    	var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id]; 
    	peoplePickerEditor.val(userAccountName); 
    	spPeoplePicker.AddUnresolvedUserFromEditor(true); 
    }
    

    Let me know if you have any questions. I will help you out!

    -Praveen.


    ASP.NET and SharePoint developer
    Blog: http://praveenbattula.blogspot.com


    Please click "Propose As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you.

    • Proposed as answer by Jaydeep Mungalpara Monday, December 16, 2013 11:22 AM
    • Marked as answer by Davidatek Monday, December 16, 2013 7:14 PM
    Monday, December 16, 2013 5:48 AM
  • Hi David,

    I'm having exactly the same issue as you had above. Are you able to solve the problem eventually? If so, would you mind sharing it with me?

    Thanks,

    Yanli

    Monday, July 7, 2014 8:49 PM
  • Sorry, Yanli

    I was unable to find an answer so I just added a script if they were using IE8 to tell them to use IE9 or higher.

    You might try Paveen's solution

    Friday, July 11, 2014 6:21 PM
  • I'm also having this issue -- as near as I can tell the entire SPClientPeoplePickerDict object on SpClientPeoplePicker is undefined -- there's zero data in there. 

    As far as I can tell from testing it seems to have something to do with the order of Sp.js and Sp.runtime.js getting loaded. If you change the order and load sp.js before sp.runtime.js, you'll get the same results in other browsers (spclientpeoplepicker is loaded, but spclientpeoplepickerdict is undefined).

    No luck figuring out just why yet.


    Friday, August 15, 2014 12:18 AM
  • I added a 500 millisecond timer before it's executed and that appears to resolve the issue. Ugh. 

    • window.setTimeout(GetCurrentUser, 500);

    That's so dumb that I don't want to leave it in; what I need to do is figure out some way to wait until sp.js is loaded before kicking off my javascript.

    Apparently there used to be a function called "ExecuteOrDelayUntilScriptLoaded" in previous editions of SP that would do this, but it doesn't work from inside script webparts now (and frankly I don't want to hack at my master page for additional forms).

    What I might do is jig up a special masterpage just for this form I guess. 

    Friday, August 15, 2014 1:08 AM
  • So i figured out what Paveen is doing up there and it is not working for me, but I get the idea. I did get ExecuteOrDelayUntilScriptLoaded working but it isn't actually doing what we want.

    What appears to be happening here is that there are some asynchronous events behind the scenes that happen to set up the peoplepicker in the page that my code (pilfered from the internet) is using, and the peoplepicker isn't fully configured by the time my code executes. 

    So what I need to figure out is what event indicates that the peoplepicker is going and then key off of that somehow. 


    This blog has some good answers in the comments here, someone figured out the same thing I did :)

    http://jasonscript.wordpress.com/2013/08/07/javascript-and-working-with-the-sharepoint-2013-people-picker/

    • Edited by Ryan Sands Friday, August 15, 2014 2:02 AM
    Friday, August 15, 2014 1:52 AM