jQuery in JIRA

David Craig February 27, 2012

Having a wierd problem in JIRA at the moment. When Im on the Edit Issue page, If I have this line of code in my velocity template (edit.vm):

<script type="text/javascript" src="$req.contextPath/download/resources/com.company.jira.plugins.customer:jqueryautocomplete/jquery.min.js"></script>

then the down arrows next to the links at the top of the page for 'Dashboards','Projects','Issues' etc... no longer work. However if i remove that line from my velocity template then the arrows start working again.

It is important to note that when i remove this line from my velocity template my jQuery autocomplete input box stops working which is to be expected as I am removing the jquery.js from being included. Also when i include the above line the jQuery autocomplete box works flawlessly, its just that the arrows don't work as stated above. Obviously its crucial that the edit page has this jquery.js script included in a way that the arrows work as well.

Any suggestions/help as to how i can include the jQuery library are much appreciated. Thanks in advance.

6 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

1 vote
Answer accepted
David Craig February 28, 2012

Solved! The problem was that JIRA already included jQuery Library v1.4.2 so when i went to include a newer library v1.7.1 there was a conflict between the two which would render the JIRA javascript unusable and since the JIRA javascript controlled the dropdown arrows, they no longer worked.

I also had to slightly modify my javascript code to work with the older v1.4.2 jQuery, but all works well now.

3 votes
Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
February 28, 2012

Yep, JIRA already ships with jQuery. If you want to load an additional copy of jQuery (say a different version), then you need to use the "noConflict" approach to loading jQuery and use a different global var to access it (not '$').

Deleted user March 16, 2016

But where is the best place for doing that? I have tried create that global var

var myjQuery= jQuery.noConflict();

in few places e.g. in

  • resource JS file included after including jQuery in atlassian-plugin.xml
  • template file in <script> section as the first JavaScript command
  • also in head-resources.jsp JIRA server-side file

And whole the time I have some errors in JS browser console like:

Uncaught TypeError: Cannot read property 'msie' of undefined

or

Uncaught TypeError: jQuery.RecurringPromise is not a function

 

And those errors block proper working of top drop-down JIRA menu with "Projects", "Issues" etc. Those menus just do not open.

 

How can I use my own jQuery version in any JIRA plugin I develop? If it is at all possible.

 

 

Ferry August 24, 2016

hi miroslaw, 

I have been using JSTree along with JQuery 2.2.1 in my plugin without any problem for JIRA 6.4.12.

What you can do is either declare a context: but this might not work.

The better solution which will work in any other plugin development context is like what Atlassian suggested using the 

jQuery.noConflict(true);


So if you are working on item which required a later jquery version. you can do

 

var my_JQuery = jQuery.noConflict(true);

 Instead of using $ which you usually do when accessing the $ variable.

You will use my_JQuery

For example, in JSTree context. I replaced the $ to the variable you created with jQuery.noConflict(true)

&lt;script&gt;
	var my_JQuery = jQuery.noConflict(true);
    JIRA.ViewIssueTabs.onTabReady(function() {
        my_JQuery('#tree').jstree().bind("select_node.jstree", function (e, data) {
             var href = data.node.a_attr.href;
             document.location.href = href;
        });
    });
&lt;/script&gt;


For more information about how it works, you can probably read https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page

0 votes
Deleted user March 15, 2016

I have the same problem while trying develop JIRA plugin which use other jQuery than embedded one.

Target JIRA version is 6.4.12, Atlassian SDK version is 6.2.2.

Embedded jQuery version is 1.7.2.

 

web-resource definition:

&lt;web-resource key="jquery-resources" name="jquery Web Resources"&gt;
 &lt;!-- jQuery --&gt;
 &lt;resource type="download" name="jquery-2.2.1.min.js"
 location="/js/jquery/jquery-2.2.1.min.js" /&gt;
