Come utilizzare l'evento click jQuery per modificare il valore href in modo asincrono, basato su una query JSON

Question

Sto utilizzando il servizio di abbreviazione dell'URL bit.ly per abbreviare determinati URL inviati a una condivisione di " twitter " funzione. Vorrei caricare l'URL bit.ly solo quando un utente preme effettivamente il pulsante di condivisione (a causa della limitazione massima di 5 req paralleli di bit.ly). API REST di Bit.ly restituisce una richiamata JSON con l'URL abbreviato, che rende l'intero scenario asincrono.

Ho provato quanto segue per interrompere l'evento click e attendere che la chiamata JSON restituisca un valore prima di lanciare il clic.

Ho il seguente codice semplificato in jQuery (document) .ready ():

Codice aggiornato (semplificato eccessivamente)!

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

E il seguente codice per gestire l'accorciamento bit (funziona bene):

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)

L'href viene modificato, ma l'evento .click () finale non viene mai generato. Funziona bene quando si definisce un valore statico per href, ma non quando si utilizza il metodo JSON asincrono.

Answer 1

@Tzury Bar Yochay mi ha indicato la giusta direzione suggerendomi di usare location.href per aggiornare l'url. Anche @Victor ha aiutato con la sua risposta.

Ho fatto funzionare le cose unendo le risposte, ma ho avuto problemi con la storia di Firefox. Sembra che l'aggiornamento window.location abbia effettivamente reindirizzato l'utente, ma ha anche rimosso il " ; pagina di origine " dalla storia. Ciò non è avvenuto non in Chrome, Safari, ie8, ie8-compatibilità o ie7.

Basato su questa risposta a un'altra domanda Sono stato in grado di creare una soluzione alternativa fornendo il seguente codice di lavoro + apportato alcune modifiche:

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;
});

Grazie per tutto l'aiuto!

Answer 2

Come ti sei delineato:

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

Ciò significa che IL BROWSER NON VA A QUESTO URL , se desideri effettivamente andare avanti nella posizione dell'URL lungo, fai semplicemente qualcosa del tipo:

document.location.href = longurl;

Answer 3

iirc, jquery non attiva " fai clic " su A elementi. Vorrei provare il vecchio bene " location.href = qualunque cosa " nel callback.

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

Answer 4

Penso che ciò che vuoi effettivamente sia restituire false; dall'evento click, per impedire l'effettivo seguito dell'href, giusto?

Come:

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;
});