(JQuery) Cómo llamar a una función personalizada antes de seguir el enlace

Quiero lograr el siguiente comportamiento en un enlace de página.(JQuery) Cómo llamar a una función personalizada antes de seguir el enlace

Cuando se hace clic en el enlace, quiero:

En primer lugar, enviar (POST) algunos datos de vuelta al servidor
En segundo lugar, permite que el navegador para navegar a la dirección URL que el enlace estaba apuntando a.

Soy relativamente nuevo en JQuery, y este es mi primer intento a continuación. Estaré agradecido con cualquier gurú de jQuery aquí para llenar los espacios en blanco (y tal vez señale cómo se puede mejorar el fragmento a continuación).

<html> 
<head>test page</head> 
<body> 
<div><a id="hotlink" href="http://www.example.com">Clik and see</a></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('hotlink').click(function(){ 
    //AJAX Post data here ... 
    //follow the link url (i.e. navigate/browse to the link) ... 
    }); 
}); 
</script> 
</body> 
</html>

Fuente

2010-04-22 morpheous

Compruebe http://api.jquery.com/id-selector y http://api.jquery.com/jQuery.post. Muchos ejemplos :) – BalusC

Es posible que desee ver mi answer to a similar question. Básicamente, una publicación de ajax sería asíncrona de forma predeterminada y es posible que no llegue al servidor antes de completarse. Para garantizar la finalización, puede hacerlo sincrónico, pero esto bloqueará el navegador hasta que la solicitud haya regresado. Esto puede ser muy problemático si su servidor está teniendo problemas, podría tomar un tiempo y el usuario está esperando para seguir el enlace. Sin embargo, el código es:

$('#hotlink').click(function() { 
    $.ajax({ 
     async: false, 
     type: "POST", 
     url: "http://myurl.com/mypage.php", 
     data: "param1=value&param2=value", // &param3=value... etc. 
    }); 
});

Una vez completado, será honrado la acción por defecto del enlace.

Fuente

2010-04-22 22:17:37

Andy: gracias por la explicación (y con un código útil con el que puedo empezar). Un par de cosas, sin embargo, de las otras respuestas/comentarios que he leído hasta ahora, parece más seguro regresar verdadero de la función. Además, alguien hizo un punto válido para deshabilitar el enlace mientras esperaba la respuesta ACK del servidor. Parece una idea brillante, pero ¿cómo desactivo un enlace (usando el ejemplo de código anterior?) – morpheous

@morpheous: Raramente necesita 'devolver true;' desde un manejador de eventos para permitir acciones predeterminadas, por lo general solo necesita ' return false; 'para evitar acciones predeterminadas. Deshabilitar el enlace sería inútil en este caso: una llamada ajax sincrónica no permitiría un clic adicional en el enlace de todos modos. –

gracias por la aclaración – morpheous

Prueba esto:

$('#hotlink').click(function() { 
    $.post(...); 
    return true; 
});

El proceso de devolver verdadero de .click(function(){...}) dará instrucciones al navegador para seguir el enlace. Si return false, el navegador no seguirá el enlace.

Además, asegúrese de utilizar #hotlink en lugar de hotlink (o un selector similar).

Obviamente, querrá completar el $.post(...) con el uso adecuado de la documentación de jquery. Documentación aquí: http://api.jquery.com/jQuery.post/

Fuente

2010-04-22 22:12:48 dlamotte

Psssh .. El selector está equivocado. Incluiría enlaces a la documentación también. – BalusC

@BalusC probablemente tengas razón. ¿Que piensas ahora? – dlamotte

Eso no garantiza que se realice la llamada ajax. La única forma de hacerlo es con una llamada ajax síncrona o con una devolución de llamada. – zaius

Puede establecer la llamada window.location en la devolución de llamada ajax.

Aquí está algo rápida de código, no probado:

<script type="text/javascript> 
$(document).ready(function(){ 
    $('hotlink').click(function(){ 
    var link = $(this); 
    $.post(url, {'data': 'value'}, function() { 
     window.location = link.attr('href'); 
    }); 
    return false; 
    }); 
}); 
</script>

Tenga en cuenta que probablemente debería hacer algo para dejar claro que la página está haciendo una llamada ajax, como poner en un gráfico hilandero, y deshabilitar el enlace para que no hagan clic varias veces.

--edit--

La otra manera de resolver este problema es hacer una llamada ajax sincrónica, pero entonces el navegador se bloquea mientras está en progreso.

Para responder el comentario, debe devolver el valor falso para que no se siga el enlace hasta que la llamada ajax se complete con éxito.

Fuente

2010-04-22 22:13:57 zaius

Es más o menos inútil 'devolver falso' si solo vas a navegar por el navegador al 'link.attr ('href')' de todos modos. Simplemente 'return true;' y el navegador lo hará por usted. – dlamotte

+1 solo para navegar si la publicación es un éxito, pero ha tenido algunos problemas con window.location e IE pidiendo permiso al usuario cuando no como resultado del evento de clic directo; esto puede ocurrir si el resultado de la devolución de llamada en el ajax –

Consulte la documentación del ajax method. Otros métodos (como post) son solo accesos directos a ajax.

$(document).ready(function(){ 
    $('#hotlink').click(function(){ 
    //AJAX Post data here ... 
    $.ajax({ 
     async: false, 
     data: 'can be a string or object, read docs', 
     url: 'http://example.com/whatever.html', 
     type: 'post' 
    }); 

    //follow the link url (i.e. navigate/browse to the link) ... 
    //(it happens naturally by clicking a link, no need for extra code) 
    }); 
});

Tenga en cuenta que he especificado que esta llamada debería realizarse de forma síncrona. De esta forma, puede estar seguro de que el servidor recibe los datos antes de que el navegador navegue a una página nueva.

Fuente

2010-04-22 22:15:07

Probablemente quiera garantizarle que 'devuelve verdadero;' o puede que no suceda naturalmente. – dlamotte

@xyld, 'return true' no es necesario. – nickf

@Ken: las solicitudes sincrónicas rara vez son solicitadas, y no son la respuesta correcta aquí. Bloquea el navegador mientras se procesa la solicitud. – nickf

Casi perfecto;)

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#hotlink').click(function(event){ 
    //AJAX Post data here 
    }); 
}); 
</script>

se le olvidó el signo # para encontrar su elemento de enlace. El enlace se seguirá automáticamente siempre que no llame al event.preventDefault().

Si desea enviar una solicitud AJAX, le sugiero que envíe una síncrona, de lo contrario no podrá averiguar si fue exitosa o no.

Fuente

2010-04-22 22:17:14

(JQuery) Cómo llamar a una función personalizada antes de seguir el enlace

Respuesta

Cuestiones relacionadas