&lt;!-- jstree --&gt;
 &lt;resource type="download" name="jstree.min.js" location="/js/jsTree/jstree.min.js" /&gt;
 &lt;resource type="download" name="style.min.css"
 location="/js/jsTree/themes/work-scheduler/style.min.css" /&gt;
 &lt;resource type="download" name="32px.png"
 location="/js/jsTree/themes/work-scheduler/32px.png" /&gt;
 &lt;resource type="download" name="40px.png"
 location="/js/jsTree/themes/work-scheduler/40px.png" /&gt;
 &lt;resource type="download" name="throbber.gif"
 location="/js/jsTree/themes/work-scheduler/throbber.gif" /&gt;
&lt;!-- json-viewer --&gt;
 &lt;resource type="download" name="jquery.json-viewer.js" location="/js/json-viewer/jquery.json-viewer.js" /&gt;
 &lt;resource type="download" name="jquery.json-viewer.css" location="/js/json-viewer/jquery.json-viewer.css" /&gt;

 &lt;/web-resource&gt;

 

using web-resource in template:

$webResourceManager.requireResource("pl.jiratest.jira.test:jquery-resources")
#customControlHeader ($action $customField.id $customField.name $fieldLayoutItem.required $displayParameters $auiparams)
...
 &lt;script type="text/javascript"&gt;
...
var jsonNodes = $('input#values').val();
...
&lt;/script&gt;

 

jQuery code from above template works fine but using both jQuery versions causes some kind of JS errors like:

Uncaught TypeError: Cannot read property 'msie' of undefined

and now I have the same problem as @David Craig mentioned:

then the down arrows next to the links at the top of the page for 'Dashboards','Projects','Issues' etc... no longer work

 

Included jQuery versions debug from console:

$.fn.jquery
"2.2.1"
AJS.$.fn.jquery
"1.7.2"

 

I googled a lot of net resources and tried solutions with jQuery.noConflict(); or with :

(function($) {
    ...
})

 

Can someone help me with this problem? How can I separate using this two versions of jQuery? How can I develop properly any JIRA plugin which use delivered jQuery version with it?

 

0 votes
Mizan
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 27, 2012

Hi David ,

Your javascript "jquery.min.js" i guess is disturbing the javascript of Jira which is responsible for the drop downs .. have a look at this

Hope it helps :)

David Craig February 27, 2012

Thanks Mizan, however i tried moving the inclusion of my scripts to the end of my velocity file but the problem is still there :(. Any other ideas?

Mizan
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 27, 2012

I think there is something within your javascript which is preventing the dropdowns . Keep a copy of your script as a backup and edit the existing script . try to include the following code in your javascript .

<script type="text/javascript" src="jQuery.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
          // my jscript
     }
  </script>

David Craig February 27, 2012

Sadly that didnt work either Mizan. I agree there is something definitely distrubing the JIRA javascript...any more ideas? Does JIRA have the jQuery libraries already? Does JIRA already use jQuery somewhere? If so i guess i could probably reuse JIRAs existing library if there is one? Thanks for the help Mizan

0 votes
tousifs
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 27, 2012

May be the issue is related to the browser. Can you check with diffrent browser.

David Craig February 27, 2012

I tried in Chrome and IE, same problem :(

0 votes
tousifs
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 27, 2012

Hi David,

add entry in the atlassian-plugin.xml

I think so we have implemented webwork for action on the link.

when we are clicking the link action or web work file gets executed.

Define the js file which will implement your business logic.

<web-resource name="Resource_Test" key="resources">
<dependency>com.atlassian.auiplugin:ajs</dependency>
<resource type="download" name="release.js" location="release.js" />
</web-resource>

this resource or js file will do the.

now you can simply import same content or files in you'r vm file.

$webResourceManager.requireResource("artID:resources-versions")

the js will be available to same file where you can do manipulation as you required.

or you need to remove <script type="text/javascript" src="$req.contextPath/download/resources/com.company.jira.plugins.customer:jqueryautocomplete/jquery.min.js"></script>

entry from you velocity and add $webResourceManager.requireResource("artID:resources-versions")

and check it should work.

David Craig February 27, 2012

hi tousif,

I tried that just now and it does import the files successfully however i still have the problem where i can't click the down arrows... There seems to be some sort of conflict with the jquery.min.js....do you have any other suggestions?

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events