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 :/

Have you tried without returnUrl?

Abdul Munim
– Abdul Munim

2011-11-10 09:51:38 +00:00
Commented Nov 10, 2011 at 9:51 — Abdul Munim
– Abdul Munim, Commented Nov 10, 2011 at 9:51

Lasse Edsvik · Accepted Answer · 2011-11-10 10:01:05Z

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.

edited Nov 10, 2011 at 10:01

answered Nov 10, 2011 at 9:55

Lasse Edsvik

9,34617 gold badges77 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriele Petrioli · Accepted Answer · 2011-11-10 10:02:55Z

$(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');

            }
        });
    });

Collectives™ on Stack Overflow

jQuery getJSON with mvc jsonresult

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related