jQuery .val() Not Actually Changing Value

Question

UPDATE: I feel like I may have left out a key piece of information... The column type is a Person or Group type. I tried with a single line of text and it works just fine. Doesn't register as empty.But for other entries/pre-filled inputs need to use the Person or Group column to determine other inputs. Working with metadata

I have a SP list where for my first column, I am having the form autofill the User using an AJAX.

It populates the field with the correct value no problem. My issue is when you can see the value that has been automatically placed there, and hit submit for the form, it still reads the field as blank and tells me "You cannot leave this blank".

You see the value there, but it is kind of pushed in the left corner of the text box, hidden beside the input boxes default Placeholder text. I am wondering if that also could maybe be causing an issue? Is it possible to hide the placeholder text?

If I click the text box, and press any key (Enter/space/etc.) then it notices the value automatically inserted.

Before this gets marked as a duplicate, I have done my due diligence searching through posts and threads and have found similar posts with this issue, but the solution does not work. Like this post here: val() doesn't trigger change() in jQuery

Here is my call and appending of the information:

$(function(){
    $.ajax({
        url: webUri + "/_api/sp.userprofiles.peoplemanager/GetMyProperties",
        type: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: function(dataCurrentUser){
            console.log(dataCurrentUser)
            $("[title='User']").val(dataCurrentUser.d.AccountName).keyup().change();
        }
    })
})

Let's see your markup. Also, `$().val(dataCurrentUser.d.AccountName).keyup().change();` is mildly more performant (and looks cooler). — isherwood, Mar 17 '21 at 19:25
I'd bet that `.focus().blur()` would do the job. To be accessible you'd want to then return focus to the calling element. — isherwood, Mar 17 '21 at 19:27
Are you sure you are not incurring in asynchronous issue? If the validation occurs before the success callback for example — Greedo, Mar 17 '21 at 19:29
@DanielA.White I will have to create one which would take a bit. That is all of my JS within a — BeerusDev, Mar 17 '21 at 19:30
@Greedo would a promise fix such issue? As opposed to using a slow ajax? — BeerusDev, Mar 17 '21 at 19:31
@BeerusDev that can be a solution that avoid chaining callback (that can be quite tricky to debug if they are a lot) — Greedo, Mar 18 '21 at 08:01

Amos · Accepted Answer · 2021-03-19T07:13:24.310

My test code for your reference:

<script>
  $(function () {
    $.ajax({
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties",
      type: "GET",
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function (dataCurrentUser) {
        console.log(dataCurrentUser)
        var ppTitle = "people";
        //$("[title='people']").val(dataCurrentUser.d.DisplayName).keyup().change();
        var _PeoplePicker = $("div[title='" + ppTitle + "']");
        var peoplePickerEditor = _PeoplePicker.find("[title='" + ppTitle + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        peoplePickerEditor.val(dataCurrentUser.d.DisplayName);
        var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
        ppobject.AddUnresolvedUserFromEditor(true);
      }

    })
  })
</script>

Blog reference: People Picker Field Actions In SharePoint Using JavaScript (JSOM)

Updated:

<script>
    $(function () {
        SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function () {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties",
                type: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function (dataCurrentUser) {
                    console.log(dataCurrentUser)
                    var ppTitle = "people";
                    //$("[title='people']").val(dataCurrentUser.d.DisplayName).keyup().change();
                    var _PeoplePicker = $("div[title='" + ppTitle + "']");
                    var peoplePickerEditor = _PeoplePicker.find("[title='" + ppTitle + "']");
                    var _PeoplePickerTopId = _PeoplePicker.attr('id');
                    peoplePickerEditor.val(dataCurrentUser.d.DisplayName);
                    var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
                    ppobject.AddUnresolvedUserFromEditor(true);
                }

            })
        })
    });

</script>

Test result:

Thank you for your answer Amos, but I run into quite a few errors when trying this. — BeerusDev, Mar 18 '21 at 12:30
The first: ```SPClientPeoplePicker is not defined``` so I added the script `````` as referred to here https://sharepoint.stackexchange.com/questions/268699/how-to-resolve-javascript-spclientpeoplepicker-is-not-defined-in-edge-works-fi. Then I try it again and I receive this error ```Uncaught TypeError: Cannot read property 'AddUnresolvedUserFromEditor' of undefined``` — BeerusDev, Mar 18 '21 at 12:36
And it does not populate to the input box like my previous code. Trying to search for a solution — BeerusDev, Mar 18 '21 at 12:44

jQuery .val() Not Actually Changing Value

1 Answers1