How to write jQuery-based script in JIRA6.1

Akira Tsuchiya
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.
September 27, 2013

The jQuery-based JavaScript, which works in JIRA 6.0.x, does not work in JIRA 6.1 with the error below.

Uncaught TypeError: Property '$' of object [object Object] is not a function

The testBalloon function is defined as below.

$.fn.testBalloon = function($arguments) {

...

};

I want to know the jQuery JavaScript guideline in JIRA 6.1.

4 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
MB
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.
September 27, 2013

This happened to me also. I believe it is a bug and should be reported. I've tried using my own JQuery version (added a jquery.js file to my resources), but that introduced more issues. I believe the proper way to resolve this is to fire a bug report on JIRA issue tracker.

If you want to use jquery related stuff in your JIRA code, instead of "$" use "AJS.$". That will use the embedded jquery, which AJS uses. If you want to use your own version of jquery, and not the one that AJS already provides, then you need to wrap your jquery code inside the function like this:

(function($) {
	$.testBalloon = ...
})

Of course, you need to add your jquery js file into resources (atlassian-plugin.xml) first.

Akira Tsuchiya
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.
September 27, 2013

Could you be more precise about your steps?

I tried to use my own jquery.js but it was unsuccessful.

I described the reference below in the atlassian-plugin.xml.

But I cannot use my own jquery.

<web-resource key="issue-resources" name="Issue Resources">

<resource type="download" name="jquery.js" location="/js/jquery.js"/>

<resource type="download" name="luminousBalloon.js" location="/js/testBalloon.js"/>

</web-resource>

MB
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.
September 27, 2013

Basically this:

  1. add a resource in your atlassian-plugin.xml file
  2. copy the jquery.js in your resources directory
  3. include your resources in your servlet, gadget, whatever
  4. wrap the raw jquery calls into that function, to avoid namespace conflicts and redefinition of "$"

If you experience any problems, try searching the net for those errors, to polish out conflicts that might arise because of using 2 different jquery fws in the same page.

Akira Tsuchiya
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.
September 28, 2013

Hi, Mladen.

I found your method is useful.

But a slightly completed sentence like below thows Velocity ParseError.

var $balloon = $.data(this, "balloon");

I want your advice on this.

MB
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.
September 28, 2013

It's a little bit more tricky than it looks like, if you use a Velocity Template. Please read this SO question just to get the idea how big of a problem is to escape the dollar sign (at least prior to v1.7).

I would suggest that you put your JavaScript code in a js file and just include it in your template with the SCRIPT html tag to avoid ecasping issues.

Akira Tsuchiya
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.
September 29, 2013

Thank you, Mladen.

Finally it worked.

2 votes
Renjith Pillai
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.
September 27, 2013

Is AJS.$ working?

Akira Tsuchiya
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.
September 27, 2013

Renjith.

Thank you for your advice.

But I am not sure about 'AJS.$'.

I describe below the contents of jQuery-related files.

Where should I prepend the 'AJS.'?

I tried several patterns with no success.

1. The content of testBalloon.js

;(function($) {

$.testBalloon = {

...

};

$.fn.testBalloon = function($arguments) {

var $target = $(this);

...

};

})(jQuery);

2, The content of the target Velocity file

<script> $(function() {$('#1').testBalloon({...}); </script>

<div id="1">test</div>

MB
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.
September 27, 2013

I believe that Akira's error is being fired from the AJS itself, which happened to me a couple of days ago too.

Akira Tsuchiya
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.
September 28, 2013

Hi, Renjith.

I understood that AJS.$ works.

But my js is complecated.

Could you let me know any online documents on Atlassian jQuery?

IshanL
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.
October 21, 2013

I dont know why jira changes like this, this is the case with 5.x and now it seems the case with 6.1

0 votes
Andreas Neuberger January 19, 2014

Hi dudes,

I found out that the jQuery Lib is only working with the AJS.$ and only when you create a own .js-file which contains the code. In older versions of JIRA it was possible to add the code for example in the announcement banner. But that was disabled due to security reasons.

So, if you want to use your old js code, just create a js-file which contains it and replace every $('selector') with AJS.$('selector').

Don't forget to link the JS file for example in the announcement banner.

That's it!

0 votes
IshanL
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.
October 21, 2013

I dont know why jira changes like this, this is the case with 5.x and now it seems the case with 6.1

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