Databases
StackOverflow2013
Postsdbo
POMVC 3 $.post works but $.ajax doesn't
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC 3 $.post works but $.ajax doesn't
    text
    copied!<p>I have a simple model </p> <pre><code>namespace StackOverflow.Models { public class Test { public Test() { Name = "Test"; Subs = new List&lt;Sub&gt;(); Subs.Add(new Sub { Num = 1, SubName = "A" }); Subs.Add(new Sub { Num = 2, SubName = "B" }); } public string Name { get; set; } public List&lt;Sub&gt; Subs { get; set; } } public class Sub { public int Num { get; set; } public string SubName { get; set; } } } </code></pre> <p>and associated view</p> <pre><code>@model StackOverflow.Models.Test &lt;script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/JScript1.js")" type="text/javascript"&gt;&lt;/script&gt; @{ ViewBag.Title = "Test"; } &lt;h2&gt;Test2&lt;/h2&gt; @using (Html.BeginForm()) { &lt;p&gt;Test Name&lt;/p&gt; @Html.EditorFor(m =&gt; m.Name) &lt;p&gt;Sub 1&lt;/p&gt; @Html.EditorFor(m =&gt; m.Subs[0].Num) @Html.EditorFor(m =&gt; m.Subs[0].SubName) &lt;p&gt;Sub2&lt;/p&gt; @Html.EditorFor(m =&gt; m.Subs[1].Num) @Html.EditorFor(m =&gt; m.Subs[1].SubName) &lt;div id="result"&gt;&lt;/div&gt; &lt;br /&gt; &lt;input type="submit" value="create" /&gt; } </code></pre> <p>With the controller actions being</p> <pre><code> public ActionResult Test() { Test test = new Test(); return View(test); } [HttpPost] public PartialViewResult Test(Test test) { if (ModelState.IsValid) { return PartialView("_Results", new Result {Value = "Pass"}); } else { return PartialView("_Results", new Result { Value = "Fail" }); } } </code></pre> <p>The PartialView is simply showing the text string.</p> <p>I am using the following javascript to do the post</p> <pre><code>$('form').submit(function (e) { $(':submit', this).attr('disabled', true); e.preventDefault(); $.post($(this).attr("action"), $(this).serialize(), function (data) { $("#result").html(data); alert("hurray"); }); return false; }); </code></pre> <p>Everything works fine (and in the real code I have a jQueryUI modal dialog appear on the submit click and closed when the post returns)</p> <p>I figured that I need to use $.ajax so I can have an "error:" function to remove the jQueryUI modal dialog should anything go wrong. This is where I have run into problems and for the life of me I cant work out what I am doing wrong</p> <p>This was my first attempt and I simply get the alert("error") appear on post.</p> <pre><code> $.ajax({ url: $(this).attr("action"), type: "POST", data: $(this).serialize(), datatype: "json", contentType: "application/json; charset=utf-8", success: function () { alert("success!"); }, error: function () { alert("error!!"); } }); </code></pre> <p>I have also tried passing the following to "data:"</p> <p>JSON.stringify($("form").serializeArray());</p> <p>When I look at the "test" in the controller action I see that it doesn't contain any data</p> <p>I also tried simply passing in</p> <pre><code>($("form").serializeArray() </code></pre> <p>and just get the "error" alert.</p> <p>Can anyone please help me resolve this?</p> <p>Many thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload