Develop Reference

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

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.

How to create a dynamic table in jQuery?

I want to create a dynamic table in jQuery. But my code creates a table for each of my element.
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
for (var i = 0; i < spl.length; i++) {
part = spl[i].split(':');
content = "<table>" + "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
spl2 += content;
}
content += "</table>"
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
spl2
+ "</span><br/>" +
+ "</div>";
Which part of my code is wrong?

as you were adding table in for loop, so it was creating table for each item.Try this:
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
content ="<table>"
for (var i = 0; i < spl.length; i++) {
part = spl[i].split(':');
content += "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
spl2 = content;
}
content += "</table>"
// you can also assign spl2 = content; over here.
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
spl2
+ "</span><br/>" +
+ "</div>";

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var str = dataItem.Description;
var spl = str.split(','), part;
var spl2 = "";
var content = "<table>";
for (var i = 0; i < spl.length; i++) {
part = spl[i].split(':');
content += "<tr><td>" + part[0] + "</td>" + "<td>" + part[1] + "</td></tr>";
spl2 += content;
}
content += "</table>"
var desc = "<div id='openModal' class='modalDialog'>" + "<span>" +
spl2
+ "</span><br/>" +
+ "</div>";
Updated your script

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.