Using jQuery with IE9 and JIRA 6

[Gareth White]

I'm having some problems using jQuery with Internet Explorer in JIRA 6.

I have some code like the following in the .vm file for my custom field. This works OK in Firefox, Chrome and IE10, but in IE9 it doesn't seem to do anything - i.e. clicking the link does not display the dialog. If I uncomment the "alert" and reload the page, the alert dialog comes up before the fields are visible. It almost seems like the script is being run before the page is fully loaded.

I tried wrapping the script inside "AJS.$(document).ready()" but it didn't seem to make a difference. Any ideas?

<a href="#" class="displayDialog">Display Dialog</a>

<script>
// alert("test");

AJS.InlineDialog(AJS.$(".displayDialog"), "myDialog", 
    function(content, trigger, showPopup) {
        content.css({"padding":"20px", "width":"450px"}).html(
            'test'
        );
        showPopup();
        return false;
    }
);
</script>

Another strange thing I noticed is that in IE9, the URL of an issue is different to the other browsers. Instead of the usual "http://jira/browse/ABC-1234" it looks like "http://jira/i#browse/ABC-1234", and when you load the page it appears to first load the Issue Navigator and then dynamically load the issue details. I'm guessing this is related to the problem I'm having above.

[Gareth White · Accepted solution]

OK, this seems to work in all browsers:

<script type="text/javascript">

    var initialised = false;

    JIRA.ViewIssueTabs.onTabReady(function() {
        if (!initialised && AJS.$("#myLink").length != 0)
        {            
            initialised = true;
            // myLink is now loaded so we can add a click handler etc. to it
   
        }
    });
    
</script>

The "initialised" flag is to avoid doing the initialisation more than once in browsers where onTabReady is called multiple times after the elements are loaded.

[CR]

What should I do in case there are no Tabs available?

[MB]

I think onTabReady() is fired when each of the existing tabs have been loaded successfully, so you just need to check which one of those callbacks relate to your tab. So, just check if the element you are after exists, which will be an indicator that the tab you are after is now loaded.

[Gareth White]

Thanks for the suggestions.

Using AJS.$(function() { alert("test"); }), the alert still comes up before the page has loaded in IE. When I look at it in the script debugger, it shows up as "script block(3)" rather than as part of the page defined in my .vm file. It's almost as if JIRA is extracting the script blocks from the file and running them separately (and before the page has finished loading).

I tried onTabReady, and in IE this is called around 5-6 times before the page has finished loading, and one final time after it has loaded. In Firefox and Chrome it is only called 3 times. I could potentially inspect the parameter passed to it and try to determine if it corresponds to the last call, or maybe keep trying to access the main part of the page until the elements are loaded. It doesn't seem like a very reliable solution though.

What I really want is an "onPageReady" event that JIRA fires once when the page has finished loading (and regardless of browser).

[MB]

Just to note, one more way to define the code to be run when the page is fully loaded and ready for dom traversal, in jquery, is to use "$(function() { // code here });" or using AJS:

AJS.$(function() { /* code here */ });

Now, I've tried to research a little bit on this topic and found this article: Loading Issue Tab Panels with AJAX. There, it says:

If your plugin contains Javascript that needs to execute when the tab is loaded, it should register a callback with JIRA.ViewIssueTabs.onTabReady() instead of using AJS.$(document).ready().

So, instead of trying with $(document).ready(), try with this:

JIRA.ViewIssueTabs.onTabReady(function() {
    AJS.$('.tab-content').find('.project-activity:gt(0)').addClass('hidden');
})

I hope it helps.

[Gareth White]

Unfortunately I don't know where the ajax call is being made as it's somewhere deep within the JIRA UI code.

The workaround I've gone with for now is to use the "on" syntax (see above) to add a click handler to the elements before they have been loaded. On the first click I then set up the dialog and remove the original handler:

AJS.$(document).on("click", "#myLink", function(event) {  
    AJS.InlineDialog(AJS.$("#myLink"), "myDialog", 
            function(content, trigger, showPopup) {
                // Show the dialog
                return false;
            });

    AJS.$(document).off("click", "#myLink");
    AJS.$("#myLink").trigger("click");
          
    return false;
});

It's pretty clunky but does the trick for now.

[MB]

Since the content has been added through the ajax call, you need to stack your function call on the OnSuccess event of that ajax call. So, the real problem is to find that ajax call and attach your function call on its OnSuccess event.

For the workaround (which I don't suggest, but just mention it as a last resort) you might use setTimeout() javascript method, to execute your code every X seconds, checking if the element exists (thus, the page has been loaded through the ajax) and then execute the rest of your code and turn off the timer.

[RambanamP]

try with this

<script type="text/javascript">  
jQuery(document).ready(function($) {
//add your code here
});
</script>

or tyr with this

window.onload = function() {
        alert("Test");
     }

[Gareth White]

Thanks, but unfortunately that doesn't work in IE9. Because JIRA loads the bulk of the "view issue" page asynchronously in IE9, the document.ready handler gets called too early and the elements I want to access aren't loaded yet.

[RambanamP]

i have update my answer, check now!!

[Gareth White]

Sorry, that doesn't seem to work either.

[Gareth White]

The problem is that in IE9 the main content of the "view issue" page seems to be loaded using AJAX. As a result, any script I put inside a "<script>" element seems to run at the wrong time - i.e. before the page has finished loading. In other browsers it works fine.

I've tried some other approaches such as using "AJS.$(document).ready()", binding to NEW_CONTENT_ADDED, NEW_PAGE_ADDED or "dialogContentRady", and moving the script out into a separate file and declaring it as a "web-resource". Unfortunately none of these approaches fixed the problem or worked consistently in the different browsers.

I found I could use something like this to add a click handler to an element before the page has finished loading:

AJS.$(document).on("click", "#myElement", function(event) {
    // do something
});

However, it doesn't help in the case of AJS.InlineDialog, where you need to pass it an element that already exists.

What I really want is just an easy way to run a script once the "view issue" page has finished loaded, that works in all browsers. i.e. Something like "JIRA.ViewIssueTabs.onTabReady()", but for the main "view issue" page, not tabs.

[Boris Berenberg]

You are correct that the behavior in IE8 and 9 will be different from other browsers.

Where a normal URL would be: /browse/JRA-123 IE will use: /i#browse/JRA-123

And where it would be: /issues/?jql=issuetype = Bug IE will use: /i#issues/?jql=issuetype = Bug

This is because IE8 and 9 do not support URL rewriting via JS. Not sure how this affects your code, but hopefully this helps.