Develop Reference

jQuery calculation of every row using multiply of quantity and price and display back on table

I'm having an issue when doing some calculation of each table row with the price and quantity. When in the console i can see the result of calculation. But when trying to display back on table it duplicate all the total sum of first row into all rows.
Here is the sample code for the part of calculation and the table display.
jQuery.ajax({
type: "POST",
url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echarity&format=raw&task=api.get_product_name",
data: {dataArrayPost : Data},
success: function(data){
// console.log('Result process get product name' + data);
var a = JSON.parse(data);
// console.log('Result from get_product_name');
// console.log(a);
var prodName = a.productName;
var splitProductName = "";
var prodQty = a.quota;
var splitProductQuota = "";
var prodPrice = a.price;
var splitProductPrice = "";
var discountedPrice = "";
var contents = '<table id="tableDonateDisplay" class="table table-hover">';
contents += "<tr>";
contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
jQuery.each(prodName, function(index1, value1) {
// console.log(prodName);
splitProductName = value1;
contents += "<tr>";
contents += '<td>' + splitProductName;
jQuery.each(prodQty, function(index, value) {
if (index1 == index) {
splitProductQuota = value;
contents += '</td><td>' + splitProductQuota;
jQuery.each(prodPrice, function(index2, value2){
jQuery.each(value2, function(index3, value3){
if(index == index2){
splitProductPrice = value3.price_value_with_tax.toFixed(2);
// console.log(splitProductPrice);
var formQuantityUpdate = "<div class='amount-controller' data-module='amount-controller'><span id='qtyminus' field='quantity' class='handle'><i class='fas fa-minus-square'></i></span><input class='input-num' type='text' id='num[]' name='number' value='0'><span id='qtyplus' field='quantity' class='handle qtyPlusHandle'><i class='fas fa-plus-square'></i></span><input type='hidden' id='pricePerProduct' name='priceHidden' value='" + splitProductPrice +"'><input type='hidden' id='maxQuantity' name='maxQuantity' value='" + splitProductQuota +"'></div>";
contents += '</td><td>' + 'RM ' + splitProductPrice + '</td>';
contents += '<td>' + formQuantityUpdate + '</td>' + '<td>' + '' + '</td>' + '<td class="eachSum">' + '' + '</td>';
contents += "</tr>";
}
});
});
}
});
});
contents += "</tr></table>";
if (jQuery('#contentNeed').html()) {
jQuery( "#contentNeed" ).empty();
}
else {
}
jQuery('#contentNeed').append(contents);
}
});
Here is the part for calculation and quantity plus minus input. The quantity will stop when it reach the quantity limits for each items.
jQuery(document).ready(function() {
var counterTotal = 0;
var quantity = 0;
var maxQuantity = 0;
jQuery(document).on('click','#qtyplus',function(e){
e.preventDefault();
fieldName = jQuery(this).attr('field');
var container = jQuery(this).parents('.amount-controller');
var currentVal = parseInt(container.children(".input-num").val());
var priceVal = parseFloat(container.children("#pricePerProduct").val());
var totalPriceCont = jQuery('.eachSum');
// totalPriceCont = jQuery('#eachSum');
maxQuantity = parseInt(container.children("#maxQuantity").val());
var val2 = currentVal + 1;
if (!isNaN(val2)) {
container.children(".input-num").val(val2);
} else {
container.children(".input-num").val(0);
}
quantity = val2;
if(quantity > maxQuantity){
quantity = maxQuantity;
container.children(".input-num").val(quantity);
return false;
}
else{
console.log('Quantity Plus :' + quantity);
counterTotal = priceVal * quantity;
totalEach = counterTotal.toFixed(2);
console.log('Sum Total Price Qty Plus : ' + totalEach);
totalPriceCont.html(parseInt(totalEach));
}
});
jQuery(document).on('click', '#qtyminus', function(e) {
e.preventDefault();
fieldName = jQuery(this).attr('field');
var container = jQuery(this).parents('.amount-controller');
var currentVal = parseInt(container.children(".input-num").val());
var priceVal = parseFloat(container.children("#pricePerProduct").val());
var totalPriceCont = jQuery('.eachSum');
// console.log(priceVal);
var val3 = currentVal - 1;
if (!isNaN(currentVal) && currentVal > 0) {
container.children(".input-num").val(currentVal - 1);
} else {
container.children(".input-num").val(0);
}
quantity = val3;
console.log('Quantity Minus :' + quantity);
console.log(currentVal);
counterTotal = priceVal * quantity;
totalEach = counterTotal.toFixed(2);
console.log('Sum Total Price Qty Minus : ' + totalEach);
totalPriceCont.html(parseInt(totalEach));
});
// totalPriceCont.html(parseInt(totalEach));
});
Results:
What am I doing wrong and how do I do this correctly?

