Cómo usar el evento de clic jQuery para cambiar el valor href de forma asincrónica, según una consulta JSON

Question

Estoy usando el servicio de acortamiento de URL bit.ly para acortar ciertas URL que se envían a un " compartir en twitter " función. Me gustaría cargar la URL de bit.ly solo cuando un usuario realmente presiona el botón de compartir (debido a la limitación máxima de 5 requisitos paralelos de bit.ly). API REST de Bit.ly devuelve una devolución de llamada JSON con la URL acortada, lo que hace que todo el escenario sea asíncrono.

He intentado lo siguiente para detener el evento de clic y esperar a que la llamada JSON devuelva un valor antes de iniciar el clic.

Tengo el siguiente código simplificado en jQuery (document) .ready ():

¡Código actualizado (simplificado en exceso)!

jQuery("#idofaelement").click(function(event) {
    event.preventDefault(); //stop the click action
    var link = jQuery(this);
    bitlyJSON(function(shortUrl) {
        link.attr("href", function() {
          //process shortUrl
          //return finalized url;                   
        }).unbind().click();
    });
});

Y el siguiente código para manejar el acortamiento de bits (funciona bien):

function bitlyJSON(func) {
//
// build apiUrl here
//
jQuery.getJSON(apiUrl, function(data) {
    jQuery.each(data, function(i, entry) {
        if (i == "errorCode") {
            if (entry != "0") {
                func(longUrl);}
        } else if (i == "results") {
            func(entry[longUrl].shortUrl);}
    });
});  
} (jQuery)

El href cambia su valor, pero el evento final .click () nunca se activa. Esto funciona bien cuando se define un valor estático para href, pero no cuando se usa el método JSON asíncrono.

Answer 1

@Tzury Bar Yochay me señaló en la dirección correcta al sugerirme que use location.href para actualizar la url También @Victor ayudó con su respuesta.

Tengo cosas que funcionan un poco combinando las respuestas, pero tuve problemas con el historial en Firefox. Parece que la actualización de window.location de hecho redirigió al usuario, pero también eliminó el " ; página de origen " de la historia Esto no sucedió en Chrome, Safari, ie8, compatibilidad ie8 o ie7.

Basado en esta respuesta a otra pregunta Pude crear una solución alternativa dando el siguiente código de trabajo + hice algunos cambios:

jQuery("#idofaelement").one("click", function(event) {
    bitlyJSON(function(shortUrl) {
        jQuery("#idofaelement").attr("href", function() {
            //process shortUrl
            //return finalized url;                   
        });
        setTimeout(function() {
            window.location = jQuery("#idofaelement").attr("href");
        }, 0);
    });
    return false;
});

¡Gracias por toda la ayuda!

Answer 2

Como te describiste:

event.preventDefault(); //stop the click action

Eso significa que NAVEGADOR NO IRÁ A ESE URL , si realmente desea avanzar a la ubicación de URL larga, simplemente haga algo como:

document.location.href = longurl;

Answer 3

iirc, jquery no activa " clic " en elementos A Probaría bien viejo " location.href = lo que sea " en la devolución de llamada.

 bitlyJSON(function(shortUrl) {
      link.attr("href", function() {
      //process shortUrl
      //return finalized url;                   
    });
    location.href = link.attr("href");
});

Answer 4

Creo que lo que realmente quieres es return false; del evento click, para evitar el seguimiento real de href, ¿verdad?

Me gusta:

jQuery("#idofaelement").click(function(event) {
    //event.preventDefault(); //stop the click action
    var link = jQuery(this);
    bitlyJSON(function(shortUrl) {
        link.attr("href", function() {
        //process shortUrl
        //return finalized url;                   
        }).unbind().click();
    });
    return false;
});