ajax.beginform on success do nothing

Question

Good day,

I am trying to use ajax.beginform in my asp.Net MVC project, to create an alert on success. The problem is that I could not make it work, I am not getting any error message neither.

    [HttpPost]
    public ActionResult Create(Details details)
    {
        //do something
        //add details to db
       return View("Create", details);
    }
public class Details
{
public string Name { get; set; }
public string Email { get; set; }
}

This is my view

 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
@using (Ajax.BeginForm("Create", new AjaxOptions()
{
OnSuccess= "ajaxSuccess"
}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "Please fix the following errors.")
<div class="editor-label">
@Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

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

    <p>
        <input type="submit" value="Create" />
    </p>
}
@section scripts
{@Scripts.Render("~/bundles/jqueryval")
<script>
  function ajaxSuccess () { alert('this is ajaxSuccess'); }
 $(document).ready(function () 
  {
function ajaxSuccess () { alert('this is ajaxSuccess'); }
   });
</script>
}

As you can see, I am using Jquery.unobstrusive-ajax.min.js script. My action is completed and returns to the view, but there is no error in my console, neither an alert. Am I missing something?

Update: I added an alert to the document ready, but did not trigger **Update 2: ** changed function to function ajaxSuccess () { alert('this is ajaxSuccess'); }

have you tried `function ajaxSuccess () { alert('this is ajaxSuccess'); }` instead storing it in a variable? — Train, Feb 06 '18 at 16:47

Brian Mains · Accepted Answer · 2018-02-06T17:55:14.410

0

First, look in the Networks tab to see if the script is resolving correctly, or if a 404 is being returned.

Also try not using the tilda and local paths to see if it works:

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

Or use the tilda with this approach: Using tilde in script tag src attribute

EDIT: You aren't getting the alert on document.ready because of the inner function; change:

$(document).ready(function () 
  {
function ajaxSuccess () { alert('this is ajaxSuccess'); }
   });

to:

$(document).ready(function () {
   alert('this is document ready');
});

And you will likely see the alert.

edited Feb 06 '18 at 17:55

answered Feb 06 '18 at 16:51

Brian Mains

50,520
35
148
257

I added the unobstrusive to the bundles config. When I click on the submit button I check the network tab , I can see that the unobtrusive ajax has a timing of "pending" – jdod Feb 06 '18 at 17:00
Ok edited above. Also view the source to make sure the HTML elements being validated have data validation attributes defined on them (data-val-required I thin for required, etc.). Also, I don't actually see any validations on your model properties; was that left out intentionally? – Brian Mains Feb 06 '18 at 17:57

ajax.beginform on success do nothing

1 Answers1