Как использовать событие нажатия jQuery для асинхронного изменения значения href на основе запроса JSON - PullRequest
Новая
       14

Как использовать событие нажатия jQuery для асинхронного изменения значения href на основе запроса JSON

4 голосов
/ 27 октября 2009

Я использую сервис bit.ly для сокращения URL , чтобы сократить отправку определенных URL-адресов в функцию "поделиться в Twitter". Я бы хотел загружать URL-адрес bit.ly только тогда, когда пользователь действительно нажимает кнопку «Поделиться» (из-за ограничения в 5 параллельных запросов bit.ly). REST API Bit.ly возвращает обратный вызов JSON с сокращенным URL, что делает весь сценарий асинхронным.

Я попробовал следующее, чтобы остановить событие click и дождаться, пока вызов JSON вернет значение, прежде чем запускать click.

У меня есть следующий упрощенный код в jQuery (документ) .ready ():

Обновленный код (упрощенно)! 

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

И следующий код для обработки кратковременного сокращения (работает просто отлично): 

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)

Значение href изменяется, но заключительное событие .click () никогда не запускается. Это прекрасно работает при определении статического значения для href, но не при использовании асинхронного метода JSON.

Ответы [ 4 ]

5 голосов
/ 27 октября 2009

Как ты сам обрисовал: 

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

Это означает, что БРАУЗЕР НЕ НАХОДИТСЯ НА ЭТО URL-адрес , если вы действительно хотите перейти к местоположению с длинным URL, просто сделайте что-то вроде: 

document.location.href = longurl;
1 голос
/ 28 октября 2009

@ Tzury Bar Yochay указал мне правильное направление, предложив использовать location.href для обновления URL. Также @ Виктор помог с его ответом.

Я вроде как работал, комбинируя ответы, но у меня были проблемы с историей в Firefox. Кажется, что обновление window.location действительно перенаправило пользователя, но также удалило «исходную страницу» из истории. Это не произошло в chrome, safari, ie8, ie8-совместимости или ie7.

На основании этого ответа на другой вопрос Мне удалось создать обходной путь, предоставив следующий рабочий код +, внес несколько изменений: 

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

Спасибо за помощь!

1 голос
/ 27 октября 2009

Я думаю, что вы действительно хотите return false; от события click, чтобы предотвратить фактическое следование href, верно?

Как: 

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;
});
1 голос
/ 27 октября 2009

iirc, jquery не вызывает "щелчок" по элементам A. Я бы попробовал старый добрый "location.href = что угодно" в обратном вызове. 

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