¿Cómo obtengo que mi jQuery no ejecute el <a href> hasta después de una publicación exitosa de Ajax?

Question

Estoy tratando de actualizar la base de datos y enviar el navegador de los usuarios a una página diferente con un solo clic.

el código HTML es el siguiente:

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

El Javascript se parece a esto:

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

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

     }); 

Cuando el usuario hace clic en el enlace, se supone que debe actualizar la base de datos a través del enlace de Ajax y luego el la página que se devuelve dependerá de las actualizaciones de la base de datos ajax. El problema es que parece que la página se carga antes de que el ajax termine de actualizar la base de datos. Intento pasar el evento click al ajax usando e para evitar que el enlace se ejecute hasta que finalice la llamada ajax, pero parece que no funciona.

¿Hay alguna manera mejor para mí de realizar esto?

Answer 1

Trate de hacer esto:

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

A partir de jQuery 1.7 hacer esto (usando .onlugar de .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; 
    }); 

Answer 2

Este es el comportamiento inherente de Ajax, de hecho su lo el A significa: asincrónico. La llamada ajax se activa y la función de clic vuelve antes de que la solicitud ajax haya regresado. Tiene 2 opciones:

1. Haga la llamada ajax sincrónica. No recomendaría esto.

2. manualmente Siga el enlace cuando las ajax devuelve la llamada:

   $("#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 
   }); 
   

Answer 3

2 maneras de hacer esto

Primera

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

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

Segunda

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

Answer 4

Dependiendo de cómo haya configurado su AJAX, lo más probable es que vaya a utilizar una devolución de llamada. En este caso, la devolución de llamada es donde se especifica el éxito function. Aquí hay un código de ejemplo:

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

});