• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Need help figuring this jQuery out...

Jaxel

Well-known member
#1
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...
HTML:
<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...
Code:
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...
PHP:
/** @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.
 

Jaxel

Well-known member
#4
I got it! thanks!

Code:
/** @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);
 

Jaxel

Well-known member
#6
Try $time in place of $(this)
Okay... so JustinTV is working great... I'm having some issues with Ustream however...
PHP:
        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.