0

So I am using the play framework and trying to make and Ajax POST call to submit a JSON of product_id and quantity to my action that will add it to the current users cart. I have tried many different things and every time my JSON data is null in the controller. I am really stuck and cant figure out why.

HTML where the form I want to submit is:

@(product: Product)

<li data-task-id="@product.id">
    <img src="@product.imageUrl" alt="No Image Available">

    <h2>@product.name</h2>

    <!-- Price Display -->
    @if(product.price != 0.0){
        <span class="product-price">@product.price</span>
        <form name="ajaxform" id="ajaxform" action="@routes.Item.addToCart()" method="POST">
            <input type="text" name="id" value="@product.id" hidden="true"/> <br/>
            <input type="text" name="qty" value ="1" /> <br/>
            <input type="submit" name="submit"/>
        </form>

    }
    @if(product.price == 0.0){
        <span class="available-in-store">Only Available in Store</span>
    }
</li>

Here is my javascript:

$("#ajaxform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: 'POST',
        dataType : 'json',
        contentType:'application/json',
        data : {postData: JSON.stringify(postData)},
        success:function(data, textStatus, jqXHR)
        {

        },
        error: function(jqXHR, textStatus, errorThrown)
        {

        }
    });
    //e.preventDefault();   //STOP default action
});

$("#ajaxform").submit(); //SUBMIT FORM

Yes I have tried making data : postData and not using stringify. It had the same result.

Here is my action in my controller that handles the request:

public static Result addToCart(){
        JsonNode jsonNode = request().body().asJson();

        if(jsonNode == null){
            return badRequest("Expecting JSON data");
        }
        //Customer currCustomer = Customer.find.where().eq("email", session().get("email")).findUnique();
        //System.out.println(cartItemForm.data().get("productId"));
        //Product product = Product.find.byId(productId);
        //ShoppingCart cart = new ShoppingCart(currCustomer, product, quantity);
        //cart.save();
        //currCustomer.shoppingCartList.add(cart);
        return ok("Item Added to Cart");
    }
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
wwoodal1
  • 313
  • 3
  • 13
  • success:function(data, textStatus, jqXHR){ alert(data);} test this and see what you will get – Mohamed-Yousef Dec 13 '14 at 01:38
  • for some reason even when i set content type it always sends in www-urlformencoded instead of changing to json. I fixed that and just use that type but still dont know why the type doesnt change – wwoodal1 Dec 13 '14 at 01:47
  • http://stackoverflow.com/questions/4159701/jquery-posting-valid-json-in-request-body?rq=1 may help – Mohamed-Yousef Dec 13 '14 at 01:50
  • Edit: so the reason i am not able to change the content type is because the ajax is never being used. I just removed the – wwoodal1 Dec 13 '14 at 04:35
  • From what I see you are not using preventDefault (its commented out), it should be first statement in you JS handler. As $ajax method is asynchronous the form is probably submitted first whithout ajax call. – Kris Dec 14 '14 at 18:41

0 Answers0