Needing help with JIRA Issue Collector inside an angular application.

[Misty Ramsdell]

The button, to pull up the issue collector, needs to be clicked twice in order for the collector to pop up. 

running jQuery version 1.12.4 

Current code:

In html file:

<button id="nameOfButton" (click)="nameOfButton">Name of Button</button>

In ts file:

import * as jQuery from 'jquery';

declare global { 
   interface Window { 
     ALT_JQ_PAGE_PROPS: any; 
   } 
}

window.ALT_JQ_PAGE_PROPS = window.ALT_JQ_PAGE_PROPS || {};

@Component({ })

nameOfButton() {
    jQuery.ajax({url: 'https://url/plugins/servlet/issueCollectorBootstrap.js?collectorId=numberid&locale=en_US',
       type: 'get',
       cache: true,
       dataType: 'script',
     })

   window.ATL_JQ_PAGE_PROPS = {

      triggerFunction: function (showCollectorDialog: any) {

        //Requires that jQuery is available!

        jQuery('#nameOfButton').on('click', function (e) {

          e.preventDefault();

          showCollectorDialog();

          e.stopImmediatePropagation();     <- this is added by us to stop overlapping->

        });

      },

    };

  }

Is there a solution to fix the call to the issue collector and have it display without having to click the button a second time?

It would be nice if Atlassian would take a hard look into the JIRA Issue Collector and map out a solution for those who are using Angular for building their applications. 

If by chance we have missed the directions for Angular using a custom collector, please comment where to find them.  

[Brant Schroeder]

@Misty Ramsdell Welcome to the Atlassian community

We just used the API and integrated that into our support form.  This gave us more control of the information that we collected, and we do not have to rely on the issue collector.  The issue collector is an easy to use / implement solution, but you have less control over it since it uses Atlassian code.  The API give you full control since you build the frontend.