jQuery, using .find on parent function?

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?

genesis · Accepted Answer · 2011-09-03 23:32:30Z

2

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

edited Sep 3, 2011 at 23:32

answered Sep 3, 2011 at 23:25

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jason Axelrod Over a year ago

thanks... that worked. Now how do I get this script to run on page load, instead of on click?

karim79 Over a year ago

I think your phrasing is a bit off. I would say "store this as a variable to use within $.getJSON's callback so you're referring to the correct context/this (or something to that effect) But +1, spot on.

genesis Over a year ago

@karim79: Sorry, I'm not a native speaker. Edited

Jason Axelrod Over a year ago

Do you know how I would get this script to run on page load, instead of click? I have tried .bind('load') but it doesnt seem to work.

genesis Over a year ago

@JasonAxelrod: delete that bind and change $this = $(this) to $this = $(".eventWrapper");

Joseph Marikle · Accepted Answer · 2011-09-03 23:25:49Z

1

Would this work?

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

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

    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'])
            {
                evtTime.html('<b>Currently Live</b> ('+data['channel']['currentViewerCount']+' viewers)');
            }
        });
    }
});

answered Sep 3, 2011 at 23:25

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Collectives™ on Stack Overflow

jQuery, using .find on parent function?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related