Synchronous XMLHttpRequest deprecated blocking HttpPost ActionResult

Question

I recently added jquery references to a project, and now the Post from a View is not triggering. The Post ActionResult saved user-chosen settings, and now a break point inside the Post isn't being hit. There's no error in Visual Studio, but Chrome's Console outputs the warnings "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/." and "Setting 'XMLHttpRequest.withCredentials' for synchronous requests is deprecated."

The code ran before jquery, so is the problem related to those warnings, some other aspect of jquery, or possibly something else? Suggestions here, here, and here offer possible solutions to the asynchronous warnings, but would, say, adding async to the new declarations in the Layout trigger the Post again? Thanks in advance to all.

The View:

@using Project.Data
@model Project.Models.PreferencesModel
@{
ViewBag.Title = "Preferences";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="page_bar clearfix">
<div class="row">
    <div class="col-md-8">
        <h1 class="page_title">
            <i class="fa fa-gears"></i> Preferences
        </h1>
    </div>
</div>

<div class="page_content">
<div class="container-fluid">
    <form data-parsley-validate>
        @using (Html.BeginForm("Preferences", "Manage", FormMethod.Post, new { id = "PreferencesForm", autocomplete = "on", data_parsley_validate = "data-parsley-validate" }))
        {
            @Html.AntiForgeryToken()
            @Html.HiddenFor(m => m.PreferenceID)
            @Html.HiddenFor(m => m.PreferenceCreatedBy)
            @Html.HiddenFor(m => m.PreferenceCreatedDate)
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-4">

                                @Html.LabelFor(m => m.PricingPreferenceTypeID, "Pricing Preference Type")
                                @Html.DropDownListFor(m => m.PricingPreferenceTypeID, StaticCache.GetPricingPreferenceTypes(), new { @class = "form-control", data_parsley_required = "true" })
                                @Html.ValidationMessageFor(m => m.PricingPreferenceTypeID)

                        </div>
                        <div class="col-md-4">

                                @Html.LabelFor(m => m.PricingStrategyID, "Pricing Strategy")
                                @Html.DropDownListFor(m => m.PricingStrategyID, StaticCache.GetPricingStrategies(), new { @class = "form-control", data_parsley_required = "true" })
                                @Html.ValidationMessageFor(m => m.PricingStrategyID)

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12  text-right">
                <button type="submit" class="btn btn-success btn-large">Save</button>
            </div>
        </div>
 }
 </form>
 </div>
</div>

The Layout contains these new declarations:

<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>

Finally, the previously working Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Preferences(PreferencesModel model)
{
    ProjectEntities projectDb = new ProjectEntities();

    projectDb.uspAddPreference(DateTime.Now, model.PricingStrategyID, null, null, model.PricingPreferenceTypeID);

    return RedirectToAction("Preferences");
}

EDIT This piece of jquery was added to the bottom of the View to make one dropdown dependent on the other, but the break point inside the HttpPost ActionResult is still not hit. What could be causing this?

@section Scripts{
<script>
    $(function () {
        var $dropdownInput = $("#PricingStrategyID");
        $("#PricingPreferenceTypeID").change(function () {
            if (this.value != 1) {
                $dropdownInput.hide();
            } else {
                $dropdownInput.show();
            }
        }).change();
    });
</script>
}

2nd EDIT

Save button included in original view.

Probably not related, but you have nested form tags (invalid html and not supported) and you have 2 references to `jquery-ui` (include one or the other) — , Aug 11 '15 at 01:32
I removed the nested form tags and one of the references to jquery-ui, but the break point inside the Post in the Controller is still not being hit. The "Save" button reloads the original page, generates the synchronous XMLHttpRequest warning, and adds to the url "?_RequestVerificationToken=" and what appears to be a unique identifier comprised of numbers, letters, and hyphens. — jle, Aug 11 '15 at 22:15
What "Save" button? Your view does not show a button, nor have you shown your ajax method (and the code snippet in you edit is a jquery functuion and nothing to do with ajax) — , Aug 12 '15 at 00:10
Edited to a) refer to the added code as jquery rather than ajax; and b) add the button to the View, which should have been there originally but must have been accidentally removed while cleaning up the presentation formatting. — jle, Aug 12 '15 at 12:50
Your code still shows nested forms. And what does your script have to do with the issue? (it has nothing to do with submitting the form) — , Aug 13 '15 at 01:44

score 0 · Accepted Answer · answered Aug 27 '15 at 16:13

0

The answer to this seems to be a nested form tag that eluded detection. Once it was removed, the Post worked fine.

answered Aug 27 '15 at 16:13

jle

269
8
25

Synchronous XMLHttpRequest deprecated blocking HttpPost ActionResult

1 Answers1