0

As I'm trying to inject Javascript into a list, I find it is difficult to get the right ID from a People or Group column.

This is an example of the code it outputs:

<div id="ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv" tabindex="0"     onfocus="StoreOldValue('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');saveOldEntities('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" onclick="onClickRw(true, true,event,'ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" onchange="updateControlValue('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" onPaste="dopaste('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField',event);" AutoPostBack="0" rows="1" onDragStart="canEvt(event);" onkeyup="return onKeyUpRw('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" onCopy="docopy('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField',event);" onblur="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField',event)){if(!ValidatePickerControl('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');}}}" title="People Picker" onkeydown="return onKeyDownRw('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField', 3, true, event);" aria-multiline="true" contentEditable="true" aria-haspopup="true" class="ms-inputuserfield" style="word-wrap: break-word;overflow-x: hidden; background-color: window; color: windowtext;" preferContentEditableDiv="true" name="upLevelDiv" role="textbox"></div>
<textarea name="ctl00$m$g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$UserField$downlevelTextBox" rows="1" cols="20" id="ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox" class="ms-inputuserfield" AutoPostBack="0" onkeyup="return onKeyUpRw('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" title="People Picker" onfocus="StoreOldValue('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');saveOldEntities('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" onblur="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField',event)){if(!ValidatePickerControl('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');}}}" onkeydown="return onKeyDownRw('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField', 3, true, event);" renderAsContentEditableDiv="true" onchange="updateControlValue('ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" style="width:100%;display: none;position: absolute; "></textarea>

If I wanted to grab the value, what ID do I use? The div or textarea? Or am I missing something else?

For instance, I'm doing testing by waiting for an OnChange in a People or Group column then getting alerted to the change. Obviously I'm not pulling the right ID or my code would work:

var nameVal = '';    
$('#ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv').on('change keyup paste mouseup', function () {
                    // capture name input value on change
                    if ($(this).val() != nameVal) {
                        nameVal = $(this).val();
                        alert('The text box really changed this time');
                    }
    });
1
1

Trying to hook in and manipulate people pickers is an exceptionally frustrating exercise...

Your code works for me by attaching to those events on the UserField_upLevelDiv as you have done, but your code will never return anything for $(this).val() because divs don't have a value they have text content, which you can get with .text()

var nameVal = '';    
$('#ctl00_m_g_1cf3263f_6a6c_41b0_b4e9_3a788fc9d907_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv').on('change keyup paste mouseup', function () {
                // capture name input value on change
                if ($(this).text() != nameVal) {
                    nameVal = $(this).text();
                    alert('The text box really changed this time');
                }
});
2
  • Thank you for your answer. Outside of this test code, I am trying to use SPServices to capture data and modify input fields based on that. For grabbing IDs, is it best to grab from the div in the way you described above or grabbing from the textarea ID with .val()? – nicolefdesigns Jan 13 '15 at 21:45
  • Hmm, I'm assuming you mean User IDs when you say "for grabbing IDs"? I'll go back to how infuriating working with people pickers is... they add people into the div you targetted above as spans that have a class ms-entity-resolved so you can find them inside of the div by tacking on .find('span.ms-entity-resolved') to the end of the selector you use in your question. Then the user ID is actually the title property of those spans which you can get with something like <original_selector>.find('span.ms-entity-resolved').attr('title') – John-M Jan 13 '15 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.