AJAX Call from velocity template

Jira Development Jira Server
, , ,
#1

Hi all,

I’m new to plugin development so i need to ask, does anyone know how i can make an ajax call from javascript in a velocity template so i can update a field on a form in real time when the user selects an option in a drop down list box?

so say i select a value in a dropdown, i want to call my java method have it perform some action and send the result back.

I’ve had a look and I’ve read i should be using an ajax call, but i’ve no idea how to set this up, or even get the url for my class. So if anyone could help me out or even provide some documentation that woulbe be great!!

Thanks

#2

Hi Mick.
Velocity is rendered on the sever, and delivered as HTML to the browser. Its usually best practice to package javascript as a separate web-resource in your addon so that it may be cached. You may be wondering how to get info from your ‘page’ to your static ‘script’, a trick you can use is to embed META tags with key/value pairs, then look those up from the script.

As the HTML is rendered on the server, its not possible to ‘callback’, what you have to do is create a javascript file that is loaded in the context of the template you are viewing (JIRA will then download the script for you). Your jQuery javascript running on the client can then hook into the HTML form component in the browser, and on selection, call a REST service that your addon provides to do whatever.

		 	AJS.$("#yourselect").change(function(event) {
		 		var selectedVal=AJS.$(this).val();
		 		console.log("selected "+selectedVal);
		 		callRest(selectedVal);
		 	});

See:

4 Likes
#3

Hi Andy thanks for your reply! If thats the case how do i get jira to load the java script file?

Ive added a web-resource in my atlassian plugin file and created a stand alone js file, but how do i bind the javascript file to the vm page?

Thanks!!

#4

how do i get jira to load the java script file?
your velocity page needs to require it, see the first link in my last, define a JS file, in a context, then include that context in your velocity template:
$webResourceManager.requireResourcesForContext(“com.acme.plugin.fancy-context”)

If you put something like this in, if you get it right, when the HTML page is downloaded, the script will be batched along with the page, and run when the page is ready. This is where your ‘live’ content goes.

AJS.$(document).ready( function(){
	console.log("loading...");
}

how do i bind the javascript file to the vm page?

You don’t. Velocity is like loo-roll, use it and then forget it, it’s there only to render the HTML response to the client. There is nothing to ‘bind’ back to from the client. What you need to have is javascript that is loaded, using data in the rendered page, to call back to REST services to get more data, and dynamically modify the HTML page further.

2 Likes
#5

this is what I need to solve now, have you solved this problem?

#6

It is also OK to write the javascript in the sample.vm file,just like writing a jsp file.

#7

Its considered bad practice to wedge blocks in vm output. It’s best practice to put it in a .js file, and require the resource in the vm file so its included in the batch download, which is then executed on page load.

1 Like