Undefined Variable In document.write [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I keep getting "toggleOnlyRelatedPosts is not defined " in Chrome console and the script doesn't work. I'm working on this script and I've gotten lost after adding so many variables. I'm not that good at this sort of thing and to me it looks clearly defined, but I guess it's not. Chrome marks the error at the document.write
Here is the script:
<script type="text/javascript">
//<![CDATA[
function postGrabber(json) {
// The Magic
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
// Thumbnail Stuff
var orgImgUrl = json.feed.entry[i].media$thumbnail.url ? json.feed.entry[i].media$thumbnail.url : 'http://1.bp.blogspot.com/-mxinHrJWpBo/VD6fqbvI74I/AAAAAAAAcn8/LslulDeOROg/s72-c/noimage-chalkboard.jpg';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + imgSize + '-c');
var imgTag = '<a class="item-link-post" href="' + postUrl + '"><img class="item-img-thumbnail" src="' + newImgUrl + '" width="' + imgSize + '" height="' + imgSize + '"/></a>';
var authorName = json.feed.entry[i].author[0].name.$t;
var authorURL = json.feed.entry[i].author[0].uri.$t;
var authorOriImgUrl = json.feed.entry[i].author[0].gd$image.src;
var authorNewImgUrl = authorOriImgUrl.replace('s512-c', 's' + authorImgSize + '-c');
var authorImgTag = '<a class="item-link-author" href="' + authorURL + '" target="_blank" rel="nofollow"><img class="item-img-author" src="' + authorNewImgUrl + '" alt="' + authorName + '"/></a>';
var postLabel = json.feed.category[i].term;
var postLabelUrl = '/-/' + postLabel + '';
// Standard Stuff
var postTitle = json.feed.entry[i].title.$t;
var postCommentCount = json.feed.entry[i].thr$total.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, '' + summaryLength + '');
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var postDate = json.feed.entry[i].updated.$t ? json.feed.entry[i].updated.$t : json.feed.entry[i].published.$t;
var shortDate = postDate.substring(0,10);
// Let's Make Options Here
var toggleImg = showImg ? '' + imgTag + '' : '';
var toggleTitle = showTitle ? '<h1 class="item-title">' + postTitle + '</h1>' : '';
var toggleSummary = showSummary ? '<p class="item-snippet">' + postContent + '</p>' : '';
var toggleDate = showDate ? '<span class="item-date">' + shortDate + '</span>' : '';
var toggleAuthorImg = showAuthorImg ? '' + authorImgTag + '' : '';
var toggleCommentCount = showCommentCount ? '<span class="item-comment-count">' + postCommentCount + '</span>' : '';
var toggleOnlyRelatedPosts = showOnlyRelatedPosts ? '' + postLabelUrl + '' : '';
// The Output
var itemPost = '<div class="item-post"><div class="item-imgs">' + toggleImg + toggleAuthorImg + '</div>' + toggleCommentCount + '<a class="item-link" href=' + postUrl + '>' + toggleTitle + '</a>' + toggleSummary + toggleDate + '</div>';
// Let's Write It Down
document.write(itemPost);
}
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var imgSize = 96;
var summaryLength = 142;
var authorImgSize = 36;
var showImg = true;
var showTitle = true;
var showSummary = true;
var showDate = true;
var showAuthorImg = true;
var showCommentCount = true;
var showOnlyRelatedPosts = true;
document.write('<script type="text/javascript" src="/feeds/posts/summary' + toggleOnlyRelatedPosts + '?orderby=published&max-results=5&alt=json-in-script&callback=postGrabber"><\/script>');
//]]>
</script>

The variable toggleOnlyRelatedPosts is declared in the scope of the function postGrabber. It is therefore indeed undefined in the line with the document.write, where you try to use it.
If you wish to use those variables outside the function you have to declare them outside the function.
Read up on the concept of 'scope', it's pretty fundamental knowledge in any programming language.

Related

jQuery When After Each Loop

