Ajax call does not work in mvc 4

Question

I am pulling my hair. For the love of my life I cannot make this work. I have a form in my view:

 <div id="cancel" class="cancel">
    <form method="post" class="cancelForm">
     <input type="hidden" class="cancelId" name="cancelId" value="@appliedLvl.LeavesId" />
    <input id="cancelMe" class="cancelMe" type="submit" value="Cancel"/>
  </form>
</div>

The javascript

$(document).ready(function () {

$(".cancelForm").submit(function () {
    var MYcancelId = $('.cancelId').val();

    $.ajax({
        type: "POST",
        url: "/Home/Cancel",

       success: function (result) {
            alert("ok");
        },
        error: function (request, status, error) {
            debugger;
            confirm(request);
        }
    });
  })
});

And the Controller

    [HttpPost]
    public ActionResult Cancel(Guid cancelId )
    {
        //do stuff here
        return PartialView();
    }

I always get into the error function of the ajax. No matter what I have tried. This same javascript code works perfectly on my php projects. Don't know what is wrong here. Thanks in advace for any help.

Edit

The error here was the fact that I was expecting in the Action a Guid not a string!

Answer 1

You aren't passing in a cancelId parameter, so it isn't seeing your controller method.

$(document).ready(function () {

$(".cancelForm").submit(function () {
    var MYcancelId = $('.cancelId').val();

$.ajax({
    type: "POST",
    url: "/Home/Cancel",
    data: { cancelId = MYcancelId },
   success: function (result) {
        alert("ok");
    },
    error: function (request, status, error) {
        debugger;
        confirm(request);
    }
});
})
});