Following link href after successful ajax call

Question

I've got a normal link:

<a href="http://www.google.com" class="continue">Continue</a>

I've bound the click to an event to post an ajax request like this:

$('.continue').click(function () {

    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            return true;
        }
    });
});

What I'm trying to get to happen is the link to be followed on success....
ie, if there is no error, user should be redirected to google.

I know I can put window.location.href in the success handler, but I was trying to avoid this if possible

Answer 1

Unfortunately (in your case), ajax is asynchronous, meaning that your click function starts the ajax call and then continues running without paying any attention to what it does (and thus returns nothing at the end).

The success function is called later (when the ajax returns successfully) and is a completely different function, so its returning true has no bearing on your original click function.

All this to say, you will need to use javascript to override the anchor tag's natural behavior (go directly to google.com) and what happens afterward (redirect).

$('.continue').click(function (e) {
    e.preventDefault(); // otherwise, it won't wait for the ajax response
    $link = $(this); // because '$(this)' will be out of scope in your callback

    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            window.location.href = $link.attr('href');
        }
    });
});

Answer 2

Have you tried something like this:

$('.continue').click(function(e) {
    e.preventDefault();
    var link = $(this).attr('href');

    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            window.location.href = link; // <-- This line
        }
    });
});

Or if the link is send with the responding text, use that data.

Edit: I didn't saw your last line, what's the reason for not wanting to use that? It's perfectly dynamic and supported by all browsers that support JavaScript.

Answer 3

You can try this,

     $('.continue').click(function () {
   $.ajax({
    type: 'POST',
    url: '/url-to-post-to',
    data: mydata,
    contentType: 'application/json',
    error: function (err) {
        alert("error - " + err);
    },
    success: function () {

       $(location).attr('href',$(this).attr('href'));
    }
  });
  return false;
 });

Answer 4

If we need to actually have a "click" here, we should just trigger the click event newly and allow it to return true on the second click.

$('.continue').click(function () 
{
    if ($(this).attr('tracked')!=undefined)
    {
        return true;
    }
    a = $(this);
    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            $(this).attr('tracked',true);
            $(a)[0].click();
        }
    });
});