Interplay between <form> and .ajax()

Question

Folks,

I'm learning Ajax by tinkering. At first, I had a form with button, which made an Ajax call to a dummy controller action. The HTML and JavaScript on the client side.¹

<form method="post">
    <button name="btnSaveProject" title="When you save this project, it willl be available for 30 days.">
            Save
    </button>
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("button[name='btnSaveProject']").click(function () {
            console.log("make ajax call");
            $.ajax({
                url: "/Project/Save",
                type: "GET",
                timeout: 8000,
                cache: false
            }).done(function () {
                console.log("ajax call successful");
            }).fail(function (jqXHR, textStatus) {
                console.log("something went awry. " + textStatus);
            }).then(function () {
                console.log("always just in case");
            });
        });

    });
</script>

A strange thing was happening when I clicked the button. The Ajax call would reach the server (I know thins because I had a break point in the controller action, which triggered). But neither neither .done(), nor .fail(), nor .always() was getting called back on the client-side.

Then I have moved the <button> out of the <form>, and now .done(), and .always() get called back as expected. There seems to be some interplay between the can Ajax call. What is this interplay? Where can I learn more about it? What do I have to do to be able to use Ajax inside a <form>?

Here's the server-side code, but I suspect that it's a non-factor.

// AJAX: /Project/Save
public ActionResult Save() {
    System.Threading.Thread.Sleep(600);     /// <bring-up>A bit of latency to make the Ajax call more noticeable.</bring-up>
    return Json("lorem ipsum", JsonRequestBehavior.AllowGet);
}

¹ _{I have stripped down the code and kept only the parts that I think are applicable to the question. If I have stripped down too much, please let me know: I'll post more code.}

Answer 1

You can add a type to your button:

<button type="button" name="btnSaveProject"

or just prevent the defaults of button to submit the form with event.preventDefault():

$("button[name='btnSaveProject']").click(function (e) {
    e.preventDefault();
    // other code as is
});

Answer 2

Since the button is in a form its default click action is to submit the form, So in your case as soon as the ajax request is sent the actual page is submitted which I think is reloading the page causing the callback handler to unload that is why those are not getting called

One solution is to prevent the default action of the click event by calling event.preventdefault()

 $(document).ready(function () {
    $("button[name='btnSaveProject']").click(function (e) {
        //prevent the default action of the button click which is to submit the form
        e.preventDefault()
        console.log("make ajax call");
        $.ajax({
            url: "/Project/Save",
            type: "GET",
            timeout: 8000,
            cache: false
        }).done(function () {
            console.log("ajax call successful");
        }).fail(function (jqXHR, textStatus) {
            console.log("something went awry. " + textStatus);
        }).then(function () {
            console.log("always just in case");
        });
    });

});

But since you are using a form, instead of a button click event it will be better to use a form submit event like

$(document).ready(function () {
    $("form").submit(function (e) {
        //prevent the default action of the button click which is to submit the form
        e.preventDefault()
        console.log("make ajax call");
        //your ajax code
    });

});

Another option is to set the type of the button to button so that the form submit will not be triggered like

<button type="button" name="btnSaveProject" title="When you save this project, it willl be available for 30 days.">Save</button>