Find the root of a JQuery .post() error, which fails silently

I’m writing this down mostly for myself, because this took a little time to find. I’m working with a really good implementation of a web-based "wizard", using MVC and JQuery that I found on Nadeem Afana’s blog.

When I was trying to do this:

    if ($step.next().hasClass("confirm")) { // is it confirmation?

        // show confirmation asynchronously

        alert(‘is confirmation’);

        $.post("/wizard/confirm", $("form").serialize(), function (r) {

            // inject response in confirmation step

            $(".wizard-step.confirm").html("From /wizard/confirm: " + r);

        });

        alert(‘after call’);

    } 

Now, according to the documentation on .post(), it explains that it fails silently unless you wire up an .ajaxError() handler.

With the code above, I’d see that first alert, then the second alert – but that .post() was silently erroring out. After trying this a bunch of ways, this is how I got that .ajaxError() to work:

    if ($step.next().hasClass("confirm")) { // is it confirmation?

        // show confirmation asynchronously

        alert(‘is confirmation’);

        $.post("/wizard/confirm", $("form").serialize(), function (r) {

            // inject response in confirmation step

            $(".wizard-step.confirm").html("From /wizard/confirm: " + r);

        });

        alert(‘after call’);

    }

 

    $($step.next()).ajaxError(function (e, xhr, settings, exception) {

        alert(‘Error in: ‘ + settings.url + ‘ n’ + ‘error:n’ + xhr.responseText);

    }); 

I will be the first to tell you that I don’t fully understand some of how these constructs work in javascript. For example, above $step.next() is a pointer to the next "div" tag in this case, and I guess .ajaxError() is a way that you can listen for ANY AJAX errors that occur while anyone is interacting with that object? That seems odd to me, and doesn’t really make sense – but the code above works.

Also, it’s not really documented on HOW you get meaningful argument information from those ajaxError() arguments, but the above should show you something meaningful: the URL it tried and the HTTP response it got back.

In my case, this was a stupid mistake – my controller is JobWizard, not Wizard – but without more information, I kept overlooking that!

Posted in .NET 4.0, ASP.NET, ASP.NET MVC, JQuery, Uncategorized
One comment on “Find the root of a JQuery .post() error, which fails silently
  1. […] reusable MVC 2 wizard As discussed, I started with this sample code I found on Nadeem Afana’s blog. I wanted to have a wizard […]

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives
Categories

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 2 other followers

%d bloggers like this: