jQuery getJSON with mvc jsonresult

Question

I have the following JS:

$('form').live('submit', function (event) {

                    // Stop the form from doing a native postback
                    event.preventDefault();

                    $.ajax({
                        type: 'POST',
                        timeout: 5000,
                        url: $(this).attr('action'),
                        data: $('form').serialize(),
                        success: function (responseHtml) {

                            $.getJSON($(this).attr('action'), function (data) {

                                console.log(data);

                            });

                        },
                        error: function (jqXHR, textStatus, errorThrown) {

                            alert('server error');

                        }
                    });
                });

Which should log the json from the following mvc method on fail ( note this is a login fail and not the ajax error! ):

 [HttpPost]
        public JsonResult Login(User user, string returnUrl)
        {
            // Validate the email and password
            if (users.Login(user.UserName, user.Password, Request.UserHostAddress))
            {
                FormsAuthentication.SetAuthCookie(user.UserName, true);

                // build redirectUrl ...
                //var redirUrl = ...
                return Json(new { uservalidated = true, url = false });
            }
            else
            {
                return Json (new { uservalidated = false, url = false });
            }
        }

If I disable the JS then I see the result fine but for some reason the JS can't see it :/

Answer 1

think you must have JsonRequestBehavior.AllowGet in there

return Json(....., JsonRequestBehavior.AllowGet);

Also:

If you use Chrome press F12 and Network, Firebug in Firefox, and see if you get 404, 500 or similar errors that might explain why nothing happens.

Answer 2

$(this) is not what you think inside the success method ( because it is a callback and runs out of scope )..

You need to store a reference to this to create a closure

$('form').live('submit', function (event) {
        // Stop the form from doing a native postback
        event.preventDefault();
        var self = this; // add this so you have a reference to this in callbacks
        $.ajax({
            type: 'POST',
            timeout: 5000,
            url: $(this).attr('action'),
            data: $('form').serialize(),
            success: function (responseHtml) {

                $.getJSON( $(self).attr('action') , function (data) {

                    console.log(data);

                });

            },
            error: function (jqXHR, textStatus, errorThrown) {

                alert('server error');

            }
        });
    });