I have six static html questions and then 3-4 questions being generated by JSON dynamically based upon a form choice made on a page before. What I'm trying to do is generate the questions, then create a progress bar based on the final number of questions created. Where I'm having trouble is using the jQuery when done method after my each loop. It is firing after the first iteration instead of the last. I have tried populating an array "Qs" and passing the array, after reading some other posts, but what I have hasn't worked. I would really like to segment my code and clean it up as much as possible, so I'm trying to stay away from nesting it.
var Qs = [];
var generateQs = function (){
var $dept = sessionStorage.getItem("sFGeneralDepartment1");
var $qWrapper = $("#assessmentTool");
$.getJSON("js/dept-questions.json", function(data) {
var key = $dept;
var vals = [];
switch(key) {
case 'Information technology':
vals = data.IT;
break;
case 'Finance':
vals = data.FIN;
break;
case 'Human resources':
vals = data.HR;
break;
case 'Marketing':
vals = data.MKT;
break;
default:
vals = data.OT;
break;
}
$.each(vals, function(index, value) {
var $cleanID = (value.qID).replace(/q/g, '');
$qWrapper.append('<div class="question-container rangeIcon disabled" id="' + value.qID + '"><p>Question ' + $cleanID +'</p> <h4>' + value.questionText + '</h4><ul class="answer-container"></ul></div>');
$.each(value.answers, function(i, answer) {
var $aID = answer.aID;
var $radioBtn = '<div class="radioBtn"><span class="radioBtnInner"></span></div>';
$('.question-container#' + value.qID + ' .answer-container').append('<li class="survey-item"><div class="icon-holder" id="' + $aID + '"><img src="img/' + answer.iconFileName + '" width="' + answer.iconWidth +'" height="'+ answer.iconHeight + '"/></div><input type="radio" id="'+ $aID + '" value="' + answer.pointValue + '"><label for="' + $aID + '" class="radio" data-popover="'+ answer.popoverText + '">' + $radioBtn + '<span class="labelTopText">' + answer.labelTopText + '<span class="divider">/</span></span><span class="labelBottomText">' + answer.labelBottomText + '</span></label></li>');
});
Qs.push($cleanID);
});
console.log('done');
console.log(Qs);
});
};
$.when(generateQs($,Qs)).done(function() {
//create progress bar
console.log('starting');
var qCount = ($('.question-container').length + 1);
var qList = $('#progressBar');
for (var i = 0; i < qCount; i++){
qList.append('<li class="progress-bar-steps" data-item="q' + (i+1) + '">' + '<span class="step-text">' + (i+1) + '</span>' + '</li>');
$('.question-container').each(function (i, value){
var qId = $(this).attr('id');
if ($(this).hasClass("active")) {
$(this).css('opacity','1.0');
$('#progressBar').find("[data-item='" + qId + "']").addClass('active').html('<span class="step-text">' + (i+1) + '</span>');
$('.progress-bar-steps.active').next('.progress-bar-steps').addClass('next disabled-next').html('<span class="step-text">' + (i+2) + '</span>');
} else {
$(this).addClass('disabled');
}
});
}
});

Excel warning when opening .xls exported table with javascript

