Can't call own rest resource from javascript with ajax call

I am having some trouble getting my rest resource working. I have created my own rest resource to save some data from a web-panel. I am trying to preform a ajax call tot the rest resource but it won’t work and I have no clue what I’m doing wrong.

I’ve tested my resource in the API Browser and it works there but I have no clue how to make the ajax call.

My rest resource:

@Path("/")
public class PasswordResource{
    private final PasswordRepository passwordRepository;
    private final Gson gson = new Gson();

    @Inject
    public PasswordResource(PasswordRepository noteRepository) {
        this.passwordRepository = noteRepository;
   }

    @POST
    @Path("/password/{issue}")
    public void update(@PathParam("issue") String issueKey, String content) {
        PasswordDto passwordDto = gson.fromJson(content, PasswordDto.class);
        passwordRepository.saveUserContent(issueKey, passwordDto.getContent());
    }
}

My web-panel javascript:

AJS.toInit(function($) {
    AJS.$('#searchButton').click(function (){
        AJS.$.ajax({
            url:"jira/rest/passwordresource/1.0/password/" + document.getElementById("issueKeyInput").value,
            type: "POST",
            data:{"content": document.getElementById("passwordInput").value},
            dataType: "json",
            success: function(msg){
                alert(msg);
            }
        });
});

Still can’t get this to work. Is there someone that can help me with this? or atleast send me in the right direction?

I think your .url for your ajax call is incomplete from the looks of it.

AJS.params.baseURL + "/rest/passwordresource/1.0/password/" + document.getElementById("issueKeyInput").value

Thanks for your help! I changed the url like you said but it still doesn’t work. Do you happen to have any other ideas?

Edit: After some more testing I see that the call works. The issuekey is received but content stays empty. Do you happen to have a clue what my mistake is?

Did you try to step in the javascript code to make sure that the function is actually called? If so, what does the call returns (e.g. Network panel in Chrome Dev Tools)?

There are two other things that I see are different but you mentioned that you used your endpoints in the REST API browser so didn’t think they would be the solution.

The first is declaring that your endpoint consumes JSON, I do this by declaring my endpoint with an annotation.

@Consumes(MediaType.APPLICATION_JSON)
public void update(@PathParam("issue") String issueKey, String content) {

And your javascript will then declare that its data type is json:

$.ajax({
	...
	contentType: "application/json; charset=utf-8",
	...
};

The second difference is that I use rest models in my implementation, as they do in the tutorials. So essentially the ‘content’ variable in your endpoint is of your model type and you then access it like an object (as opposed to a String in the endpoint method).

public void update(@PathParam("issue") String issueKey, YourPasswordModel password) {
	String password = password.getContent();
}

I have model classes in my implementations which essentially has getters and setters.

@XmlRootElement
@XmlAccessorType(XmlAccessType.FIELD)
public class YourPasswordModel {
	@XmlElement private String content;

    public String getContent() {
    	return content;
    }
}

Subtly different, is that I use JSON.stringify(data), where data is just an object, in your case with a “content” field.

data = {};
data.content = $("#passwordInput");
$.ajax({
	...
	data: JSON.stringify(data),
	...
});

But I’m not sure if this is because I have a model… anyway, hope this helps you, otherwise I’m stumped!

Thank you so much! If tried your suggestions and it finally works!

For those interested it now looks as follows:

@Path("/")
public class PasswordResource{
    private final PasswordRepository passwordRepository;
    private final Gson gson = new Gson();

    @Inject
    public PasswordResource(PasswordRepository noteRepository) {
        this.passwordRepository = noteRepository;
   }

    @POST
    @Path("/password/{issue}")
    @Consumes(MediaType.APPLICATION_JSON)
    public void update(@PathParam("issue") String issueKey, PasswordResourceModel content) {
        String password = content.getContent();
        passwordRepository.saveUserContent(issueKey, password);
    }
}

My web-panel javascript:

AJS.$('#saveButton').click(function (){
        data = {};
        data.content = document.getElementById("passwordInput").value;

        AJS.$.ajax({
            url: AJS.params.baseURL + "/rest/passwordresource/1.0/password/" + document.getElementById("issueKeyInput").value,
            type: "POST",
            data:JSON.stringify(data),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(msg){
                console.log("Success !");
            }
        });
    });

PasswordResourceModel

import javax.xml.bind.annotation.XmlAccessType;
import javax.xml.bind.annotation.XmlAccessorType;
import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;

@XmlRootElement
@XmlAccessorType(XmlAccessType.FIELD)
public class PasswordResourceModel {
    @XmlElement
    private String content;

    public String getContent() {
        return content;
    }
}

HI Jeffrey,

I trying to develop a rest plugin in JIRA .
I am not able to invoke rest service using ajax call in .vm file ,we have attached code snippet along with the error received while making the ajax call.

I am facing ParseException at the time of invoking web service below is the code snippet

#[[
$(’#getMed’).click(function (){
$.ajax({
url: AJS.params.baseURL + “/rest/helloworld/1.0/usersList/10101”,
type: “GET”,
dataType: “json”,
contentType: “application/json;”,
Accept:“application/json”,
authorization:“Basic YWRtaW46YWRtaW4=”,
success: function(msg){
console.log(“Success !”);
}
});
});
]]#

Thanks & Regards,
Amit