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:

        $("#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 acplsh this?

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:

        $("#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 acplsh this?

• javascript
• jquery
• ajax

4 Answers 4

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 e back. You have 2 options:

1. Make the ajax call synchronous. I would not remend 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./getuser?id=69',
        success: function(data, status){
            //assuming page to load is in data, redirect
            window.location = "http://mysite./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
});