I am using a script that exports a content of a pivot table to a .xls excel file. The problem is that everytime that I open this file, Excel gives the following warning message, although it successfully opens it:
"The file you are trying to open, '[filename]', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?"
Is there a way to export the file without having this warning?
I am using orb.js. The javascript code that exports is below:
function(_dereq_, module, exports) {
var utils = _dereq_('./orb.utils');
var uiheaders = _dereq_('./orb.ui.header');
var themeManager = _dereq_('./orb.themes');
var uriHeader = 'data:application/vnd.ms-excel;base64,';
var docHeader = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' +
'<head>' +
'<meta http-equiv=Content-Type content="text/html; charset=UTF-8">' +
'<!--[if gte mso 9]><xml>' +
' <x:ExcelWorkbook>' +
' <x:ExcelWorksheets>' +
' <x:ExcelWorksheet>' +
' <x:Name>###sheetname###</x:Name>' +
' <x:WorksheetOptions>' +
' <x:ProtectContents>False</x:ProtectContents>' +
' <x:ProtectObjects>False</x:ProtectObjects>' +
' <x:ProtectScenarios>False</x:ProtectScenarios>' +
' </x:WorksheetOptions>' +
' </x:ExcelWorksheet>' +
' </x:ExcelWorksheets>' +
' <x:ProtectStructure>False</x:ProtectStructure>' +
' <x:ProtectWindows>False</x:ProtectWindows>' +
' </x:ExcelWorkbook>' +
'</xml><![endif]-->' +
'</head>' +
'<body>';
var docFooter = '</body></html>';
module.exports = function(pgridwidget) {
var config = pgridwidget.pgrid.config;
var currTheme = themeManager.current();
currTheme = currTheme === 'bootstrap' ? 'white' : currTheme;
var override = currTheme === 'white';
var buttonTextColor = override ? 'black' : 'white';
var themeColor = themeManager.themes[currTheme];
var themeFadeout = themeManager.utils.fadeoutColor(themeColor, 0.1);
var buttonStyle = 'style="font-weight: bold; color: ' + buttonTextColor + '; background-color: ' + themeColor + ';" bgcolor="' + themeColor + '"';
var headerStyle = 'style="background-color: ' + themeFadeout + ';" bgcolor="' + themeFadeout + '"';
function createButtonCell(caption) {
return '<td ' + buttonStyle + '><font color="' + buttonTextColor + '">' + caption + '</font></td>';
}
function createButtons(buttons, cellsCountBefore, cellsCountAfter, prefix) {
var i;
var str = prefix || '<tr>';
for (i = 0; i < cellsCountBefore; i++) {
str += '<td></td>';
}
str += buttons.reduce(function(tr, field) {
return (tr += createButtonCell(field.caption));
}, '');
for (i = 0; i < cellsCountAfter; i++) {
str += '<td></td>';
}
return str + '</tr>';
}
var cellsHorizontalCount = Math.max(config.dataFields.length + 1, pgridwidget.layout.pivotTable.width);
var dataInicioFilter = (pgridwidget.pgrid.config.dataInicio==null) ? '' :
'<tr><td><font color=\"#ccc\">Data Início</font></td>' + '<td ' + buttonStyle +
'><font color="' + buttonTextColor + '">' + pgridwidget.pgrid.config.dataInicio +
'</font></td>'+'</tr>';
var dataFimFilter = (pgridwidget.pgrid.config.dataFim==null) ? '' :
'<tr><td><font color=\"#ccc\">Data Fim</font></td>' + '<td ' + buttonStyle +
'><font color="' + buttonTextColor + '">' + pgridwidget.pgrid.config.dataFim +
'</font></td>'+'</tr>';
var comissaoFilter = (pgridwidget.pgrid.config.comissao==0) ? '' :
'<tr><td><font color=\"#ccc\">Comissão (R$)</font></td>' + '<td ' + buttonStyle +
'><font color="' + buttonTextColor + '">' + pgridwidget.pgrid.config.comissao +
'</font></td>'+'</tr>';
var dataFields = createButtons(config.dataFields,
0,
cellsHorizontalCount - config.dataFields.length,
'<tr><td><font color="#3a2c2c">Dados</font></td>'
);
var sep = '<tr><td style="height: 22px;" colspan="' + cellsHorizontalCount + '"></td></tr>';
var columnFields = createButtons(config.columnFields,
pgridwidget.layout.rowHeaders.width,
cellsHorizontalCount - (pgridwidget.layout.rowHeaders.width + config.columnFields.length)
);
var columnHeaders = (function() {
var str = '';
var j;
for (var i = 0; i < pgridwidget.columns.headers.length; i++) {
var currRow = pgridwidget.columns.headers[i];
var rowStr = '<tr>';
if (i < pgridwidget.columns.headers.length - 1) {
for (j = 0; j < pgridwidget.layout.rowHeaders.width; j++) {
rowStr += '<td></td>';
}
} else {
rowStr += config.rowFields.reduce(function(tr, field) {
return (tr += createButtonCell(field.caption));
}, '');
}
rowStr += currRow.reduce(function(tr, header) {
var value = header.type === uiheaders.HeaderType.DATA_HEADER ? header.value.caption : header.value;
return (tr += '<td ' + headerStyle + ' colspan="' + header.hspan(true) + '" rowspan="' + header.vspan(true) + '">' + value + '</td>');
}, '');
str += rowStr + '</tr>';
}
return str;
}());
var rowHeadersAndDataCells = (function() {
var str = '';
var j;
for (var i = 0; i < pgridwidget.rows.headers.length; i++) {
var currRow = pgridwidget.rows.headers[i];
var rowStr = '<tr>';
rowStr += currRow.reduce(function(tr, header) {
return (tr += '<td ' + headerStyle + ' colspan="' + header.hspan(true) + '" rowspan="' + header.vspan(true) + '">' + header.value + '</td>');
}, '');
var dataRow = pgridwidget.dataRows[i];
rowStr += dataRow.reduce(function(tr, dataCell, index) {
var formatFunc = config.dataFields[index = index % config.dataFields.length].formatFunc;
var value = dataCell.value == null ? '' : formatFunc ? formatFunc()(dataCell.value) : dataCell.value;
return (tr += '<td>' + value + '</td>');
}, '');
str += rowStr + '</tr>';
}
return str;
}());
function toBase64(str) {
return utils.btoa(unescape(encodeURIComponent(str)));
}
return uriHeader +
toBase64(docHeader +
'<table>' + dataInicioFilter + dataFimFilter + comissaoFilter + dataFields + sep + columnFields + columnHeaders + rowHeadersAndDataCells + '</table>' +
docFooter);
};
}

