Javascript Help Info won't run on edit screen

[Andy Cisler]

I have a custom field with a help dialog that runs using the javascript outlined in https://confluence.atlassian.com/jira064/creating-help-for-a-custom-field-720412166.html It works fine on the Create Issue screen, but on the Edit screen nothing happens when the question mark icon is clicked.

Here is the script:

SB and RRT Descriptions
<script type="text/javascript">
function showHelp() {
var listenersDiv = document.getElementById("qaFieldHelp");
if (listenersDiv.style.display == 'none') {
listenersDiv.style.display = '';
} else {
listenersDiv.style.display='none';
}
}
</script>
<a href="#" onclick="showHelp(); return false;"><img src="/images/icons/ico_help.png"/></a>
<div id="qaFieldHelp" style="display:none">
Help Text
</div>

Any thoughts on how I could get this to work on the Edit screen?

[Nir Haimov]

Hi,

Add id attribute to your <a> tag,for example "myLink".

Try to add this to your script:

JIRA.bind(JIRA.Events.NEW_PAGE_ADDED, function () {
    $("#myLink").click(function () {
        showHelp();
    });
});

[Andy Cisler]

My script currently looks like:

SB and RRT Descriptions
<script type="text/javascript">
 function showHelp() {
 var listenersDiv = document.getElementById("qaFieldHelp");
 if (listenersDiv.style.display == 'none') {
 listenersDiv.style.display = '';
 } else {
 listenersDiv.style.display='none';
 }
 }

JIRA.bind(JIRA.Events.NEW_PAGE_ADDED, function () {
 $("#myLink").click(function () {
 showHelp();
 });
});
</script>
<a id="myLink" href="#" onclick="showHelp(); return false;"><img src="/images/icons/ico_help.png"/></a>
<div id="qaFieldHelp" style="display:none">
Help Text
</div>

And still does not work on edit. Any thoughts? 

[Nir Haimov]

Hi,

Where are you running the script from?

[Andy Cisler]

It's running from the description of a custom field:

[Nir Haimov]

Hi,
You are right, needed to add something more "setTimeout"

Your code should look like this:

JIRA.bind(JIRA.Events.NEW_PAGE_ADDED, function () {
  setTimeout(function() {
    $("#myLink").click(function () {
    showHelp();
  }, 0);
});

Also, for the safe side, put your html tags first and your script in the end (currently it's the other way around)

[Andy Cisler]

So right now my script looks like this and still does not work on the edit screen (but does on the create screen):

SB and RRT Descriptions
<a id="myLink" href="#" onclick="showHelp(); return false;"><img src="/images/icons/ico_help.png"/></a>
<div id="qaFieldHelp" style="display:none">
Help Text
</div>
<script type="text/javascript">
 function showHelp() {
 var listenersDiv = document.getElementById("qaFieldHelp");
 if (listenersDiv.style.display == 'none') {
 listenersDiv.style.display = '';
 } else {
 listenersDiv.style.display='none';
 }
 }

JIRA.bind(JIRA.Events.NEW_PAGE_ADDED, function () {
 setTimeout(function() {
 $("#myLink").click(function () {
 showHelp();
 });
 }, 0);
});
</script>

(note that I had to add a close parentheses and bracket to your code block)

Any other thoughts on how I could get this to work? It's strange because if I manually run this in the console when the edit screen is open:

 function showHelp() {
 var listenersDiv = document.getElementById("qaFieldHelp");
 if (listenersDiv.style.display == 'none') {
 listenersDiv.style.display = '';
 } else {
 listenersDiv.style.display='none';
 }
 }

the javascript functions normally on click. 

[Nir Haimov]

This should work, i tried the same and worked for me.

Try to add debugger and open dev tool (F12) to see what happen in your code:

 function showHelp() {debugger;
 var listenersDiv = document.getElementById("qaFieldHelp");
 if (listenersDiv.style.display == 'none') {
 listenersDiv.style.display = '';
 } else {
 listenersDiv.style.display='none';
 }
 }

JIRA.bind(JIRA.Events.NEW_PAGE_ADDED, function () {debugger;
 setTimeout(function() {
 $("#myLink").click(function () {debugger;
 showHelp();
 });
 }, 0);
});