Java script to include logic for the text field to depend on the Radio button field selection

[Harish]

Hi ,

We use Jira 4.4.5.

There are few custom fields in our Create Issue page which need to have dependency on other fields.

Most cases it is a 'Text Field' to be displayed only if the Radio button 'Yes' is checked. If Not the Text Field should not be displayed.

There are almost 10 such fileds which have dependency on different Radio button fields.

Say :-

Text Field 1 display depends on Radio button 1

Text Field 2 display depends on Radio button 2

Text Field 3 display depends on Radio button 3

Text Field 4 display depends on Radio button 4

Text Field 5 display depends on Radio button 5

I have used a Java script in one of the Text Field's description to have this effect when the Create Issue page is loaded.

The Java script works fine as intended when i have the code only for 4 fields dependency, when i extend the code to have the logic for all the 10 field depencies then Jira throws an error "Error while accessing Fied Layouts" when i click on 'Update ' button in the Field Edit page, and so the updated code does not get saved.

Note - The whole java script was placed only at one filed's description

#1. I would like to know if there is any limit of Java script code that can be used in the Description of the Custom field.

#2. Is there any other work around to achive the dependencies between the custom fields without using external plugins.

Below is the java script used :

<script language="JavaScript" type="text/javascript">
try {
window.onload=function()
  {
document.getElementById('customfield_11306').parentNode.style.display="none";
document.getElementById('customfield_11307').parentNode.style.display="none";
document.getElementById('customfield_11702').parentNode.style.display="none";
document.getElementById('customfield_11902').parentNode.style.display="none";
document.getElementById('customfield_11912').parentNode.style.display="none";
document.getElementById('customfield_11913').parentNode.style.display="none";
document.getElementById('customfield_11917').parentNode.style.display="none";
document.getElementById('customfield_11909').parentNode.style.display="none";
document.getElementById('customfield_11911').parentNode.style.display="none";

if(document.getElementById('customfield_11305-1').checked) 
     {
	document.getElementById('customfield_11306').parentNode.style.display="";
	document.getElementById('customfield_11307').parentNode.style.display="";
     }
else
     {
	document.getElementById('customfield_11306').parentNode.style.display="none";
	document.getElementById('customfield_11307').parentNode.style.display="none";
     }
if(document.getElementById('customfield_11701-1').checked) 
     {
	document.getElementById('customfield_11702').parentNode.style.display="";
     }
else
     {
	document.getElementById('customfield_11702').parentNode.style.display="none";
     }
if(document.getElementById('customfield_11900-1').checked) 
     {
	document.getElementById('customfield_11902').parentNode.style.display="";
     }
else
     {
	document.getElementById('customfield_11902').parentNode.style.display="none";
     }
if(document.getElementById('customfield_11910-2').checked) 
     {
	document.getElementById('customfield_11911').parentNode.style.display="";
	document.getElementById('customfield_11912').parentNode.style.display="";
	document.getElementById('customfield_11913').parentNode.style.display="";
     }
else
     {
	document.getElementById('customfield_11911').parentNode.style.display="none";
	document.getElementById('customfield_11912').parentNode.style.display="none";
	document.getElementById('customfield_11913').parentNode.style.display="none";
     }
if(document.getElementById('customfield_11914-1').checked) 
     {
	document.getElementById('customfield_11917').parentNode.style.display="";
     }
else
     {
	document.getElementById('customfield_11917').parentNode.style.display="none";
     }
if(document.getElementById('customfield_11908-1').checked) 
     {
	document.getElementById('customfield_11909').parentNode.style.display="";
     }
else
     {
	document.getElementById('customfield_11909').parentNode.style.display="none";
     }
Radiochanged();
  };
function Radiochanged()
 {
document.getElementById("customfield_11305-1").onclick=function()
    {
	document.getElementById('customfield_11306').parentNode.style.display="";
	document.getElementById('customfield_11307').parentNode.style.display="";
	document.getElementById('customfield_11306').value="";
	document.getElementById('customfield_11307').value="";
    }
document.getElementById("customfield_11305-2").onclick=function()
    {
	document.getElementById('customfield_11306').parentNode.style.display="none";
	document.getElementById('customfield_11307').parentNode.style.display="none";
    } 
document.getElementById('customfield_11701-1').onclick=function()
    {
	document.getElementById('customfield_11702').parentNode.style.display="";
	document.getElementById('customfield_11702').value="";
    }
document.getElementById('customfield_11701-2').onclick=function()
    {
	document.getElementById('customfield_11702').parentNode.style.display="none";
    }
document.getElementById('customfield_11900-1').onclick=function()
    {
	document.getElementById('customfield_11902').parentNode.style.display="";
	document.getElementById('customfield_11902').value="";
    }
document.getElementById('customfield_11900-2').onclick=function()
    {
	document.getElementById('customfield_11902').parentNode.style.display="none";
    }

document.getElementById('customfield_11914-1').onclick=function()
    {
	document.getElementById('customfield_11917').parentNode.style.display="";
	document.getElementById('customfield_11917').value="";
    }
document.getElementById('customfield_11914-2').onclick=function()
    {
	document.getElementById('customfield_11917').parentNode.style.display="none";
    }
document.getElementById('customfield_11908-1').onclick=function()
    {
	document.getElementById('customfield_11909').parentNode.style.display="";
	document.getElementById('customfield_11909').value="";
    }
document.getElementById('customfield_11908-2').onclick=function()
    {
	document.getElementById('customfield_11909').parentNode.style.display="none";
    }
  }
}
   catch (err) {}
