I want when my ajax detect changes on database automatically show the content in html without refresh , but it isnt doing nothing. I have to refresh the page , how can I fix it? I am trying to do ajax long polling
$(function(doc, win, $) {
var has_focus = true;
var notification = win.Notification || win.mozNotification || win.webkitNotification;
var $badge = $("#notifications-badge");
var $list = $("#notifications-list");
var $button = $("#notifications-button");
URL_GET_NOTIFICATION = BASE_URL + 'notify/pusher';
URL_GET_NOTIFICATION_UPDATE = BASE_URL + 'notify/update';
if ('undefined' === typeof notification) {
console.log('Web notification not supported');
} else {
notification.requestPermission(function(permission) {});
}
function check_notifications(timestamp) {
$.ajax({
type: 'GET',
url: URL_GET_NOTIFICATION,
data: { timestamp : timestamp },
dataType: 'json',
async: true,
success: function (data) {
for (var i in data.notifications) {
notify(data.notifications[i].message, data.notifications[i].type, data.notifications[i].timestamp);
}
check_notifications(data.timestamp);
}
});
}
function notify(message, type, created_at) {
var type_txt = 'info';
var url = '#';
var icon = 'info-circle';
if (type == 0) {
type_txt = 'success';
icon = 'check';
} else if (type == 1) {
type_txt = 'info';
icon = 'exclamation';
} else if (type == 2) {
type_txt = 'warning';
icon = 'exclamation-triangle';
} else if (type == 3 || type == 4) {
type_txt = 'danger';
icon = 'fire';
}
$badge.show();
$badge.text(parseInt($badge.text()) + 1);
$list.find(".item").eq(13).nextAll(".item").remove();
var item = '<li class="item text-' + type_txt + '"><a href="' + url + '"><span class="text-' + type_txt + '">' +
'<i class="fa fa-' + icon + ' fa-fw"></i> ' + message.substr(0, 22) + '</span>' +
'<span class="pull-right text-muted small" data-time="' + created_at + '">X</span></a></li>' +
'<li class="item divider"></li>';
$list.prepend(item);
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
return true;
}
$(win).on("blur", function () {
has_focus = false;
});
$(win).on("focus", function () {
has_focus = true;
});
$button.on("click", function () {
$badge.fadeOut(300, function () {
$badge.text(0);
});
$list.find("span[data-time]").each(function (index) {
var $this = $(this);
$this.text(moment.unix($this.data('time')).fromNow());
});
});
check_notifications();
}(document, window, jQuery));
Related
I have a search box where users can search for products. This drop down shows all of the products. I am trying to Scroll down the list using scroller but when i scroll down it goes up
if ($('#search_product').length) {
//Add Product
$('#search_product')
.autocomplete({
source: function(request, response) {
var price_group = '';
var search_fields = [];
$('.search_fields:checked').each(function(i){
search_fields[i] = $(this).val();
});
if ($('#price_group').length > 0) {
price_group = $('#price_group').val();
}
$.getJSON(
'/products/list',
{
price_group: price_group,
location_id: $('input#location_id').val(),
term: request.term,
not_for_selling: 0,
search_fields: search_fields
},
response
);
},
minLength: 2,
response: function(event, ui) {
if (ui.content.length == 1) {
ui.item = ui.content[0];
if ((ui.item.enable_stock == 1 && ui.item.qty_available > 0) ||
(ui.item.enable_stock == 0)) {
$(this)
.data('ui-autocomplete')
._trigger('select', 'autocompleteselect', ui);
$(this).autocomplete('close');
}
} else if (ui.content.length == 0) {
toastr.error(LANG.no_products_found);
$('input#search_product').select();
}
},
focus: function(event, ui) {
if (ui.item.qty_available <= 0) {
return false;
}
},
select: function(event, ui) {
var searched_term = $(this).val();
var is_overselling_allowed = false;
if($('input#is_overselling_allowed').length) {
is_overselling_allowed = true;
}
if (ui.item.enable_stock != 1 || ui.item.qty_available > 0 || is_overselling_allowed) {
$(this).val(null);
//Pre select lot number only if the searched term is same as the lot number
var purchase_line_id = ui.item.purchase_line_id && searched_term == ui.item.lot_number ? ui.item.purchase_line_id : null;
pos_product_row(ui.item.variation_id, purchase_line_id);
} else {
alert(LANG.out_of_stock);
}
},
})
.autocomplete('instance')._renderItem = function(ul, item) {
var is_overselling_allowed = false;
if($('input#is_overselling_allowed').length) {
is_overselling_allowed = true;
}
if (item.enable_stock == 1 && item.qty_available <= 0 && !is_overselling_allowed) {
var string = '<li class="ui-state-disabled">' + item.name;
if (item.type == 'variable') {
string += '-' + item.variation;
}
var selling_price = item.selling_price;
if (item.variation_group_price) {
selling_price = item.variation_group_price;
}
string +=
' (' +
item.sub_sku +
')' +
'<br> Price: ' +
selling_price +
' (Out of stock) </li>';
return $(string).appendTo(ul);
} else {
var string = '<div class="col-md-10">' + item.name;
if (item.type == 'variable') {
string += '-' + item.variation;
}
var selling_price = item.selling_price;
if (item.variation_group_price) {
selling_price = item.variation_group_price;
}
string += ' (' + item.sub_sku + ')' + '<br> Price: ' + selling_price;
if (item.enable_stock == 1) {
var qty_available = __currency_trans_from_en(item.qty_available, false, false, __currency_precision, true);
string += ' - ' + qty_available + item.unit;
}
string += '</div>';
string += '<div class="col-md-2" style="text-align:right"> <img src="' + item.image_url + '" width="100" hight="100"> </div>';
return $('<li>')
.append(string)
.appendTo(ul);
}
};
}
Am not sure where am going wrong. Any help is appreciated. when i try to scroll down it allows scrolling but it goes to top instantly top first few results
Thanks in advance.
Laravel Blade Code
{!! Form::text('search_product', null, ['class' => 'form-control mousetrap', 'id' => 'search_product', 'placeholder' => __('lang_v1.search_product_placeholder'),
'disabled' => is_null($default_location)? true : false,
'autofocus' => is_null($default_location)? false : true,
]); !!}
I have function written in one js file with deferred and promise. After that I am calling that function in another HTML file where I create menu this page will work as web part. So I want to run the function after that menu generate, how can I do that.
Ph.DAL = function() {
this.getRequest = function(listName, select, filter, orderby, top, _async) {
var dfd = $.Deferred()
var request = baseRequest
request.type = 'GET'
request.async = _async
request.url =
siteAbsoluteUrl +
"/_api/web/lists/getbytitle('" +
listName +
"')/items?" +
(this.isNullOrEmpty(select) ? '' : '$select=' + select) +
'&' +
(this.isNullOrEmpty(filter) ? '' : '$filter=' + filter) +
'&' +
(this.isNullOrEmpty(orderby) ? '' : '$orderby=' + orderby) +
'&' +
(this.isNullOrEmpty(top) ? '' : '$top=' + top)
request.headers = { ACCEPT: 'application/json;odata=verbose' }
dfd = $.ajax(request)
return dfd.promise()
}
Which I am calling from another html page to generate dynamic menu
$(document).ready(function() {
var utility = new Ph.DAL()
var menuHTML = ''
utility
.getRequest(
'Navigation',
'Id,Title,Icon,URL,Target,ParentId,OrderBy',
"Active eq 'Yes'",
'',
'',
true
)
.done(function(data) {
if (data && data.d && data.d.results && data.d.results.length > 0) {
createMenu(data.d.results, null)
}
$('#respMenu').html(menuHTML)
$('#respMenu').aceResponsiveMenu({
resizeWidth: '768', // Set the same in Media query
animationSpeed: 'fast', //slow, medium, fast
accoridonExpAll: false, //Expands all the accordion menu on click
})
})
function createMenu(jSON, parentId) {
var _menu
_menu = Enumerable.from(jSON)
.where(function(value) {
return value.ParentId == parentId
})
.orderBy(function(value) {
return value.OrderBy
})
.toArray()
if (_menu.length > 0) {
_menu.map(function(item, i) {
menuHTML +=
'<li class="' +
(item.URL.toLowerCase() == utility.pageName.toLowerCase() ? 'active' : '') +
'"><a href="' +
item.URL +
'">'
menuHTML +=
'<i class="' +
item.Icon +
'"></i><span class="title">' +
item.Title +
'</span></a>'
var subMenu = Enumerable.from(jSON)
.where(function(value) {
return value.ParentId == item.Id
})
.orderBy(function(value) {
return value.OrderBy
})
.toArray()
if (subMenu.length > 0) {
createSubMenu(jSON, subMenu)
}
menuHTML += '</li>'
})
}
}
function createSubMenu(mainData, data) {
menuHTML += '<ul>'
data.map(function(item, i) {
menuHTML += '<li>' + item.Title + ''
var subMenu = Enumerable.from(mainData)
.where(function(value) {
return value.ParentId == item.Id
})
.orderBy(function(value) {
return value.OrderBy
})
.toArray()
if (subMenu.length > 0) {
createSubMenu(mainData, subMenu)
}
})
menuHTML += '</li></ul>'
}
})
Now I am trying to loop li and want to add active class on particular class but menu generated and function call is earlier so it not working. How can I do that.
Run this function after menu creation
$.menuActive = function (menuItem) {
$('#respMenu li').each(function() {
if ($(this).text() == menuItem) {
$(this).addClass('active')
return false
}
})
}
You should try to use the MutationObserver API
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// Do something here
});
});
mutationObserver.observe(myRefElement, {attributes: true})
//You can use custom events
//Do this after $('#respMenu').html(menuHTML)
$( "#respMenu" ).trigger( "list_ready" );
//In another file
$( "#respMenu" ).on( "list_ready", function () {
//Do ur stuff here
});
So on localhost I have no issues with the function at all, it works flawless but now I uploaded it to my host and it doesn't seem to work anymore. The form gets somewhat submitted and the URL gets all the info from the datastring in it. Please help me fix it.
This gets added to the URL in the addressbar:
?inlineRadioOptions=pre-set&customname=&customtype=&Crime=&DescriptionForm=&inlineRadioOptions3=none&Report=&selected-text=1&CordX=4675&CordY=4558&SubmitCrime=
$("#CrimeForm").submit(function(e) {
e.preventDefault();
if ($('#RadioCrime2').is(':checked')) {
var Crime = $("#customname").val();
var Type = $("#customtype").val();
} else {
var Crime = $("#select2").val();
var Type = 'NONE';
}
if ($('#RadioDiv2').is(':checked')) {
var UseDiv = 1;
} else {
var UseDiv = 0;
}
var value = $(this).find('select[name="DivisionSelect"]').val();
var divss = (value ? value.join('') : '');
var DescriptionForm = $("#DescriptionForm").val();
var Report = $("#Report").val();
var PinID = $("#selected-text").val();
var CordX = $("#CordXNew").val();
var CordY = $("#CordYNew").val();
var UserID = <?php echo $AccountID;?>;
var dataString = 'Crime=' + Crime + '&Type=' + Type + '&DescriptionForm=' + DescriptionForm + '&PinID=' + PinID + '&CordX=' + CordX + '&CordY=' + CordY + '&UserID=' + UserID + '&DivSelect=' + UseDiv + '&Divs=' + divss + '&Report=' + Report;
if (Crime == '' || Type == '' || DescriptionForm == '' || PinID == '' || CordX == '' || CordY == '') {
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You need to fill out everything!</div>';
} else {
var n = DescriptionForm.length;
if (n > 500) {
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You have ' + n + ' characters in the description, limit them to 500!</div>';
} else {
$.ajax({
type: "POST",
url: "SendInput.php",
data: dataString,
cache: false,
success: function(result) {
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-success" role="alert">' + result + '</div>';
$('#DescriptionForm').val('');
$('#customname').val('');
$('#Report').val('');
$('#customtype').prop('selectedIndex', 0);
$("#select2").val(null).trigger("change");
document.getElementById("CustomCrime").style.display = "none";
document.getElementById("DefaultCrime").style.display = "block";
document.getElementById("RadioCrime").checked = true;
document.getElementById("RadioDiv").checked = true;
document.getElementById("ChooseDivision").style.display = "none";
$("#DivisionSelect option:selected").prop("selected", false);
}
});
}
}
return false;
});
Instead of relying on form submission and its event cancellation, you can use a regular button within your form.
The button being sort of like:<input type='button' id='btnSendCrimeForm' value='Send Form' />
Then, within the contents of a document.ready callback, you can register to the aforementioned button's click event, within which you execute the code you wanted to execute upon form submission.
$("#btnSendCrimeForm").click(function(e) {
if($('#RadioCrime2').is(':checked')) {
var Crime = $("#customname").val();
var Type = $("#customtype").val();
}else{
var Crime = $("#select2").val();
var Type = 'NONE';
}
if($('#RadioDiv2').is(':checked')) {
var UseDiv = 1;
}else{
var UseDiv = 0;
}
var value = $(this).find('select[name="DivisionSelect"]').val();
var divss = (value ? value.join('') : '');
var DescriptionForm = $("#DescriptionForm").val();
var Report = $("#Report").val();
var PinID = $("#selected-text").val();
var CordX = $("#CordXNew").val();
var CordY = $("#CordYNew").val();
var UserID = <?php echo $AccountID;?>;
var dataString = 'Crime='+ Crime + '&Type='+ Type + '&DescriptionForm='+ DescriptionForm +'&PinID='+ PinID + '&CordX='+ CordX + '&CordY='+ CordY + '&UserID='+ UserID + '&DivSelect='+ UseDiv + '&Divs='+ divss + '&Report='+ Report;
if(Crime==''||Type==''||DescriptionForm==''||PinID==''||CordX==''||CordY=='')
{
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You need to fill out everything!</div>';
}
else
{
var n = DescriptionForm.length;
if(n > 500){
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You have '+ n +' characters in the description, limit them to 500!</div>';
}else{
$.ajax({
type: "POST",
url: "SendInput.php",
data: dataString,
cache: false,
success: function(result){
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-success" role="alert">'+result+'</div>';
$('#DescriptionForm').val('');
$('#customname').val('');
$('#Report').val('');
$('#customtype').prop('selectedIndex',0);
$("#select2").val(null).trigger("change");
document.getElementById("CustomCrime").style.display = "none";
document.getElementById("DefaultCrime").style.display = "block";
document.getElementById("RadioCrime").checked = true;
document.getElementById("RadioDiv").checked = true;
document.getElementById("ChooseDivision").style.display = "none";
$("#DivisionSelect option:selected").prop("selected", false);
}
});
}
}
return false;
});
i have two data attributes one in decreasing every second and is 0 when the first attribute reach 0 an ajax request is send to get the second data value but when i set the value to the second data attribute is not changed in html but when i printed it changed !!!
my code
setInterval(
function () {
if ($j('#auctions-widget .auction_hours').length) {
var auctions_hours = [];
$j('#auctions-widget .auction_hours').each(function () {
auctions_hours.push($j(this).data('auction-id'));
});
for (var i = 0; i < auctions_hours.length; i++) {
checkAuctionHours(auctions_hours[i]);
}
}
}
, 1000);
function checkAuctionHours(auction_id) {
//var TimeWorker = new Date();
var auction_hours = $j("body").find(".auction_hours[data-auction-id='" + auction_id + "']");
if (auction_hours.length) {
//if(auction_id == 1637 && (auction_hours.data("open-contest-hours") !=0 || auction_hours.data("close-contest-hours")!=0) ){
//console.log('time to open-contest-hours: ' + auction_hours.data("open-contest-hours") + ' id= ' + auction_id);
//console.log('time to close-contest-hours: ' + auction_hours.data("close-contest-hours") + ' id= ' + auction_id);
//}
if (auction_hours.data("open-contest-hours") != 0) {
auction_hours.data("open-contest-hours", auction_hours.data("open-contest-hours") - 1);
console.log('time to open-contest-hours: ' + auction_hours.data("open-contest-hours") + ' id= ' + auction_id);
//validate_auctions_hours_time(auction_id, 'open');
//console.log('open');
//console.log(auction_id);
if (auction_hours.data("open-contest-hours") == 0) { //time to open auction based on auction hours
//send the ajax to check;
//console.log('open');
validate_auctions_hours_time(auction_id, 'open');
}
} else if (auction_hours.data("close-contest-hours") != 0) {
auction_hours.data("close-contest-hours", auction_hours.data("close-contest-hours") - 1);
console.log('time to close-contest-hours: ' + auction_hours.data("close-contest-hours") + ' id= ' + auction_id);
//validate_auctions_hours_time(auction_id, 'close');
if (auction_hours.data("close-contest-hours") == 0) { //time to close auction based on auction hours
//send the ajax to check;
//console.log('close');
validate_auctions_hours_time(auction_id, 'close');
}
} else if (auction_hours.data("open-contest-hours") == 0 && auction_hours.data("close-contest-hours") == 0) {
} else {
}
}
}
ajax code
function validate_auctions_hours_time(auction_id, auction_hours_status) {
$.ajax({
async: true,
url: my_ajax_script.ajaxurl,
type: 'POST',
data: ({
type: 'POST',
action: 'validate_auction_hours_time',
auction_id: auction_id,
auction_hours_status: auction_hours_status
}),
success: function (response) {
var auction_hours = $("body").find(".auction_hours[data-auction-id='" + auction_id + "']");
var auction_hours_img = '';
if (response.time_status == 'OK') {
if (response.auction_hours_open_time) { //close auction till next from auction hours
//auction_hours.data('open-contest-hours', response.auction_hours_open_time);
auction_hours.attr('data-open-contest-hours', response.auction_hours_open_time);
console.log(auction_hours.attr('data-open-contest-hours'));
auction_hours_img = $("body").find(".open-hours-active[data-auction-hours-img='" + auction_id + "']");
auction_hours_img.removeClass('open-hours-active');
auction_hours_img.parent().removeClass('auction_hours_blink').removeClass('auction_hours_reset_blink');
auction_hours_img.parent().addClass('auction_hours_blink');
auction_hours_img.addClass('open-hours-deactive');
$('#' + auction_hours_img.data('selector')).html(response.tool_tip);
} else if (response.auction_hours_close_time) { //open auction till next to auction hours
//auction_hours.data('close-contest-hours', response.auction_hours_close_time);
auction_hours.attr('data-close-contest-hours', response.auction_hours_close_time);
console.log(auction_hours.attr('data-close-contest-hours'));
console.log(auction_hours);
auction_hours_img = $("body").find(".open-hours-deactive[data-auction-hours-img='" + auction_id + "']");
auction_hours_img.removeClass('open-hours-deactive');
auction_hours_img.parent().removeClass('auction_hours_blink').removeClass('auction_hours_reset_blink');
auction_hours_img.parent().addClass('auction_hours_blink');
auction_hours_img.addClass('open-hours-active');
$('#' + auction_hours_img.data('selector')).html(response.tool_tip);
}
}
else if (response.time_status == 'RESET') {
if (response.auction_hours_open_time) { //sync auction to auction hours
auction_hours_img = $("body").find(".open-hours-deactive[data-auction-hours-img='" + auction_id + "']");
auction_hours.data('open-contest-hours', response.auction_hours_open_time);
auction_hours_img.parent().removeClass('auction_hours_reset_blink').removeClass('auction_hours_blink');
auction_hours_img.parent().addClass('auction_hours_reset_blink');
} else if (response.auction_hours_close_time) { //sync auction from auction hours
auction_hours_img = $("body").find(".open-hours-active[data-auction-hours-img='" + auction_id + "']");
auction_hours.data('close-contest-hours', response.auction_hours_close_time);
auction_hours_img.parent().removeClass('auction_hours_reset_blink').removeClass('auction_hours_blink');
auction_hours_img.parent().addClass('auction_hours_reset_blink');
} else {
}
}
},
error: function (jqXHR, textStatus, errorThrown) {
response_errors_handling(jqXHR, textStatus, errorThrown);
}
});
finally i try to replace all the auction_hours.data with auction_hours.attr in all the code and it work fine.
var name, logo, streaming,twitchfeed;
var users = ["freecodecamp", "medrybw", "geoffstorbeck",
"terakilobyte", "habathcx", "robotCaleb",
"thomasballinger", "noobs2ninjas", "beohoff","boonyzarc"
];
function getInfo(){
users.forEach(function(user) {
var channelURL = 'https://api.twitch.tv/kraken/channels/' + user + '?callback=?';
var streamURL = 'https://api.twitch.tv/kraken/streams/' + user + '?callback=?';
$.getJSON(channelURL, function(channel) {
$.getJSON(streamURL, function(stream) {
if (stream.stream === null) {
streaming = '<span class="label label-danger pull-right label-rawle offline"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></span>';
} else {
streaming = '<span class="label label-success pull-right label-rawle online"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></span>';
}
twitchfeed = channel.url;
console.log(twitchfeed);
name = channel.display_name;
if (channel.logo === null) {
channel.logo = 'https://c1.staticflickr.com/1/186/382004453_f4b2772254.jpg';
}
logo = '<img src="' + channel.logo + '" class="logo">';
$('#person').append('<div class="user" id="' + name + '">');
$('#' + name).append(logo + '' + '<span class="name">' + name + '</span>' + '' + '</div>' + streaming);
$('#' + name).append('<div class="topic">' + stream.stream.channel.status + '</div>');
});
// what happens when tabs are clicked
$(function() {
// 'all' tab
$('#all').click(function() {
$('#all').addClass('active');
$('#online').removeClass('active');
$('#offline').removeClass('active');
$(".user").show();
});
});
// 'online' tab
$('#online').click(function() {
$('#all').removeClass('active');
$('#online').addClass('active');
$('#offline').removeClass('active');
$(".user").each(function() {
if ($(this).children(".offline").length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
// 'offline' tab
$('#offline').click(function() {
$('#all').removeClass('active');
$('#online').removeClass('active');
$('#offline').addClass('active');
$(".user").each(function() {
if ($(this).children(".offline").length < 1) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
});
}
//Trying to add a user
/*$('#submit-rawle-button').click(function(){
var $newUser = $('#newUser').val();
if(users.indexOf($newUser)==-1)
{
users.push($newUser);
}
getInfo();
});*/
getInfo();
I'm new to using JSON and the jquery $.getJSON function. If I pull all of the code out of the getInfo function and just call it once I have no problem. But maybe it's my lack of understanding but I thought if I put all that into a function. Then later I could add a button that after adding a new user to the user array. I could call the getInfo function again and it would give me a new JSON object updated with the new user that was added. However, instead I just get back empty objects. Will someone explain to me either why getInfo can't be called more than once or what my coding error is to not be getting updating JSON object.
The users.forEach is not waiting for the ajax calls to finish.I think the term is AJAX is asynchronous and the forEach is synchronous.
Keep this in mind every time you use ajax. I changed the code a bit so that it won't try to go to the next user UNTIL the second getJSON has finished.
There has to be a more elegant way to do this. I also recommend looking in to promises it will come in handy in the future. Hope this helps.
var name, logo, streaming, twitchfeed;
var users = ["freecodecamp", "medrybw", "geoffstorbeck",
"terakilobyte", "habathcx", "robotCaleb",
"thomasballinger", "noobs2ninjas", "beohoff", "boonyzarc"
];
function getInfo() {
var usersTotal = users.length;
var userCounter = 0;
function getNextUser() {
if (usersTotal > userCounter) {
var user = users[userCounter];
var channelURL = 'https://api.twitch.tv/kraken/channels/' + user + '?callback=?';
var streamURL = 'https://api.twitch.tv/kraken/streams/' + user + '?callback=?';
$.getJSON(channelURL, function (channel) {
$.getJSON(streamURL, function (stream) {
if (stream.stream === null) {
streaming = '<span class="label label-danger pull-right label-rawle offline"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></span>';
} else {
streaming = '<span class="label label-success pull-right label-rawle online"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></span>';
}
twitchfeed = channel.url;
console.log(twitchfeed);
name = channel.display_name;
if (channel.logo === null) {
channel.logo = 'https://c1.staticflickr.com/1/186/382004453_f4b2772254.jpg';
}
logo = '<img src="' + channel.logo + '" class="logo">';
$('#person').append('<div class="user" id="' + name + '">');
$('#' + name).append(logo + '' + '<span class="name">' + name + '</span>' + '' + '</div>' + streaming);
$('#' + name).append('<div class="topic">' + stream.stream.channel.status + '</div>');
});
// what happens when tabs are clicked
$(function () {
// 'all' tab
$('#all').click(function () {
$('#all').addClass('active');
$('#online').removeClass('active');
$('#offline').removeClass('active');
$(".user").show();
});
});
// 'online' tab
$('#online').click(function () {
$('#all').removeClass('active');
$('#online').addClass('active');
$('#offline').removeClass('active');
$(".user").each(function () {
if ($(this).children(".offline").length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
// 'offline' tab
$('#offline').click(function () {
$('#all').removeClass('active');
$('#online').removeClass('active');
$('#offline').addClass('active');
$(".user").each(function () {
if ($(this).children(".offline").length < 1) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
}
userCounter++;
getNextUser();
}
getNextUser();
}
//Trying to add a user
/*$('#submit-rawle-button').click(function(){
var $newUser = $('#newUser').val();
if(users.indexOf($newUser)==-1)
{
users.push($newUser);
}
getInfo();
});*/
getInfo();