What causes $.ajax to result a full post-back

Question

Could someone tell me what causes a $.ajax 'POST' request to result a full post-back (full page refresh)?

I'm using the $.ajax 'POST' in the ASP.NET MVC context, where the view is calling the controller method (which returns a JSON result) through a $.ajax 'POST' request.

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" });
    }
}

Are you returnung a partial view? Can your show your AJAX call and controller action as well! — iappwebdev, Jan 10 '13 at 07:38
Please provide some sample code so that we can take a closer look. — oomlaut, Jan 10 '13 at 07:38
i couldnt understand what do you mean with, "causes a $.ajax 'POST' request to result a full post-back (full page refresh)" — Nour Berro, Jan 10 '13 at 07:45
maybe not calling `preventDefault` in case that you are calling $.ajax in click event of an anchor tag. — Behnam Esmaili, Jan 10 '13 at 07:45
I guess you're working with T4MVC?! Your AJAX call is calling /Name/Create and not /Name/SaveTicket — iappwebdev, Jan 10 '13 at 08:35
And beside your AJAX call isn't replacing anything, so ther must be something else going on. — iappwebdev, Jan 10 '13 at 08:37
@M.Nour Berro : I expected a partial page update [in this case no page update as controller action passes only a JSON] from the AJAX-POST, but the full page get refreshed. — dan, Jan 10 '13 at 08:38
@Simon yes T4MVC it is, it's a copy-paste error, which now corrected. — dan, Jan 10 '13 at 08:44
Are you somewhere binding an event to `$('button')` or `$('#save')`. Ajax call looks fine. Provide some more details. — iappwebdev, Jan 10 '13 at 08:46
@Simon, there are no others event assignments to this control. But i must mention this #View was opened as a **jQuery UI Dialog Form** by a different #View. Would this have an effect? — dan, Jan 10 '13 at 08:55

score 11 · Accepted Answer · edited May 23 '17 at 12:16

11

Do

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

to make sure form is not posted by this button.

Explanation:

The default value for the type attribute of button elements is "submit".

https://stackoverflow.com/a/3315016/1014281

edited May 23 '17 at 12:16

Community

1
1

answered Jan 10 '13 at 09:04

iappwebdev

5,880
1
30
47

Tied it, same result. But I did one thing, removing the html `
` tag, did manage to stop the full post-back while the rest of the functionality works as required. But this is not the perfect solution as the `
` tag is required by the **jQuery Validation Plugin**. Simon, do you see any workaround? Thank you.
– dan Jan 10 '13 at 10:05
Sweet! that did the charm. Could you please tell me how this fixed the post-back? – dan Jan 10 '13 at 10:15
Makes perfect scene. Thanks again Simon. – dan Jan 10 '13 at 10:29

score 4 · Answer 2 · answered Jan 10 '13 at 09:10

4

Are you sure that you are using a <button> and not <input type="submit">? Because if you don't prevent the button from submitting it will submit the form (full postback).

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

answered Jan 10 '13 at 09:10

jgauffin

99,844
45
235
372

Yes it's a button. Yet along I added `return false;` to the end of `saveClick()` function, but the same result. In a different attempt, I removed the html `
` tag, did manage to stop the full post-back while the rest of the functionality works as required. But this is not the perfect solution as the `
` tag is required by the **jQuery Validation Plugin**. Do you see any workaround for this? Thank you.
– dan Jan 10 '13 at 10:08
you have to have "return" in the onclick attribute too – jgauffin Jan 10 '13 at 10:11
2

Apparently I was missing the `type="button"` in the button tag. Adding it fixed the problem. Thank you Jonas. – dan Jan 10 '13 at 10:21
1

the `onclick="return saveClick()"` should work too. (instead of the type) – jgauffin Jan 10 '13 at 10:25
Yes you are correct. As you mentioned then the method must always return false **or** call the method as: `onclick="saveClick(); return false;"` Thank you Jonas. – dan Jan 10 '13 at 10:37

score 1 · Answer 3 · answered Aug 30 '16 at 06:55

1

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

answered Aug 30 '16 at 06:55

Marwah Abdelaal

111
2
10

What causes $.ajax to result a full post-back

3 Answers3