Comment utiliser l'événement click jQuery pour modifier la valeur href de manière asynchrone, en fonction d'une requête JSON

Question

J'utilise le service de raccourcissement de l'URL bit.ly pour raccourcir l'envoi de certaines URL à un partage " sur twitter " une fonction. J'aimerais charger l'URL bit.ly uniquement lorsqu'un utilisateur appuie sur le bouton de partage (en raison de la limitation maximale de 5 demandes parallèles de bit.ly). l'API REST de Bit.ly renvoie un rappel JSON avec l'URL raccourcie, ce qui rend le scénario entier asynchrone.

J'ai essayé ce qui suit pour arrêter l'événement click et attendre que l'appel JSON renvoie une valeur avant de lancer le clic.

J'ai le code simplifié suivant dans jQuery (document) .ready ():

Code mis à jour (simplifié à l'excès)!

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

Et le code suivant pour gérer le raccourcissement binaire (fonctionne très 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)

La valeur de href est modifiée, mais l'événement final .click () n'est jamais déclenché. Cela fonctionne bien lorsque vous définissez une valeur statique pour href, mais pas lorsque vous utilisez la méthode JSON asynchrone.

Answer 1

@Tzury Bar Yochay m'a orientée dans la bonne direction en suggérant que j'utilise location.href pour mettre à jour l'URL. @Victor a également contribué à sa réponse.

J'ai eu des problèmes en combinant les réponses, mais des problèmes avec l'historique de Firefox. Il semble que la mise à jour de la window.location ait effectivement redirigé l'utilisateur, mais a également supprimé le " ; page source " de l'histoire. Cela ne se produit pas dans chrome, safari, ie8, ie8-compatibilité ou ie7.

D'après cette réponse à une autre question J'ai pu créer une solution de contournement en donnant le code de travail suivant + apporté quelques modifications:

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

Merci pour toute l'aide!

Answer 2

Comme vous l'avez décrit vous-même:

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

Cela signifie que, le navigateur ne va pas à cette adresse , si vous souhaitez aller à l'emplacement de l'URL long, procédez comme suit:

document.location.href = longurl;

Answer 3

iirc, jQuery ne déclenche pas le "clic". sur des éléments. J'essaierais les bons vieux "location.href = que" dans le rappel.

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

Answer 4

Je pense que ce que vous voulez réellement, c'est renvoyer false; à partir de l'événement click, pour empêcher le suivi du href, n'est-ce pas?

J'aime:

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