</script>

[Nitram]

Hi,
I have edited your code here,

<script language="JavaScript" type="text/javascript">
try {
window.onload=function()
{
hide('customfield_11306');hide('customfield_11307');
hide('customfield_11702');hide('customfield_11902');
hide('customfield_11912');hide('customfield_11913');
hide('customfield_11917');hide('customfield_11909');
hide('customfield_11911');

if(document.getElementById('customfield_11305-1').checked)
{
showfieldalone('customfield_11306');showfieldalone('customfield_11307');
}
else
{
hide('customfield_11306');hide('customfield_11307');
}
if(document.getElementById('customfield_11701-1').checked)
{
showfieldalone('customfield_11702');
}
else
{
hide('customfield_11702');
}
if(document.getElementById('customfield_11900-1').checked)
{
showfieldalone('customfield_11902');
}
else
{
hide('customfield_11902');
}
if(document.getElementById('customfield_11910-2').checked)
{
showfieldalone('customfield_11911');showfieldalone('customfield_11912');
showfieldalone('customfield_11913');
}
else
{
hide('customfield_11911');hide('customfield_11912');
hide('customfield_11913');
}
if(document.getElementById('customfield_11914-1').checked)
{
showfieldalone('customfield_11917');
}
else
{
hide('customfield_11917');
}
if(document.getElementById('customfield_11908-1').checked)
{
showfieldalone('customfield_11909');
}
else
{
hide('customfield_11909');
}
Radiochanged();
};
function Radiochanged()
{
document.getElementById("customfield_11305-1").onclick=function()
{
show('customfield_11306');
show('customfield_11307');
}
document.getElementById("customfield_11305-2").onclick=function()
{
hide('customfield_11306');
hide('customfield_11307');
}
document.getElementById('customfield_11701-1').onclick=function()
{
show('customfield_11702');
}
document.getElementById('customfield_11701-2').onclick=function()
{
hide('customfield_11702');
}
document.getElementById('customfield_11900-1').onclick=function()
{
show('customfield_11902');
}
document.getElementById('customfield_11900-2').onclick=function()
{
hide('customfield_11902');
}

document.getElementById('customfield_11914-1').onclick=function()
{
show('customfield_11917');
}
document.getElementById('customfield_11914-2').onclick=function()
{
hide('customfield_11917');
}
document.getElementById('customfield_11908-1').onclick=function()
{
show('customfield_11909');
}
document.getElementById('customfield_11908-2').onclick=function()
{
hide('customfield_11909');
}
}
function show(customfield){
document.getElementById(customfield).parentNode.style.display="";
document.getElementById(customfield).value="";
}
function hide(customfield){
document.getElementById(customfield).parentNode.style.display="none";
}
function showfieldalone(customfield){
document.getElementById(customfield).parentNode.style.display="";
}
}
catch (err) {}
</script>

Paste the same, you will be able to add, it will work.

Hope this helps.

[Nitram]

Hi,

Any field in the UI will have some restrictions in the size, Inorder to make you understand this concept,I will explain few things,

UI has a connection with DB, means whatever you submit using the UI has to be stored in the DB,

DB fields will always have size restrictions like

Field Customfield_XXXX ||| Customfield_xxxy

Size 20 ||| 15

In the screen too, for the Customfield_xxxx, you cant enter more than 20, if they dont restrict in the screen, then while inserting data in the DB, they will get error.So every field is restricted with some size.

Hope this helps.

[Nitram]

Hi,

If you write a plugin, you can put the whole code like you have shown, but when it comes to field description of a field, you should try to make the code clear by inserting only the code related to the field. So try to break down the code into bits and pieces and insert the codes in proper places.It may take time today, but when someone look the code it will be simple, and understandable.

[Harish]

Hi Nitram,

Thanks for the response! I understood that the DB field size thats not allowing me to have the lengthy script i nthe Decription field.

As you suggested i have tried to split the code for each field seperately but is does not work for all fields as the java script can work only once. We cannot have JSP scirpt multiple times.

This is with refernce to the issue i raised earlier.

below is the link.

https://answers.atlassian.com/questions/124455/create-issue-screen-java-script-to-include-a-logic-for-depending-fields

#1. Please let me know if i can place the JSP scirpt in the description for all the intended fields (seperately ) where i need the logic to work for the field. ?

Please guide!

Thanks,

harish

[Harish]

Any update on this issue. Please help!