Question

I have the following code. If I hard code the link it runs correctly. If I alert theLink I get all the different short url’s alerted one by one. But when I try to pass each of these values into the ajax call the code breaks..any help would be appreciated:

$(document).ready(function(){ 

//find all the shornened urls
    $.each($('.shortenedUrl'), function(index, value) {
    inline_stats_lookup(value);             
    });

function inline_stats_lookup(theLink)
{       
    alert(theLink);
    //var theLink = "http://goo.gl/b9N1k";
    $.post('http://qrcodes.weddingdecorationss.com/tracking/inline_statistics', {url: theLink}, function(response, status, xhr) {

    if (status == 'error') 
    {
        var msg = "Sorry but there was an error: ";
        $("#results").html(msg + xhr.status + " " + xhr.statusText);
    }
    else
    {
        //$('.clicksAllTime').empty().append('<p>' + response[0].analytics.allTime.shortUrlClicks + '</p>');
        //$('.clicksToday').empty().append('<p>' + response[0].analytics.day.shortUrlClicks + '</p>');

    }
}, "json");     


}


}); 

Answer 1

The problem is that you’re looping through all anchors, and passing value. value is a HTMLAnchorElement.

The .toString() method of an anchor returns the href value of an anchor, that’s why alert prints the URL.

You have to pass value.href instead of value, to get the code to work:

$('.shortenedUrl').each(function() { // <-- index, value not used:
    inline_stats_lookup(this.href);  // this === value for elements
});