Ajax call working on Google Chrome but not on IE 11

Question

I am developing a RESTFul web service project which has a POJO as below:

@XmlRootElement
public class Input {
    //variable declarations 

   public Input(){
      //default constructor 
   }

   //constructor no 1
   public Input(String LR, double ECH,double CSH,String APP) {
        this.LR = LR;
        this.ECH = ECH;
        this.CSH = CSH;
        this.APP = APP;
    }

    //constructor no 2
    public Input(String LR, double ECH,double CSH,String APP,...) {
        this.LR = LR;
        this.ECH = ECH;
        this.CSH = CSH;
        this.APP = APP;
        //constructor of all other parameters including these
    }

//getters and setters method below.
}

My ajax is getting called on this button:

<button type="submit" onClick='functionname();' class="btn btn-primary" ><span class="glyphicon glyphicon-lock"></span>Function</button>

The Controller class I have is as follows:

@Path("/input")
public class InputResponse {
InputService inputservice = new InputService();

@PUT
@Path("/approve")
@Produces(MediaType.APPLICATION_JSON)
public void approveInputRecord(Input obj) throws Exception{
    String LR = obj.getLR();
    double CSH = obj.getCSH();
    double ECH = obj.getECH();
    String APP = obj.getAPP();
    Input input = new Input(LR,CSH,ECH,APP);
    input = inputservice.approveTransaction(input);
    }
}

The Service Class for the same is as below:

public class InputService {

CallableStatement stmt;
Statement commitStmt;

public InputService(){
    //database connection
}

public Input approveTransaction(Input input) throws SQLException {
    commitStmt = dcc.con.createStatement();
    stmt=dcc.con.prepareCall("BEGIN APPROVRTRANSACTION(?,?,?,?); END;");
    stmt.setString(1, input.getLR());
    stmt.setDouble(2, input.getECH());
    stmt.setDouble(3, input.getCSH());
    stmt.setString(4, input.getAPP());
    stmt.execute();
    commitStmt.executeQuery("COMMIT");
    return input;
}
}

Inside my JAVA Script my ajax call to above is:

    var obj = {
    LogReference : logreference,
    EuroclearHoldings:euroclearholdings,
    ClearstreamHoldings:clearstreamholdings,
    Approver : loginXPID
}
var jsonobj = JSON.stringify(obj);
$.ajax({
    url:'./webapi/input/approve',
    type: 'PUT',
    data:jsonobj,
    cache:false,
    contentType: 'application/json',
    dataType:'json',
    success:function(data)
    {
        alert('success');
    },
    error:function(xhr,textstatus,errorthrown){
        alert(xhr.responseText);
        alert(textstatus);
        alert(errorthrown);
    }
},'json');

Having this as my code my application is working fine on Google Chrome but sometimes works and sometimes not on Internet Explorer 11. This is the strange behavior. And the other thing which I am unable to get is even if it works on Chrome the ajax call always getting the alerts in error. Can anybody please explain why is it so? And how do I solve it? Any help much appreciated. Update

Here is the output on network --> Response tab on chrome when error is thrown. But despite that I still get the output.

Many Thanks

Answer 1

As I can see your Button type="submit". If it is inside the form tag then call the ajax request in action of the file. As I can see from above comments this might be the issue. As you are submitting something this changes to a POST request and not GET request so its giving the error method not allowed. And looking at the solution just change the Button type='button' or call the ajax on the action of form tag. It should work.