Trying to using HTML data attribute to match data from two databases

I have code below that renders a few products on a page. Each of these products shares the same data attribute "data-item-upc". There is also a button that is rendered for each product on the page (6 total buttons to be exact). They all share this same data-item-upc data attribute.
I am able to successfully grab the value of the data atrribute and match it to the item with the same UPC value in the second database. But for some reason only the first button works and shows the modal. Not sure whats going on. Hoping someone can help me out would really appreciate it.
//declare variable to store JSON data
var product_data = {};
var nutritional_data = {};
$(document).ready(function() {
'use strict';
//grab product data
$.ajax({
dataType: "jsonp",
url: 'path to URL',
cache: true,
success: function(data){
//assign JSON to product data variable
product_data = JSON.parse(JSON.stringify(data).replace(/"\s+|\s+"/g,'"'));
//grab nutrional data
$.ajax({
dataType: "jsonp",
url: 'path to URL',
cache: true,
success: function(json){
//assign JSON to product data variable
nutritional_data = JSON.parse(JSON.stringify(json).replace(/"\s+|\s+"/g,'"'));
//declare divs to store data
var productDivOne = '';
var productDivTwo = '';
$.each(product_data, function(i, item) {
//convert JSON strings to uppercase for comparison
var brandLetter = item.itemBrandLetter.toUpperCase();
var foodService = item.itemDeli.toUpperCase();
var brandItem = item.itemName;
if (brandLetter == "LB" && foodService == "N") {
if (brandItem.indexOf("Panettone") >= 0) {
productDivOne +=
'<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
'<div class="thumbnail">' +
'<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
'<div class="caption">' + '<br>' +
'<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
'<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
'<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +
'</div>' +
'</div>' +
'</div>';
}
if (brandItem.indexOf("Egg") >= 0) {
productDivTwo +=
'<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
'<div class="thumbnail">' +
'<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
'<div class="caption">' + '<br>' +
'<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
'<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
'<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +
'</div>' +
'</div>' +
'</div>';
}
}
});
//show nutritional information on button click
$("body").on('click', ".showNutritionFacts", function(event){
//get passed data from other function
var clickedItemUPC = $(this).data('item-upc');
alert(clickedItemUPC);
//declare variables to store data
var servingSize = '';
var servingPerContainer = '';
var calories = '';
var caloriesFat = '';
var totalFatGrams = '';
var totalFatPercentage = '';
var saturatedFatGrams = '';
var saturatedFatPercentage = '';
var transFatGrams = '';
var polyunsaturatedFatGrams = '';
var monounsaturatedFatGrams = '';
var cholesterolGrams = '';
var cholesterolPercentage = '';
var sodiumGrams = '';
var sodiumPercentage = '';
var totalCarbohydrateGrams = '';
var totalCarbohydratePercentage = '';
var dietaryFiberGrams = '';
var dietaryFiberPercentage = '';
var sugarGrams = '';
var sugarGramsAdded = '';
var sugarGramsAddedPercentage = '';
var proteinGrams = '';
var vitaminAPercentage = '';
var vitaminCGrams = '';
var vitaminCPercentage = '';
var vitaminDGrams = '';
var vitaminDPercentage = '';
var calciumGrams = '';
var calciumPercentage = '';
var ironGrams = '';
var ironPercentage = '';
var potassiumGrams = '';
var potassiumPercentage = '';
var thiamineGrams = '';
var thiaminePercentage = '';
var riboflavinGrams = '';
var riboflavinPercentage = '';
var niacinGrams = '';
var niacinPercentage = '';
var ingredients = '';
//comparison UPC variable
var compareNutUPC;
$.each(nutritional_data, function (i, item) {
//assign comparison UPC to itemNum
compareNutUPC = item.itemNum;
//compare product UPC in nutritional and product data
if (clickedItemUPC == compareNutUPC) {
servingSize += item.servingSize;
servingPerContainer += item.itemServings;
calories += item.itemCalories;
caloriesFat += item.itemCaloriesFromFat;
transFatGrams += item.itemTransFat + 'g';
polyunsaturatedFatGrams += item.itemPolyUnsatFat + 'g';
monounsaturatedFatGrams += item.itemMonoUnsatFat + 'g';
saturatedFatGrams += item.itemSaturFat + 'g';
saturatedFatPercentage += item.itemSaturFatPerc + '%';
totalFatGrams += item.itemTotalFat + 'g';
totalFatPercentage += item.itemTotalFatPerc + '%';
cholesterolGrams += item.itemCholesterol + 'mg';
cholesterolPercentage += item.itemCholesterolPerc + '%';
sodiumGrams += item.itemSodium + 'mg';
sodiumPercentage += item.itemSodiumPerc + '%';
totalCarbohydrateGrams += item.itemTotalCarb + 'g';
totalCarbohydratePercentage += item.itemTotalCarbPerc + '%';
sugarGrams += item.itemSugars + 'g';
sugarGramsAdded += item.itemSugarsAdded + 'g';
sugarGramsAddedPercentage += item.itemSugarsAddedPerc + '%';
dietaryFiberGrams += item.itemDietFiber + 'g';
dietaryFiberPercentage += item.itemDietFiberPerc + '%';
proteinGrams += item.itemProtein + 'g';
vitaminAPercentage += item.itemVitaminA + '%';
vitaminCPercentage += item.itemVitaminC + '%';
vitaminDGrams += item.itemVitaminDMeasure;
vitaminDPercentage += item.itemVitaminD + '%';
calciumGrams += item.itemCalciumMeasure;
calciumPercentage += item.itemCalcium + '%';
ironGrams += item.itemIronMeasure;
ironPercentage += item.itemIron + '%';
thiaminePercentage += item.itemThiamin + '%';
riboflavinPercentage += item.itemRiboflavin + '%';
niacinPercentage += item.itemNiacin + '%';
potassiumGrams += item.itemPotassium;
potassiumPercentage += item.itemPotassiumPerc + '%';
ingredients += item.itemIngredients;
}
});
$(".servingSize").html(servingSize.replace(/\s+(?=g)/g, '').toLowerCase());
$(".servingPerContainer").html(servingPerContainer);
$(".calories").html(calories);
$(".caloriesFat").html(caloriesFat);
$(".transFatGrams").html(transFatGrams);
$(".polyunsaturatedFatGrams").html(polyunsaturatedFatGrams);
$(".monounsaturatedFatGrams").html(monounsaturatedFatGrams);
$(".saturatedFatGrams").html(saturatedFatGrams);
$(".saturatedFatPercentage").html(saturatedFatPercentage);
$(".totalFatGrams").html(totalFatGrams);
$(".totalFatPercentage").html(totalFatPercentage);
$(".cholesterolGrams").html(cholesterolGrams);
$(".cholesterolPercentage").html(cholesterolPercentage);
$(".sodiumGrams").html(sodiumGrams);
$(".sodiumPercentage").html(sodiumPercentage);
$(".totalCarbohydrateGrams").html(totalCarbohydrateGrams);
$(".totalCarbohydratePercentage").html(totalCarbohydratePercentage);
$(".sugarGrams").html(sugarGrams);
$(".sugarGramsAdded").html(sugarGramsAdded);
$(".sugarGramsAddedPercentage").html(sugarGramsAddedPercentage);
$(".dietaryFiberGrams").html(dietaryFiberGrams);
$(".dietaryFiberPercentage").html(dietaryFiberPercentage);
$(".proteinGrams").html(proteinGrams);
$(".vitaminAPercentage").html(vitaminAPercentage);
$(".vitaminCPercentage").html(vitaminCPercentage);
$(".vitaminDGrams").html(vitaminDGrams);
$(".vitaminDPercentage").html(vitaminDPercentage);
$(".calciumGrams").html(calciumGrams);
$(".calciumPercentage").html(calciumPercentage);
$(".ironGrams").html(ironGrams);
$(".ironPercentage").html(ironPercentage);
$(".thiaminePercentage").html(thiaminePercentage);
$(".riboflavinPercentage").html(riboflavinPercentage);
$(".niacinPercentage").html(niacinPercentage);
$(".potassiumGrams").html(potassiumGrams);
$(".potassiumPercentage").html(potassiumPercentage);
$(".ingredients").html(ingredients.toUpperCase());
//determine which modal to show
if ($('.vitaminDGrams:contains("mcg")').length > 0 && $('.calciumGrams:contains("mg")').length > 0 && $('.ironGrams:contains("mg")').length > 0) {
$('.nutritionPopupAlternate').modal('show');
} else if (servingSize == 0) {
$('.nutritionPopupNoInfo').modal('show');
} else {
$('.nutritionPopupStandard').modal('show');
}
});
//append to appropriate div
$('#productDivOne').html(productDivOne);
$('#productDivTwo').html(productDivTwo);
}
});
//end of prod data
}
});
//end of nut data
});
Thanks to Sandy i was able to minify my code and find the issue. Turns out it was looking for something that was added later from a different source code that I took, after editing the DIV it works perfectly now.

