div.load() causing full page postback

Question

After saving form data, need to load the div only not whole page refresh but it first goes to Main Page Action Controller and then the DIV Load Partial Action Controller. I am unable to find the reason why it is posting whole page.

I have added the preventDefault() command too.

$("#btnSave").click(function (e) {
    e.preventDefault();

    var url = "@Url.Action("Save", "Note")";
    var id = "1";
    var model = {
      modelfields.....
    };

    $.ajax({
        type: "POST",
        data: JSON.stringify(model),
        url: url,
        contentType: "application/json",
        success: function (data) {
            if (data == "True") {

              // Load div
                var settings = { editUrl: '@Url.Action("Get", "Note", new { ID = "-1" })' };
                 settings.editUrl = settings.editUrl.replace("-1", id);
                $("#divNoteDetails").load(settings.editUrl);
            }
            else if (data == "False") {
                alert('not saved');
            }
        },
        error: function () {
            alert('error');
        }
    });
    return false; 
});

Both have `ActionResult ` as return type, Save is returning `ContentResult` while GetAction is returning `PartialView` — Mahrukh Mehmood, May 02 '17 at 11:41
so your page is refreshing after you click the submit button? — madalinivascu, May 02 '17 at 11:43
If I add this div load command in ajax success, page is refreshing first then it goes to the partial view action. If I remove this command it won't refresh. But I need to load div after saving the form. — Mahrukh Mehmood, May 02 '17 at 11:45
Have you tried to hook up some [error handling](http://api.jquery.com/load/) on the `load` function? — Sandman, May 02 '17 at 12:06
Also, [try/catch](http://stackoverflow.com/a/512159/6224482) around your AJAX call in order to catch any non-server errors. — Sandman, May 02 '17 at 12:16

score 0 · Answer 1 · answered May 02 '17 at 13:10

0

if your button is inside a form then its default type is submit. see the spec for details

try adding type="button" to the button, or event.preventDefault() on an event handler attached to the form itself.

answered May 02 '17 at 13:10

chee

26
3

have you tried adding `preventDefault()` to the form `submit` handler? – chee May 02 '17 at 14:41
I removed the forms but still this is happening – Mahrukh Mehmood May 04 '17 at 02:09

div.load() causing full page postback

1 Answers1