What causes $ .ajax to get the full post back

Question

Can someone tell me what causes the request $. ajax 'POST' to get full post-back (full page refresh)?

I use $ .ajax 'POST' in an ASP.NET MVC context where the view calls the controller method (which returns the JSON result) via $ .ajax 'POST'.

The code is below.

---

// View. <button id="save" onclick="saveClick()" /> 

---

 // View. <script type="text/javascript"> function saveClick() { if (!$("form").valid()) { return false; } $.ajax({ url: '@Url.Action(@MVC.Ticket.ActionNames.SaveTicket, @MVC.Ticket.Name)' type: 'POST', data: JSON.stringify(getJsonTicket()), dataType: 'json', contentType: "application/json", cache: false, success: function(data) { alert(data.SaveResult); } }); return true; } function getJsonTicket() { ... } </script> 

---

 // Controller action. public virtual JsonResult SaveTicket(Ticket newTicket) { try { TicketManager.SaveTicket(newTicket); return Json(new CreateTicketViewModel {SaveResult = "success"}); } catch { return Json(new CreateTicketViewModel { SaveResult = "error" }); } } 

Answer 1

Do

 <button id="save" type="button" onclick="saveClick()" /> 

to make sure the form is not submitted by this button.

Explanation:

The default value for the button element type attribute is send.

fooobar.com/questions/19259 / ...

Answer 2

Are you sure you are using <button> and not <input type="submit"> ? Because if you do not interfere with sending the button, it will send the form (full postback).

<input type="submit" onclick="return saveClick()"> should work as long as saveClick() always returns false.

Answer 3

you must add type="button" to the button tag