Filtering results for twitch API once you make an API call in jquery

I'm trying to build viewer that pulls from the twitch API to show which channels are online / offline.
I have 3 buttons: All (displays online and offline results), Online(displays only online results), and Offline (you guessed it...displays only offline results).
My code to display all results is as follows:`
var getAll = function () {
$(".twitch-viewer-information").empty()
twitchUsernames.forEach(function (elem) {
$.when($.getJSON(twitchApi + elem + apiCallback), $.getJSON(twitchStreamApi + elem + apiCallback)).done(function(data1,data2) {
var twitchChannel = elem;
var twitchLogo = data1[0].logo ? data1[0].logo : "https://www.skillsilo.com/images/profile-photo-default-256.png";
var twitchStatus = checkStatus(data2);
var twitchUrl = data1[0].url;
var twitchStreamMessage = data2[0].stream ? data2[0].stream.channel.status.substring(0,33)+"..." : "";
tableRow =$(
'<tr class="twitch-viewer-channel-data" data-href="'+ twitchUrl +'">' +
'<td class="channel-pic"> <img class="channel-image" src="' + twitchLogo + '"</td>' +
'<td class="twitch-viewer-channel-name">' + twitchChannel + '<br> <span class="twitch-stream-message">' + twitchStreamMessage +'</span></td>' +
'<td class="twitch-viewer-channel-status">' + twitchStatus + '</td>' +
'<tr>'
);
$(".twitch-viewer-information").append(tableRow);
tableRow.click(function() {
window.location.href = $(this).data("href");
});
});
});
}
I'd like to now build a function that only returns the channels that are online, using as little code as possible. I have been rewriting the entire function, along with an if statement at the end to accomplish this...but there has got to be a simpler way:
var getOnline = function () {
$(".twitch-viewer-information").empty()
twitchUsernames.forEach(function (elem) {
$.when($.getJSON(twitchApi + elem + apiCallback), $.getJSON(twitchStreamApi + elem + apiCallback)).done(function(data1,data2) {
var twitchChannel = elem;
var twitchLogo = data1[0].logo ? data1[0].logo : "https://www.skillsilo.com/images/profile-photo-default-256.png";
var twitchStatus = checkStatus(data2);
var twitchUrl = data1[0].url;
var twitchStreamMessage = data2[0].stream ? data2[0].stream.channel.status.substring(0,33)+"..." : "";
tableRow =$(
'<tr class="twitch-viewer-channel-data" data-href="'+ twitchUrl +'">' +
'<td class="channel-pic"> <img class="channel-image" src="' + twitchLogo + '"</td>' +
'<td class="twitch-viewer-channel-name">' + twitchChannel + '<br> <span class="twitch-stream-message">' +twitchStreamMessage +'</span></td>' +
'<td class="twitch-viewer-channel-status">' + twitchStatus + '</td>' +
'<tr>'
);
if(twitchStatus === "Online") {
$(".twitch-viewer-information").append(tableRow);
tableRow.click(function() {
window.location.href = $(this).data("href");
});
}
});
});
}
What is the shortest amount of code that I can user to duplicate my getAll function, while allowing me to filter for just the twitchStatus's that are online?

How to add link to this javascript?

This is the full javascript for read more link of post summary-
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding-right:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
In var summary i tried to add a link like <a href='http://xyz.com'>read more</a> in this way
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '<a href='http://xyz.com'>' + '<span>' + readmore + '</span>' + '</a>' + '</div>';
But this is not working. I know little bit javascript. Please help me.

Categories

Resources