Missed Team ’24? Catch up on announcements here.

×
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

how to import jquery.tablesorter.js in veolicty template of jira plugin

Sushant2
Sushant February 13, 2013

I am trying to sort table based on column header using tablesorter jquery plugin(i.e jquery.tablesorter.js). I have web-resource for jquery.tablesorter.js in the plugin descriptor file and I am using webResourceManager.requireResource() with proper web resource key to import the resource in my velocity template. In my velocity template I am using $("#reportfields").tablesorter(); to sort tables where my table id is reportfields. still I am not getting srting functionality to this table.

Answer
Watch
Like Be the first to like this
1093 views

3 answers

1 accepted

0 votes
Answer accepted
Boris Georgiev _Appfire_
Boris Georgiev _Appfire_
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.
Get recognized
February 14, 2013

I've tried it and it worked. See example below:

atlassian-plugin.xml

<web-resource key="example-resources" name="Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource type="download" name="jquery.tablesorter.min.js" location="/js/jquery.tablesorter.min.js"/>
    <context>example</context>
  </web-resource>

velocity page - example.vm

<html>
	<head>
		$webResourceManager.requireResource("com.exmaple.plugin:example-resources")
		<script type="text/javascript">
			var $ = AJS.$; 
			$(document).ready(function() { 
					$("#myTable").tablesorter(); 
					$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
				} 
			); 
    
		</script>	
	</head>
	<body>
		<div>
			<table id="myTable" class="tablesorter"> 
			<thead> 
			<tr> 
				<th>Last Name</th> 
				<th>First Name</th> 
				<th>Email</th> 
				<th>Due</th> 
				<th>Web Site</th> 
			</tr> 
			</thead> 
			<tbody> 
			<tr> 
				<td>Smith</td> 
				<td>John</td> 
				<td>jsmith@gmail.com</td> 
				<td>$50.00</td> 
				<td>http://www.jsmith.com</td> 
			</tr> 
			<tr> 
				<td>Bach</td> 
				<td>Frank</td> 
				<td>fbach@yahoo.com</td> 
				<td>$50.00</td> 
				<td>http://www.frank.com</td> 
			</tr> 
			<tr> 
				<td>Doe</td> 
				<td>Jason</td> 
				<td>jdoe@hotmail.com</td> 
				<td>$100.00</td> 
				<td>http://www.jdoe.com</td> 
			</tr> 
			<tr> 
				<td>Conway</td> 
				<td>Tim</td> 
				<td>tconway@earthlink.net</td> 
				<td>$50.00</td> 
				<td>http://www.timconway.com</td> 
			</tr> 
			</tbody> 
			</table> 
	        </div>      	        
	</body>
</html>

Note that you should not include another copy of jQuery in the file, but use the one from AUI.

View More Comments
Sushant2
Sushant February 17, 2013

Boris, Thanks for your reply. it worked.
But it created one more problem with context.
I am displaying JIRA deafult header toolbar by using follwing in my velocity template

<meta name='decorator' content='atl.general'/>.

But its not functioning properly whenever I use Jquery-tablesorter web resource in my velocity template.
so far I have not used ant conetxt in my Jquery-tablesorter web resource.

Like
Reply
0 votes
Boris Georgiev _Appfire_
Boris Georgiev _Appfire_
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.
Get recognized
February 14, 2013

What about the second suggestion?

Reply
0 votes
Boris Georgiev _Appfire_
Boris Georgiev _Appfire_
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.
Get recognized
February 13, 2013

Here're a couple of suggestions:

  1. Are you getting any errors in the browser script console log ?
  2. I think that by default the "$" alias is not mapped to jquery,so try one of the approaches below:
AJS.$("#reportfields").tablesorter()

or 

$= AJS.$;
$("#reportfields").tablesorter();

View More Comments
Sushant2
Sushant February 14, 2013

Hey Boris,
I tried your suggestions, but still I am not able to sort my table. Following is my updated script.

<script type="text/javascript">
$(document).ready(function(){
AJS.$("#tp").html("This is Hello World by JQuery");
AJS.$("#reportfields").tablesorter();
});
</script>

My browser script console logs showing following errors:

Error: TypeError: F(...).on is not a function
Error: TypeError: jQuery.namespace is not a function
Error: TypeError: JIRA.Forms is undefined
Error: TypeError: jQuery.aop is undefined

Like
Renjith Pillai
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.
Get recognized
February 14, 2013

It's AJS.$(document).ready

Like
Sushant2
Sushant February 17, 2013

Renjith,

AJS.$(document).ready doesnt work.
I used
<script type="text/javascript">
$(document).ready(function(){
AJS.$("#tp").html("This is Hello World by JQuery");
AJS.$("#reportfields").tablesorter();
});
</script> and it worked.
But whenever i replace $(document).ready(function() with AJS.$(document).ready, it doesnt work

Like
Reply

Suggest an answer

Log in or Sign up to answer
Product apps
Apps & Integrations
TAGS
AUG Leaders

Atlassian Community Events

    See all events