Ajax doesn't trigger success - ASP

Question

First of all I looked trough a lot of same questions on stack. My problem is as follows:

I'm working on a school project to make a card game (ginrummy) In this web application (mvc 4) I want to move cards to sets (right side) and I want to do this with ajax.

added a picture to clearify.

The ajax perfectly triggers the controller and perfectly bring over the data I put through. In firebug I checked the response and it even added a card to the right correct set

The problem is when the ajax is done, it doesn't trigger the succes function neither it updates the page.

Note: This is my first time I work with ajax. The complete function returns OK status.

Now the code:

View:

      var GameId = @Model.Id
        $(function () {
            $(".droppable").droppable({
                drop: function (event, ui) {
                    var id = ui.draggable.find("a").attr("data-CardId");
                    var location = droppableId = $(this).attr("id");

                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("ChangeCardLocation")',
                        data: { 'id': GameId, 'cardId': id, 'location': location },
                        succes: function () {
                            alert('wow');
                        },
                        complete:function (){

                        }
                    });


                }
            });
        });

Controller:

  public ActionResult ChangeCardLocation(int id, int cardId, Location location)
        {
            var game = db.Games.Find(id);
            var card = db.Cards.Find(cardId);

            game.ChangeCardLocationTo(card, location);

            db.SaveChanges();

            game.Info = game.GetInfo(id);


            if (game.GameState == GameState.playerOneLayOn || game.GameState == GameState.playerTwoLayOn)
            {
                return View("LastTurn", game);
            }
            else
            {
                return View("Details", game);
            }
        }

Any suggestions on what is going wrong? I'm a student and it is for a school project!

@comment:

When I did this:

  error: function(xhr, error){
                            console.log(error);
                            console.log(xhr);
                        },

I noticed it didn't get triggerd. After that I tried the same in complete:

complete:function (xhr, error){
                            console.log(error);
                            console.log(xhr);
                        }

The result was

• succes
• object that returned readystate 4

I misspelled success thats in the first part it wasn't working. But my next question is how do make it updating the contents of the page that the ajax call is getting back.

I am trying myself offcourse now. In the data succes is getting is my whole page delivered as I want to have it.

Answer 1

Is it because you have misspelt "success"?

$.ajax({
    type: "POST",
    url: '@Url.Action("ChangeCardLocation")',
    data: { 'id': GameId, 'cardId': id, 'location': location },
    success: function () {
        alert('wow');
    },
    complete:function (){
    }
});