JQuery.unobtrusive.ajax is not working with the "cancel" class (MVC 5)

Question

I have been banging my head against the wall trying to get this to work and I have finally decided to ask for help. I have two submit buttons in my form. One submit button is to allow the user to go back. It needs to be a submit button because I still need the form submitted with the hidden input fields.

<form action="/Question/ProcessQuestion" data-ajax="true" data-ajax-failure="handleError" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#questionForm" data-ajax-url="/Question/ProcessQuestion" id="form0" method="post">
    <input type="hidden" name="TraversalId" value="a59aff78-d10c-4800-b91a-3ae47a95a52c">
    <input type="hidden" name="AssetId" value="1cf261a6-4549-4802-bd43-f2900178604d">
    <input type="hidden" name="Type" value="question/text">
    <div id="textQuestion">
        <div class="bodyText">
            <div>In the space below, describe the problem with the left ankle, using as many details as possible.</div><br>
            <textarea rows="10" cols="50" maxlength="999" name="TextResponse" class="textarea" required=""></textarea>
            <div class="bigButtons"><br>
                <input type="submit" id="btnBack" value="Back" name="buttonType" class="cancel">
                <input type="submit" id="btnContinue" value="Continue" name="buttonType">
            </div>
        </div>
    </div>
</form>

As you can see the "Back" button has a class named "cancel" in it. According to several sources this should submit the form even though validation fails. I followed the advice from stackoverflow. It did not work. I also see where the asp.net team states that it has been fixed asp.net codeplex, but that is not true because it is not working for me.

I have been debugging the code, and, execution never enters the following function.

$(document).on("submit", "form[data-ajax=true]", function (evt) {
    var clickInfo = $(this).data(data_click) || [],
        clickTarget = $(this).data(data_target),
        isCancel = clickTarget && clickTarget.hasClass("cancel");
    evt.preventDefault();
    if (!isCancel && !validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

Instead the textarea is highlighted and a quick popup message states "Please fill out this field" .I am sure I am doing something wrong, but, I don't know what it is. I would appreciate any help I could get.

Answer 1

I finally chose to change the jquery.unobtrusive.ajax.js code. I added some logic to the following event handler.

$(document).on("click", "form[data-ajax=true] :submit", function (evt) {
    var name = evt.currentTarget.name,
        target = $(evt.target),
        form = $(target.parents("form[data-ajax=true]")[0]);

    form.data(data_click, name ?[{ name: name, value: evt.currentTarget.value }]: []);
    form.data(data_target, target);

    setTimeout(function () {
        form.removeData(data_click);
        form.removeData(data_target);
    }, 0);
});

I added this logic after the variable declarations.

if (target.hasClass("cancel")) {
    var clickInfo = name ? [{ name: name, value: evt.currentTarget.value }] : [];
    var options = {
        url : form.attr("action"),
        type: form.attr("method"),
        data: clickInfo.concat(form.serializeArray())
    };
    $.ajax(options).done(function(result) {
        var target = $(form.attr("data-ajax-update"));
        target.replaceWith(result);
    }).fail(function(result) {
        if (result.statusText && result.responseText) {
            handleError(result);
        }
    });
    return false;
}

It is working for me now. If anyone has a better way to solve this problem, I would appreciate the information. I really didn't want to modify the jquery.unobtrusive.ajax.js file, but, I also didn't want to wire up a new handler for the same event and elements, since one already exists.