How do I get my jQuery to not execute the <a href> until after a successful ajax post?

I am trying to update the database and send the users browser to a different page with one click.

The Html looks like this:

<a id='updateLiveProgress' style='width:118px;' href='~link~'>Click here</a>

The Javascript looks like this:

        开发者_如何学Go$("#updateLiveProgress").live("click", function(e){

            var ajaxlink = "~ajaxlink~"
            $.post(ajaxlink, function(data, e){
                return true;
            });

        });

When the user clicks the link, it's supposed to update the database through the ajax link and then the page that is returned will be dependent on the ajax database updates. The problem is that it seems that the page loads before the ajax finishes updating the database. I'm trying to pass the click event throught to the ajax using e to prevent the link from executing until after the ajax call finishes, but it doesn't seem to be working.

Is there a better way for me to accomplsh this?

Try doing this:

    $("#updateLiveProgress").live("click", function(e){
        e.preventDefault();
        var href = this.href;
        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            window.location = href;
        });
        return false;
    });

As of jQuery 1.7 do this (using .on instead of .live):

    $("#updateLiveProgress").on("click", function(e){
        e.preventDefault();
        var href = this.href;
        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            window.location = href;
        });
        return false;
    });

This is the inherent behavior of Ajax, in fact its what the A stands for: asynchronous. The ajax call is fired, and the click function returns before the ajax request has come back. You have 2 options:

1. Make the ajax call synchronous. I would not recommend this.

2. Manually follow the link when the ajax call returns:

   $("#updateLiveProgress").live("click", function(e){
   
       var ajaxlink = "~ajaxlink~"
       $.post(ajaxlink, function(data, e){
           window.location.href = ajaxlink; // or something similar
       });
   
       return false; // this keeps the link from being followed
   });
   

Depending on how you have your AJAX configured your most likely going to use a callback. In this case, the callback is the where the success function is specified. Here's some example code:

//assuming button is an anchor link
$('#button').click(function(){ 
    //do ajax request
    $.ajax{
        url: 'http://someurl.com/getuser?id=69',
        success: function(data, status){
            //assuming page to load is in data, redirect
            window.location = "http://mysite.com/newuser.aspx";
        }
    }

    //import to stop the anchor link request
    return false;

});

2 ways to do this

First

$("#updateLiveProgress").live("click", function(e){

        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            return true;
        });
        return false;
    });

Second

$.ajax({
   type: 'POST',
   url: "~ajaxlink~",
   data: data,
   async: false
});