Actioning JavaScript with a ticket page is loaded in JIRA Service Desk

[Glenn Morrow]

Hi,

I am having trouble reliably having JavaScript run once a ticket page has loaded. The JS is in the "Edit Announcement Banner" and runs fine on a normal ticket using $(window).load(function() for when a page loads but this seems to only work for where you open an individual ticket. JIRA doesn't seem to load a new page as such when using the JIRA queues or the JIRA search functions. I used  event listeners - myElement.addEventListener('DOMSubtreeModified', thisFunction, false); on various elements - document.getElementById('stalker'), document.getElementById("sd-page-panel"), etc. but these only appear in some circumstances. I tried elements like document.getElementById("content") and even document.querySelector(".aui-group.split-view") but they were not reliable or would fire 50 times while a page was "loading" and it was unreliable and messy. 

Does anyone have a reliable way to have your custom JS code run on *any and all* JIRA Service Desk ticket view methods (queues, search, individual ticket etc.) once the ticket (page) has *loaded*. I am doing some custom JS mods to the view so the page(ticket) has to fully load first before this will work. I thought I was very clever with some cool little JS and then found it only ran 1/3 of the time no matter what I did. Doh. 

Any advice appreciated. :)

Cheers,

Glenn

[Glenn Morrow · Accepted solution]

Answered with support from JEditor support - https://marketplace.atlassian.com/plugins/com.jiraeditor.jeditor/server/overview - see above for details.

[Alexey Matveev]

Try write in your js just

alert("hello");

to make sure that it is not loaded. I never had problems with it within Jira. Through I do not use the announcement banner anymore.

[Glenn Morrow]

Thanks Alexey.

I am well past alert("hello"). :)

FYI: Google Chrome's DevTools (just right-click on anything in a web page (in Chrome of course) and select "Inspect" to get to it). For a start you can use console.log() to log text in DvTools Console window (see tabs at the top of DevTools) - e.g. in your js enter console.log("hello") or variables e.g. console.log(myVariable) and much more. It also has a great debugger - one way to activate it is to just enter debugger as a line in your js and Chrome (if you have DevTools open) will stop right there and you can check variables, step through js one line at a time, and all sorts of very useful stuff. Yo can also inspect the web page html, css, etc. It is great!

But thanks for your reply. I actually got a very comprehensive reply from JEditor plugin support who have a JS function in JEditor (I wrote to them asking about the above problem in case they knew of a solution) which I now have to go through but which might be the answer! Finger crossed. 

[Alexey Matveev]

If you have the hello world message, then your script is loaded. All you need to do is to write a script, which will work for you.

[Glenn Morrow]

Um no. Not with JIRA. Just because the page loads doesn't mean it has finished loading the page components - so your "hello world" and other codes run but it has nothing to run on yet! Doh. JIRA is a very complex beast. It turns out (I found by testing all ways) that there are more than 6 ways to access a "ticket" (from Service Desk queue, clicking the link on the ticket (sort of a refresh), doing a browser page refresh while viewing a ticket), from the "recent issues" in the "Issues" menu, and two ways from search depending if you have Detail View or List View. EACH of them loads the page components in a different sequence and only one of them on page load - so only that one will work when your "hello world" runs - for all the rest you need other JS code to detect when the parts you want to manipulate are actually there and then run your JS code. And even then if you change something JIRA sometimes hasn't finished and so jumps in and changes it back! I only found all this out by doing the coding I am working now.

The good news is I had a reply from the JEditor support guys and they really know their stuff. So in the JEditor JS Custom code option you can run something like ...

CKEDITOR.fn.page.myFunction = function() {
 console.log('testTEST');
}
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason) {
 if (reason === 'issueTableRowRefreshed' || reason === 'pageLoad') {
 CKEDITOR.fn.helpers.proxy.cooldown(CKEDITOR.fn.page.myFunction, null, 1000)(null);
 }
});

... although I found I instead had to look at context[0].id and/or context[0].className to determine when the components were loaded so I could then run my JS. :)

[Glenn Morrow]

Now how do I close this question? I can't accept my own answer! lol

[Alexey Matveev]

You can accept your own answer. Just make an answer and accept it :)

[Glenn Morrow]

Doh! Thanks. :)