Need help figuring this jQuery out...

[Jaxel]

Javascript is still new to me, especially jQuery... so I'm wondering if someone knowledgeable would help me out with this... Basically lets say I have the following HTML on my page...

<div class="streamTime" data-service="justintv" data-serviceval="peacefuljay">
    there is some text here...
</div>
<div class="streamTime" data-service="justintv" data-serviceval="jaxelrod">
    there is some text here too...
</div>

I want to run some jQuery on this html... The jQuery should search for all elements of the class "streamTime" and run some code on it after the page has loaded...

IF (data-service == justintv AND data-serviceval)
{
    GET http://api.justin.tv/api/stream/summary.json?channel={data-serviceval}
    REPLACE contents of streamTime div with "viewers_count" from JSON
}

This is what I got so far... but I dont know how to do the rest...

/** @param {jQuery} $ jQuery Object */
!function($, window, document, _undefined)
{
XenForo.StreamTime = function($time)
{
var query = 'http://api.justin.tv/api/stream/summary.json?jsonp=?';
args = { 'channel':'peacefuljay' };

$.getJSON(query, args, function(data)
{
var str = '<b>Currently Live</b> ('+data['viewers_count']+' viewers)';
$time.find('.streamTime').html(str);
});
}

// *********************************************************************

XenForo.register('#eventsUpcoming li', 'XenForo.StreamTime');
}
(jQuery, this, document);

Basically, the question is, how do I use data-service and data-serviceval in the javascript? Right now I am forcing the justintv check with peacefuljay... I want this done automatically.

 

[Luke F]

$(this).args('data-service')

 

[Jaxel]

$(this).args('data-service')

Hmm... i tried this:

 var args = { 'channel':$(this).args('data-serviceval') };

But this gives me an error:

EWRatendo_ajax.js:7Uncaught TypeError: Object #<Object> has no method 'args'

 

[Jaxel]

I got it! thanks!

/** @param {jQuery} $ jQuery Object */
!function($, window, document, _undefined)
{
    XenForo.StreamTime = function($time)
    {
        function updateTime(jsonData)
        {
            var str = '<b>Currently Live</b> ('+jsonData['viewers_count']+' viewers)';
            $time.find('.eventTime').html(str);
        }

        if ($time.data('service') == 'justintv')
        {
            var query = 'http://api.justin.tv/api/stream/summary.json?jsonp=?';
            var args = { 'channel':$time.data('serviceval') };
            $.getJSON(query, args, function(data) { updateTime(data); });
        }
    }

    // *********************************************************************

    XenForo.register('#eventsUpcoming li', 'XenForo.StreamTime');
}
(jQuery, this, document);

 

[Luke F]

Try $time in place of $(this)

 

[Jaxel]

Try $time in place of $(this)

Okay... so JustinTV is working great... I'm having some issues with Ustream however...

        if ($time.data('service') == 'ustream')
        {
            var query = 'http://api.ustream.tv/json/channel/'+$time.data('serviceval')+'/getValueOf/status?jsonp=?';
            $.getJSON(query, function(data)
            {
                if (data['results'] == 'live')
                {
                    var str = '<b>Currently Live</b> (??? viewers)';
                    $time.find('.eventTime').html(str);
                }
            });
        }

This is going to: http://api.ustream.tv/json/channel/masaiblog/getValueOf/status

However, instead of working the same way it works with JTV, I am getting an error:

{"results":"live","msg":null,"error":null,"processTime":true,"version":"mashery-r10"}
Uncaught SyntaxError: Unexpected token :

I have no idea what that means.

 

[Jaxel]

figured it out... jsonp was not the correct callback.