1. 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...

Discussion in 'XenForo Development Discussions' started by Jaxel, Mar 28, 2011.

  1. Jaxel

    Jaxel Well-Known Member

    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($, windowdocument_undefined)
    {
    XenForo.StreamTime = function($time)
    {
    var 
    query 'http://api.justin.tv/api/stream/summary.json?jsonp=?';
    args = { 'channel':'peacefuljay' };

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

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

    XenForo.register('#eventsUpcoming li''XenForo.StreamTime');
    }
    (
    jQuerythisdocument);
    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.
     
  2. Luke F

    Luke F Well-Known Member

    $(this).args('data-service')
     
    Digital Doctor likes this.
  3. Jaxel

    Jaxel Well-Known Member

    Hmm... i tried this:
    Code:
     var args = { 'channel':$(this).args('data-serviceval') };
    But this gives me an error:
     
  4. Jaxel

    Jaxel Well-Known Member

    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);
     
  5. Luke F

    Luke F Well-Known Member

    Try $time in place of $(this)
     
  6. Jaxel

    Jaxel Well-Known Member

    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:
    I have no idea what that means.
     
  7. Jaxel

    Jaxel Well-Known Member

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

Share This Page