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

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>

4 answers

This widget could not be displayed.

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.

This widget could not be displayed.

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.

This widget could not be displayed.

Any update on this issue. Please help!

This widget could not be displayed.

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.

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted yesterday in United States

Local Atlassian Research Workshop opportunity on Sep. 28th

We're looking for participants for another workshop at Atlassian! We need Jira admins who have interesting custom workflows, issue views, or boards. Think you have a story to sh...

31 views 0 0
View post

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you