Problem with embedding custom Jira Issue Collector

Question

Greetings all,

I've embedded a custom Jira Issue Collector on our Drupal 7 site. The issue collector works fine when I insert the code into a Drupal theme template file. Unfortunately, that is bad practice.

When I instead add the issue collector code into our template.php file using drupal_add_js(), the code is visible when I View Source in the browser. But no action happens when I click on the custom link that should open the issue collector. The script is the same as the one added to template.php, but it doesn't work. There are no JS console errors or network tab script loading errors. The order of loading is 1) Jira remote issue collector script that has our issue collector defined in Jira, 2) script local to the page which instantiates the custom Jira issue collector (see code below). View Source and the the Network tab shows the scripts are loaded in the correct order. jQuery is also loaded before either of these scripts.

The script is below. I suspect somehow the there is an order-of-execution problem where window.ATL_JQ_PAGE_PROPS does not get associated properly with the trigger function at the right time during the page load cycle. But when I view the value of window.ATL_JQ_PAGE_PROPS in the console it is there and contains the correct triggerFunction property. I tried (document).ready() as well as well as (window).load(). I would greatly appreciate any thoughts:

drupal_add_js('path-to-jira-issue-collector-script-at-jira.com', array('type' => 'external','scope' => 'footer','weight' => 5));

drupal_add_js(
  'jQuery(document).ready(function() {
    window.ATL_JQ_PAGE_PROPS = {
      "triggerFunction": function(showCollectorDialog) {
        //Requires that jQuery is available!
        jQuery(".our-custom-button-class").click(function(e) {
         e.preventDefault();
         showCollectorDialog();
        });
     } 
  };
});', array('type' => 'inline','scope' => 'footer','weight' => 10));

north_211i8v · Answer

If anyone reads this later, the problem appears to be that attaching a Google Analytics click event to the same page element that opens the Jira contact form, can cause a race condition between Google Analytics and the Jira script that loads the contact form. The Google Analytics script can sometimes prevent other scripts from running in some circumstances. The solution is to wrap the Google click events inside window.addEventListener('load', (event) as follows. This will delay the Google analytics click event binding until the page is full loaded, which seems to prevent any race conditions:

window.addEventListener('load', (event) => {
// Add GA custom event for click on call-to-action button in in main hero image at top of screen
$(".my-button-class").click(function() {
ga('send','event','Front Page','Hero call to action button: ' + $(this).text()); 
});

...

north_211i8v · Answer

Hi Prince Nyeche,

Thanks for your response. Yes, I cleared both the Drupal cache (drush cc all) and the browser cache (Empty Cache and Hard Reload button) before every page load. I also tried both Chrome and Firefox -- both had the same result. The scripts are loaded fine but they do not execute.

Any other thoughts?

Prince Nyeche - ELFAPP · Answer

Hi @north

It could most probably due to cache, I'll suggest to try to flush the cache and try again. one of the ways you could test this is either use a different browser or use incognito mode.