CODEWITHSUNDEEP
asp.net-mvcunobtrusive-validation
Michael
Michael

Reputation: 2128

.Net Ajax BeginForm callback not fired

Update 2:

jQuery version compatibility issue.

Update 1:

There was a typo in my script reference. However I encounter this problem now:

TypeError: $(...).live is not a function

$("a[data-ajax=true]").live("click", function (evt) {

=====================================

When I submit a valid form via ajax.beginform, in the controller, it returns JSON which is displayed in the view instead of being handled by the callback functions and I cannot figure why this is.

I took a demo project from the net, just in case it looked familiar to anyone.

HTML/JS

@model Unobtrusive_Validation.Models.BlogPost

<html>
    <head>
    </head>
    <body>
        <script src="~/Scripts/jquery-1.9.1.js"></script>
        <script src="~/Scripts/jquery.validate.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
        <script src="~/Scripts/jquery.unobtrusive.ajax.js"></script>

        @using (Ajax.BeginForm("Test", "BlogPost",
            new AjaxOptions{
                HttpMethod = "POST",
                OnSuccess = "OnSuccess",
                OnBegin = "alert('OnBegin')",
                OnComplete = "alert('OnComplete')",
                OnFailure = "alert('OnFailure')"
            } )
        )
        {
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>BlogPost</legend>

                <div class="editor-label">
                    @Html.LabelFor(model => model.PostedOn)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.PostedOn)
                    @Html.ValidationMessageFor(model => model.PostedOn)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Title)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Title)
                    @Html.ValidationMessageFor(model => model.Title)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Content)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Content)
                    @Html.ValidationMessageFor(model => model.Content)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Category)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Category)
                    @Html.ValidationMessageFor(model => model.Category)
                </div>

                <p>
                    <input type="submit" value="Create" />
                </p>
            </fieldset>
        }
    </body>

    <script type='text/javascript'>
        function OnSuccess(result) {
            console.log(result);
            if (result.success == false) {
                alert("failed");
            }
        }
    </script>
</html>

Controller:

public class BlogPostController : Controller
{
    // GET: /BlogPost/Create

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Test(BlogPost _model)
    {
        return Json(new {success = false} );
    }
}

Web.config

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Upvotes: 0

Views: 4654

Answers (2)

Mukesh Salaria
Mukesh Salaria

Reputation: 4253

yes 

jquery.unobtrusive-ajax.js
is not compatible with higher versions of jquery 1.9+

To use this please add the jquery-migrate: Migrate older jQuery code to jQuery 1.9+ js files

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"<</script>

that would save your time.

for more detail here you go. http://www.learnsharecorner.com/ajax-begin-form-onsuccess-is-not-working-asp-net-mvc/

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039508

<script src="~/Scripts/jquery.unobtrusive.ajax.js"></script>

should be:

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

If you had used a javascript debugging tool such as FireBug or Chrome Developer toolbar and looked at the Network tab you would have immediately seen the 404 error when the browser attempts to retrieve the non-existent file that you specified due to your typo.

I would also recommend you put all your javascript files at the end of the DOM, just before the closing </body> tag.

Moral of the story: use a javascript debugging tool such as FireBug or Chrome developer toolbar. I cannot possibly imagine a person doing web development without using such a tool.

UPDATE:

Also bear in mind that in jQuery 1.9 the .live() method has been removed which was one of the breaking changes. Unfortunately ASP.NET MVC's unobtrusive-ajax script depends on this function. So if you want to use some of the unobtrusive javascript features in MVC you might need to use an older version of jQuery.

Upvotes: 6

Related Questions