Question

I am wondering, can this function be modified to run when the page loads instead of when the button(s) with class="statusbutton" is clicked?

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( document ).ready(function() {

    $( ".statusbutton" ).each(function(index){
        $(this).on("click", function(){
            var btnObj = this;

            $.getJSON( 'http://api.justin.tv/api/stream/list.json?channel=' + $(this).attr('id') + '&jsonp=?', function(twitchData) {

        if (typeof(twitchData[0]) !== 'undefined' && typeof(twitchData[0].stream_type) !== 'undefined') {
            if (twitchData[0].stream_type == 'live') {
                // live
                $(btnObj).css('background-color', '#00FF00');
            } else {
                // something other than live
                $(btnObj).css('background-color', '#f11');
            }
        }else{
            // no data or invalid data from twitch
            $(btnObj).css('background-color', '#f11');
        }



});

        });
    });
});

</script>
Was it helpful?

Solution

Assuming your buttons should retain the ability to trigger the AJAX request when clicked. You can just manually fire the click event on your .statusbutton buttons right after DOM ready and after binding the event handlers.

$(document).ready(function() {

    $(".statusbutton").each(function(index) {

        $(this).on("click", function() {
            var btnObj = this;
            $.getJSON('http://api.justin.tv/api/stream/list.json?channel=' + $(this).attr('id') + '&jsonp=?', function(twitchData) {
                if (typeof(twitchData[0]) !== 'undefined' && typeof(twitchData[0].stream_type) !== 'undefined') {
                    if (twitchData[0].stream_type == 'live') {
                        // live
                        $(btnObj).css('background-color', '#00FF00');
                    } else {
                        // something other than live
                        $(btnObj).css('background-color', '#f11');
                    }
                } else {
                    // no data or invalid data from twitch
                    $(btnObj).css('background-color', '#f11');
                }
            });
        });

    }).trigger('click'); // manually trigger 'click' to initiate AJAX request  

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top