Question

I have the following jQuery script…

$(function() {
    $('.eventWrapper').bind('click', function(event) {

        var srvName = $(this).data('service');
        var srvVal1 = $(this).data('serviceval');

        if (srvName == 'livestream')
        {
            var query = 'http://x'+srvVal1+'x.api.channel.livestream.com/2.0/livestatus.json?callback=?';
            $.getJSON(query, function(data)
            {
                if (data['channel']['isLive'])
                {
                    $(this).find('.eventTime').html('<b>Currently Live</b> ('+data['channel']['currentViewerCount']+' viewers)');
                }
            });
        }
    });
});

Its being run on the following code:

<div class="eventWrapper" data-service="livestream" data-serviceval="srklive">
    <div class="eventIcon"><a href=""><img src="image.php?u=3942"></a></div>
    <div class="eventName"><a href="">This is a test!</a></div>
    <div class="eventTime">09-02-2011 08:00 PM</div>
</div>

Its pretty self explanatory… it binds to the class .eventWrapper. When someone clicks anywhere in the div, it checks the data. If the data matches, it extracts a JSON query. This so far works perfectly fine.

The issue now is how to replace the text inside of the .eventTime class with what its supposed to. Obviously, I cant use $(this) because that relates to the existing getJSON function, not the bind function. How would I do this properly?

Also, how do I get the event to activate on page load, instead of on click?

Answer 1

store this as a variable to use within $.getJSON’s callback so you’re referring to the correct context/this

$(function() {
    $('.eventWrapper').bind('click', function(event) {
        var $this = $(this);
        var srvName = $(this).data('service');
        var srvVal1 = $(this).data('serviceval');

        if (srvName == 'livestream')
        {
            var query = 'http://x'+srvVal1+'x.api.channel.livestream.com/2.0/livestatus.json?callback=?';
            $.getJSON(query, function(data)
            {
                if (data['channel']['isLive'])
                {
                    $this.find('.eventTime').html('<b>Currently Live</b> ('+data['channel']['currentViewerCount']+' viewers)');
                }
            });
        }
    });
});