Try initiating 'totalPriceCont' object like this:
var totalPriceCont = jQuery(this).closest('tr').find('.eachSum');

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);
};
}

Fill table in javascript with data from db

I have an html <table> that I need to fill with data from a database query. The query returns 10 rows and then sends the data to the method fill(data) to fill the table:
function getTopQ() {
alert("Get top Qs");
callServer('fill', 'checkConnection', false, 'SelectTopQues.php');
}
function fill(data) {
alert("ready to fill now");
$('#table').html('');
var search = '#table';
for (var i = 0; i < data.length; i++) {
$('#table').listview("refresh");
var Questions = data[i];
var str = '<td " ID="' + Questions[0] +
'" Question="' + Questions[1] +
'" UserID="' + Questions[2] +
'"CategoryId"' + '" SubCategoryId"' + '" DatePosted"' + '"';
str += '">'; //end li
str += '<a href="" data-transition="fade">';
str += Questions[1];
str += '</a>';
//str += '<span class="hiddenData">' + item[13] + '</span>';
str += '</td>';
$('#table').append(str);
$('#table').listview("refresh");
}
console.log(data);
console.log($('#table'));
$('#table').listview("refresh");
}

Need help with Flickr/JSON/Javascript issue when displaying gallery images

Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.
Here's my Javascript:
$(function() {
var map;
var markers = [];
var infowindow;
// Get gallery photos
var visibleGallery;
$.getJSON("http://api.flickr.com/services/rest/" +
"?method=flickr.galleries.getPhotos" +
"&api_key=XXXX" +
"&photoset_id=XXXX" +
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" +
"&format=json&jsoncallback=?", function(data, textStatus) {
var htmlString = '<div id="weekContainer">';
var weeks = sortIntoWeekArrays(data.photos.photo);
$.each(weeks, function(i, week)
{
var weekNumber = i + 1;
var numberOfWeeks = weeks.length - 1;
htmlString += '<div id="week' + weekNumber + '">';
htmlString += '<ul class="weeks">';
if(i < numberOfWeeks)
{
htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>';
}
var sunday = new Date(week.monday.toUTCString());
sunday.setDate(week.monday.getDate() + 6);
htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>';
if(i > 0)
{
htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>';
}
htmlString += '</ul>';
if(week.winner !== undefined)
{
htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>';
htmlString += '<ul class="imagesWinners">';
htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">';
htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />';
htmlString += '</a></li>';
htmlString += '<li class="name">' + week.winner.title + '</li>';
htmlString += '<li class="owner">' + 'by ' + week.winner.ownername + '</li>';
htmlString += '</ul>';
}
htmlString += '<p class="galleryTitle">Our other favourites this week</p>';
htmlString += '<ul class="imagesRunnersUp">';
$.each(week.images, function(i, item)
{
htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />';
htmlString += '</a></li>';
if(item.longitude == "0" && item.latitude == "0")
{
return true;
}
var latlng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title:item.title
});
marker.content = '<img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" />';
markers.push(marker);
});
htmlString += '</ul>';
htmlString += '</div>';
});
htmlString += '</div>';
$('div#weekViewer').append(htmlString);
$('div#weekContainer > div').css('float', 'left').css('margin-right', '30px');
$('div#weekContainer').width(weeks.length * 450);
$('div#weekContainer .weekLinksPrev')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow');
return false;
});
$('div#weekContainer .weekLinksNext')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow');
return false;
});
});
});
function sortIntoWeekArrays(items)
{
var weeks = [];
// Returns single dimension array containing single dimension arrays
$(items).each(function(i, item)
{
var monday = new Date(item.dateadded * 1000);
monday.setDate(monday.getDate() - monday.getDay() + 1);
monday.setHours(0,0,0,0);
var week, thisWeek;
for (i in weeks)
{
week = weeks[i];
if(week.monday - monday == 0)
{
thisWeek = week;
break;
}
}
if(thisWeek === undefined)
{
thisWeek =
{
monday: monday,
images: []
};
weeks.push(thisWeek);
}
if($.inArray('winner', item.tags.split(" ")) > -1)
{
thisWeek.winner = item;
}
else
{
thisWeek.images.push(item);
}
});
return weeks.sort(function(first, second)
{
return (first.monday > second.monday) - (first.monday < second.monday);
});
}
Any help would be fantastic :)
Regards,
David

Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.