Post form via ajax and get a form object in play framework java

Question

I am using play framework 2.3.8 java and using ajax to submit a form but I am not able to get the Form object from that request.My problem is explained below. I have a Model

@Entity
public class Permission {
    @Id
    @Column(name = "id", nullable = false)
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String per1= "off";

    private String per2= "off";

    // getter setters
}

my form

<form id="form-permission">
    <!--Setting "on" and "of" value from js-->
    <input type="checkbox" id="per1" name="per1">
    <input type="checkbox" id="per2" name="per2">
    <input type="submit" >
</form>

$('#form-permission').on('submit',function(){
    var uid=// id to update

    myJsRoutes.controllers.MyController.updatePer(uid).ajax({

    data : $("#form-permission").serialize(),
        success : function(data) {
            console.log(data);
    });
    return false;
});

When submitting form without ajax then play binds that request data to model Object and we can get Form object like

Form<Permission> permissionFormData = Form.form(Permission.class).bindFromRequest();

and we can get the object by permissionFormData.get() since the request are same for post form with ajax and without ajax In the case of ajax I am doing the same thing but when I try to get Entity members from it gave me a No Value exception with

Logger.info("---Permission one is "+permissionFormData.get().getPer1());

What am I doing wrong here?And is there any other approaches for getting an object from the form in play while using ajax.I want the object here instead of JSON because at the end I have persisted the object with JSON I have to iterate all of its key value and create an object.

EDIT: when I try simply ajax it gave me the same exception

$("#form-permission").on('submit', function() {
    var $this = $(this);
    var uid=//some uid
    $.ajax({
        url: '/account/permission?id='+uid,
        data: $this.serialize(),
        type: 'POST'
    });
    return false;
});

The approach I am currently using is passing a JSON from ajax request and in my controller I do Json.fromJson() to convert JSON from entity object but I just want to know why AJAX request is behaving differently than normal form submit ie why I am not able to get an entity from request when both requests are of the same type.

Thanks in advance.

Answer 1

Step 1: Rename all private properties to public and remove getter and setter methods. eg

private String per1= "off"; to public String per1= "off";

Step 2. Ensure your route file is a GET request

Step 3. Try using basic Jquery ajax to test run.

$("#form-permission").on('submit', function() {
   var $this = $(this);
   $.ajax({
     url: '/url/to/controller',
     data: $this.serialize(),
     type: 'GET'
   });
   return false;
});

You can always should from GET to POST at your convenience, kindly ensure you change your JQuery and html form method to POST value and also your Playframework routes file to POST.

Hope this works!

Answer 2

Well, the other approach which you are looking for where you want the object instead of Json at the server side --
You can always de-serialize it. Tools like gson and fasterxml json are there and something you should be looking into. This way there is no extra effort in creating the entities you want to persist.
HTH.