JIRA.bind event stacks up to run multiple times

[Jannik Luyten]

I have a custom field that needs to execute some javascript code each time it is in edit mode. Guided by https://answers.atlassian.com/questions/101661/need-help-with-custom-field-supporting-inline-editing), I momentarily have the following code in my edit Velocity Template:

<script type="text/javascript">
	AJS.$(function() {
	    AJS.toInit(function(){
			doSomeJavascript();
	    });

		JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
			if(reason === 'inlineEditStarted') { //only do when starting editing, not after editing
				console.log('test');
				doSomeJavascript();
			}
		});
	});
// ... some functions
</script>

This works, however, the JIRA events stack. That is, the first time I edit the custom field and save it, "test" is saved to the console once. The second time I edit and save the custom field, test is saved twice, etc.

I tried playing with JIRA.unbind, but this just had the effect that after I edited and saved, and tried editing again, the doSomeJavascript() function was not called, i.e. it was not bound anymore.

Can anyone help me on this, how to make the JIRA event only execute once? Thanks!

[Jannik Luyten · Accepted solution]

I spent a moment on this with Jonathan Doklovic and Andreas Knecht during AtlasCamp, and they pointed out that all the javascript code should be included as a web-resource:

<web-resource key="customfield-client" name="Custom Field Client JS">
    	<context>atl.general</context>
		<resource type="download" name="some-custom-field.js" location="/js/some-custom-field.js"/>
    </web-resource>

This makes the javascript code load only once, and as such register and fire the JIRA event only once. Hooza!

However, now I have the issue that I can 't access my Velocity Template's value ($value), because the js-file is totally out of VM scope. I solve this by including a hidden span field in my velocity template which will hold the custom-field value :

#disable_html_escaping()
#customControlHeader ($action $customField.id $customField.name $fieldLayoutItem.required $displayParameters $auiparams)
<select class="select some-custom-field" id="select_$customField.id" name="$customField.id" type="text" />
<span class="someValue" style="display:none">$!{value}</span> #customControlFooter ($action $customField.id $fieldLayoutItem.fieldDescription $displayParameters $auiparams)

I can then use a jQuery selector in my javascript code to access the value :

jQuery(".someValue", context).html()

Note that the variable 'context' is passed from my JIRA event and is in this case the entire custom field. This way multiple "Some Custom fields" can be put on a single page and jQuery can select them accordingly.

[Hung Nguyen]

Do you mean we have to create one web-resource plug-in and put all the javascripts into it? Or a default web-resource has been there, and we just need to find the correct place to insert our additional "resource" and its javascripts mentioned above?

[Darin Hafer]

Hello @Jannik Luyten, I'm having the exact issue you were having 5+ years ago. I don't understand the accepted answer and not sure it applies to me.

My javascript - shown below - is specified in the 'description' of a custom field in Jira (this allows the javascript to run when the field is rendered to allow js to make dynamic behavior).

I notice the first time I create a ticket my code is run once. Then I cancel, and create a ticket again (create mode) and my code runs twice. Then I cancel, and create a ticket again, and my code runs three times, and so on.

Do I need to call unbind? and if so, doesn't unbind require a function name? Here, it's more of an inline function with no name. How can I be sure my code doesn't run multiple times in the year 2019 ?

The code runs when 'dialogReady' reason is issued.

<script type="text/javascript">

jQuery(document).ready(function($) {
   JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context,reason) {

      console.log('-----> reason value: '+reason);
      callSetLicensePolicyValue();
   });
   callSetLicensePolicyValue();

   function callSetLicensePolicyValue(){
      setLicensePolicyValue();
      $('#customfield_12325').change(function() {
         setLicensePolicyValue();
      });
   }

   function setLicensePolicyValue(){
      var goList = ["Public Domain", "BSD", "MIT", "Apache 1.1", "Apache 2.0"];
      var stopList = ["GPL 3.0"];
      var cautionList = ["GPL 2.0"];

      var value = $("#customfield_12325 option:selected").text();

      if (value != "None") {
         // check Go list
         if (($.inArray(value, goList)) == -1) {
            // check Stop list
            if (($.inArray(value, stopList)) == -1) {
               // check Caution list
               if (($.inArray(value, cautionList)) == -1) {
                  // not found
                  $("#customfield_12509 option[value=-1]").attr("selected", "selected");
               }
               else {
                  $("#customfield_12509 option[value=12229]").attr("selected", "selected");
               }
            }
            else {
               $("#customfield_12509 option[value=12230]").attr("selected", "selected");
            }
         }
         else {
            $("#customfield_12509 option[value=12228]").attr("selected", "selected");
         }
      }
      else {
         // do sumpin console.log('-----> Value is none: '+value);
      }
   }
});
</script>

[amine778]

@Darin Hafer The same here, The code is run multiple times, is anybody got an explanation or solution?

[Darin Hafer]

I have not received any responses. I do notice that perhaps I should have typed my response into the "Reply" field, but I actually typed it into the "Answer" field. Regardless, haven't received any feedback on this.