I could not figure out what I am doing wrong?
Also i am having problem storing data in javascript 2d array.
Fiddle
$.getJSON(url,
function (data) {
/*Insert your titles you wanna show*/
var titles = ["box closing", "e"];
var nope = [
[],
[],
[]
];
// var len = titles.length;
var count = 0;
var col = 0;
var row=0;
$.each(data.photos.photo, function (i, item) {
var purl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
// var pid = item.id;
var container = '<tr><td class="col-md-8"><a target="_blank" href="http://www.flickr.com/photos/' + userid + '/' + item.id + '/"><img class="span4" alt="' + item.title + '" src="' + purl + ' width=100 height=200"/></td></tr>';
var title = '<tr><td class="col-md-4" >' + item.title + '</td></tr>';
nope[row][0] = item.title;
nope[row][1] = container;
nope[row][2]=title;
/*Show only image with in titles*/
if (item.title == titles[count]) {
$(container).appendTo('#contain');
$(title).appendTo('#contain');
//$("a.imageurl").append(" ");
//$("#name").append(title);
//$("a.imageurl").append(purl);
//$("a.imageurl").append(" ");
//purl = '
$("#demo").append(nope[row][col]);
$("#demo").append(nope[row][col]);
$("#demo").append(nope[row][col]);
}
col++;
count = count + 1;
});
});
Related
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');
}
});
}
});
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);
};
}
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.
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?
I need to get the JSON response on saving the role and permission matrix created using JSON object.
This is my code to create the role and permission matrix (table):
<table id="perm">
<tr class="header">
<th>Permissions</th>
</tr>
</table>
JS:
$(document).ready(function () {
var $table = $( "#perm" );
var $tHead = $table.find( ".header" );
var permissions = ['',"R", "W", "D", "WS" ]
// Count and add Roles
var roles = [];
var numRoles = 0;
for( i in obj ) {
if( roles[ obj[ i ].ProjectRoleID ] == undefined ) {
roles[ obj[ i ].ProjectRoleID ] = obj[ i ].ProjectRoleID;
numRoles++;
$tHead.append( '<th colspan="4" class="role_' + obj[ i ].ProjectRoleID + '">' + obj[ i ].RoleName + '</th>' );
}
}
// Load table
for( i in obj ) {
var element = obj[ i ];
// Add screen row
if( $table.find( "tr.row_" + element.ScreenID ).length == 0 ) {
$table.append( '<tr class="row_' + element.ScreenID + '"><td>' + element.ScreenName + '</td></tr>' );
$row = $table.find( '.row_' + element.ScreenID );
for( j in roles ) {
var role = roles[ j ];
for( k = 1; k < 5; k++ ) {
var uniqueCheck = "check_" + element.ScreenID + "_" + role + "_" + k;
$row.append( '<td class="cell_' + role + '"><input id="' + uniqueCheck + '" name="' + uniqueCheck + '" type="checkbox"> ' + permissions[ k ] + ' </td>' );
}
}
}
var checkId = "#check_" + element.ScreenID + "_" + element.ProjectRoleID + "_" + element.PermissiontypeID;
$( checkId ).attr( "checked", "checked" );
}
});
This is my matrix (Table):
I need to get the values of checked check boxes. Please help. Thanks in advance.
With Slight Modification of your code
var $table = $("#perm");
var $tHead = $table.find(".header");
var permissions = ['', "R", "W", "D", "WS"]
// Count and add Roles
var roles = [];
var numRoles = 0;
for (i in obj) {
if (roles[obj[i].ProjectRoleID] == undefined && obj[i].ProjectRoleID != null) {
roles[obj[i].ProjectRoleID] = obj[i].ProjectRoleID;
numRoles++;
$tHead.append('<th colspan="4" value = "' + obj[i].ProjectRoleID + '" class="role_' + obj[i].ProjectRoleID + '">' + obj[i].RoleName + '</th>');
}
}
// Load table
for (i in obj) {
var element = obj[i];
// Add screen row
if (element.ScreenID != null) {
if ($table.find("tr.row_" + element.ScreenID).length == 0) {
$table.append('<tr class="Permission row_' + element.ScreenID + '" value = "' + element.ScreenID + '"><td>' + element.ScreenName + '</td></tr>');
$row = $table.find('.row_' + element.ScreenID);
for (j in roles) {
var role = roles[j];
for (k = 1; k < 5; k++) {
var uniqueCheck = "check_" + element.ScreenID + "_" + role + "_" + permissions[k];
$row.append('<td class="cell_' + role + '"><input id="' + uniqueCheck + '" name="' + permissions[k] + '" type="checkbox" value = "' + role + '"> ' + permissions[k] + ' </td>');
}
}
}
var checkId = "#check_" + element.ScreenID + "_" + element.ProjectRoleID + "_" + element.PermissionType;
$(checkId).attr("checked", "checked");
}
}
// Here forming json
$(document).on('click', '#YourID', function (e) {
var PermissionDetails = [];
$('tr.Permission td:not(:first-child) input:checked').each(function () {
var ScreenID = $(this).closest('tr').attr('value');
var ProjectRoleID = $(this).attr('value');
var PermissionType = $(this).attr('name');
PermissionDetails.push({ "ScreenID": ScreenID, "ProjectRoleID": ProjectRoleID, "PermissionType": PermissionType });
});
});