[JIRA Server][Java Script] Custom field JS script stopped picking users after the upgrade.

[aravindi.amarasinghe]

Hi 

We recently upgraded our JIRA server to 8.13.10

We had this script that we used to pickup approvers in our tickets. The script shows the list if approvers in the approval screen and when we pick one, the user ID display on the field. This script stopped picking users from the list. Can someone help me to figure out what's wrong in there? 

The  script 

<script type="text/javascript">

function showOptionsB1() {
var listenersDivB1 = document.getElementById("presetValuesB1");
var listenersArrowB1 = document.getElementById("presetValuesB1Arrow");
if (listenersDivB1.style.display == 'none') {
listenersDivB1.style.display = '';
listenersArrowB1.src='../images/icons/navigate_down.gif';
} else {
listenersDivB1.style.display='none';
listenersArrowB1.src='../images/icons/navigate_right.gif';
}
}

function setApproversB1(aprValB1) { 
var aprFieldB1 = document.getElementById("customfield_10702");
aprFieldB1.value = aprValB1;
aprFieldB1.focus();
return false;
}
</script>

<img id="presetValuesB1Arrow" src="../images/icons/navigate_right.gif" width=8 height=8 border=0>
<a href="#" onclick="showOptionsB1(); return false;">List of Business Approvers</a>

<div id="presetValuesB1" style="font-size: 90%;">
<ul>
<li> <a href="#" onclick="return setApproversB1('e1111');">John</a> </li>
<li> <a href="#" onclick="return setApproversB1('e222');">Chris</a> </li></ul>
</div>

The Screen 

[Radek Dostál · Accepted solution]

function setApproversB1(aprValB1) { 
var aprFieldB1 = document.getElementById("customfield_10702");
aprFieldB1.value = aprValB1;
aprFieldB1.focus();
return false;
}

The customfield id seems wrong, trying this on 8.13.6, the field's form id is "customfield_19727-field", appending the "-field" part made it work for me.

[Radek Dostál]

Ah okay I spoke too soon, it doesn't actually set the value.. But I did some more testing and this does work so far in all the cases:

<script type="text/javascript">
function showOptionsB1() {
var listenersDivB1 = document.getElementById("presetValuesB1");
var listenersArrowB1 = document.getElementById("presetValuesB1Arrow");
if (listenersDivB1.style.display == 'none') {
listenersDivB1.style.display = '';
listenersArrowB1.src='../images/icons/navigate_down.gif';
} else {
listenersDivB1.style.display='none';
listenersArrowB1.src='../images/icons/navigate_right.gif';
}
}

function setApproversB1(username, displayName) { 
var aprFieldB1TextDisplay = document.getElementById("customfield_19727-field");
aprFieldB1TextDisplay.value = displayName;

var aprFieldB1select = document.getElementById("customfield_19727");
var aprFieldB1option = document.querySelector("#customfield_19727 > option");

if (aprFieldB1option == null) {
var option = document.createElement('option');
aprFieldB1select.appendChild(option);
aprFieldB1option = document.querySelector("#customfield_19727 > option");
}

aprFieldB1option.value = username;
aprFieldB1option.innerText = displayName;
aprFieldB1option.selected = "selected";

aprFieldB1TextDisplay.focus();
return false;
}
</script>

<img id="presetValuesB1Arrow" src="../images/icons/navigate_right.gif" width=8 height=8 border=0>
<a href="#" onclick="showOptionsB1(); return false;">List of Business Approvers</a>

<div id="presetValuesB1" style="font-size: 90%;">
<ul>
<li> <a href="#" onclick="return setApproversB1('myusername', 'Radek Dostal');">Radek</a> </li>
<li> <a href="#" onclick="return setApproversB1('anotherguy', 'The Other Guy');">The Guy</a> </li></ul>
</div>

Seems like it needs to have a child "option" element besides the text input, maybe they changed that, so after tinkering a little bit with the form and trying out a few things this ended up working (actually tested that instead of assuming like I did initially).

[aravindi.amarasinghe]

@Radek Dostál 

Hey it worked  like a charm. :D 

Thanks a lot! you saved my day.