How to use jQuery click event to change href value asynchronously, based on a JSON query

Question

I'm using the bit.ly url shortening service to shorten certain url's being sent to a "share on twitter" function. I'd like to load the bit.ly url only when a user actually presses the share button (due to bit.ly's max 5 parallel reqs limitation). Bit.ly's REST API returns a JSON callback with the shortened url, which makes the whole scenario async.

I've tried the following to stop the click event, and wait for the JSON call to return a value before launching the click.

I have the following simplified code in jQuery(document).ready():

Updated code (oversimplified)!

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

And the following code to handle the bitly shortening (works just fine):

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)

The href gets its value changed, but the final .click() event never gets fired. This works fine when defining a static value for the href, but not when using the async JSON method.

can you please provide here the case that does work for you (the static value one)? — Tzury Bar Yochay, Oct 27 '09 at 07:55
staic value used for testing: jQuery("#idofaelement").click(function(event) {link.attr("href", "http://urlhere");}); — pavsaund, Oct 27 '09 at 08:00
Nope. just collects values and builds up the twitter url. If i replace the function and use the returned json url directly i still get the same problem: ie: ...link.attr("href", shortUrl).unbind().click();... — pavsaund, Oct 27 '09 at 08:46

score 5 · Answer 1 · answered Oct 27 '09 at 12:11

5

As you outlined yourself:

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

That means, BROWSER IS NOT GOING TO THAT URL, if you wish to actually go forward to the long-url location, simply do something like:

document.location.href = longurl;

answered Oct 27 '09 at 12:11

Tzury Bar Yochay

8,798
5
49
73

as I mentioned to @stereofrog updating the location.href does cause a correct redirect. However, when clicking back in the browser, the user skips the page that initiated the click (seemingly back 2 slots). Which isnt desireable – pavsaund Oct 27 '09 at 12:56
sorry did not notice that. so may you try to use jQuery's trigger right after the long-url arrival. But that would require and if condition within the handler. That is, if href is of short-url - get the long one and prevent defaults, otherwise, do nothing, and let the browser treat it as standard link click – Tzury Bar Yochay Oct 27 '09 at 13:04
regarding location.href: could this be a FF issue? this functionality works fine in IE8 and chrome, from what I've tested – pavsaund Oct 27 '09 at 18:01
1

Another problem with this approach is that Ctrl+click (which would open a new tab) doesn't work as expected. – intgr Apr 25 '12 at 21:21

score 1 · Answer 2 · answered Oct 27 '09 at 09:11

1

iirc, jquery doesn't trigger "click" on A elements. I'd try old good "location.href=whatever" in the callback.

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

answered Oct 27 '09 at 09:11

user187291

53,363
19
95
127

Now this actually works. Didn't think of that. On a negative note though, when pressing "back" in the browser, it doesn't go to the page that actually launched the url. – pavsaund Oct 27 '09 at 10:20
could this be a FF issue? this functionality works fine in IE8 and chrome, from what I've tested – pavsaund Oct 27 '09 at 18:00

score 1 · Answer 3 · answered Oct 27 '09 at 09:44

I think what you actually want is to return false; from the click event, to prevent the actual following of the href, right?

Like:

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

thx, but no luck here. Same end result. link opening gets stopped, and href gets updated — pavsaund, Oct 27 '09 at 09:57

score 1 · Accepted Answer · edited May 23 '17 at 10:27

@Tzury Bar Yochay pointed me in the right direction by suggesting I use location.href to update the url. Also @Victor helped with his answer.

I got things kinda working combining the answers, but had issues with the history in firefox. Seems that updating window.location indeed redirected the user, but also removed the "source page" from the history. This did not happen in chrome, safari, ie8, ie8-compatibility or ie7.

Based on this response to another question I was able to create a workaround giving the following working code + made a few changes:

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

Thanks for all the help!

How to use jQuery click event to change href value asynchronously, based on a JSON query

4 Answers4

Linked