CODEWITHSUNDEEP
jqueryasp.net-mvcajax
James McConnell
James McConnell

Reputation: 2198

jQuery ajax post failing, but proper data returned

Scratching my head on this one. I'm trying to do a simple ajax form post, and the response I'm getting is an error. However, my page still displays my JSON string as the response. Here is my javascript chunk:

$(function () {
    $('#searchForm').submit(function () {
        var jqhxr = $.post({ url: this.action, type: this.method, data: $(this).serialize(), dataType: 'json' })
                     .done(function () { alert('success') })
                     .fail(function () { alert('fail') })
                     .always(function () { alert('complete') });
        return false;
    });
});

This is posting to an ASP.NET MVC page (although I don't think that is the problem); the route is correct, gets hit in the debugger and returns the proper data, but just in case:

    [HttpPost]
    public JsonResult Search(SearchFormViewModel vm)
    {
        var products = _productRepo.Find(...);
        return Json(products);
    }

So, what happens is that the form is submitted via ajax as it is supposed to be, I get the 'fail' alert box, but the JSON string still displays, so the request was successful. Any ideas?

Upvotes: 0

Views: 1395

Answers (3)

Jeff Ancel
Jeff Ancel

Reputation: 3091

This is a stab in the dark really, but I wonder if this would do what you want it to do.

   $(function () {
        var jqhxr;     
        $('#searchForm').submit(function () {
            jqhxr = $.post({ url: this.action, 
                                type: this.method, 
                                data: $(this).serialize(), 
                                dataType: 'json',
                                success: function(data){ alert("success - data"); }
                        });                         
            jqhxr.done(function () { alert('success - done') });
            jqhxr.fail(function () { alert('fail') });
            jqhxr.always(function () { alert('complete') });
            return false;
        });
    });

Essentially, all I did here was gave it a success outlet.

Upvotes: 1

James McConnell
James McConnell

Reputation: 2198

Well, I found the answer in this blog post: http://blog.janjonas.net/2011-08-07/asp_net-mvc_3-jquery-ajax-submit-ajax-form-supporting-unobtrusive-client-side-validation-and-server-side-validation.

The only differences were the use of $('#searchForm').live('submit', function(e) { ... }); as well as the use of e.preventDefault();, which I think was the key here. I wasn't preventing the default behavior, which was why I was seeing the JSON result in the browser itself. Doesn't explain why I was getting the "fail" alert, but I'm now getting the "success" alert. So I'm posting this as the answer as it contains a link to the information that solved the issue. Hope this helps people in the future!

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

Try replacing $.post with $.ajax:

$.ajax({    
    url: this.action, 
    type: this.method, 
    data: $(this).serialize(), 
    dataType: 'json' }
)
.done(function () { alert('success') })
.fail(function () { alert('fail') })
.always(function () { alert('complete') });

Upvotes: 0

Related Questions