Small JS loop issue - javascript

I have a script that calls data from a database. For every result a new div is output. However when the button that calls the function search() is clicked, I only get one result. I guess the question is: how do I create a new div for every result, not just set it to the first row found?
function search() {
var xhr2 = new XMLHttpRequest();
xhr2.addEventListener ("load", view);
var reg = document.getElementById("type").value;
xhr2.open("GET", "getresults.php?type=" + reg);
xhr2.send();
}
function view(e, resulthtml) {
var array = JSON.parse(e.target.responseText);
for (var count=0; count<array.length; count++)
{
var id = array[count].id;
var username = array[count].username;
var srcpath = array[count].srcpath;
var title = array[count].title;
var type = array[count].type;
var postcode = array[count]. postcode;
var description = array[count]. description;
var price = array[count].price;
var phone = array[count].phone;
var lat = array[count].lat;
var lon = array[count].lon;
resulthtml = "<div class='col-md-4'>"
+ "<div class='thumbnail'>"
+ "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>"
+ "<div class='caption'>"
+ "<h3>"
+ description
+ "</h3>"
+ "<p>"
+ "£" + price + ""
+ "</p>"
+ "<p>"
+ "Contact number:"
+ "</p>"
+ "<p>"
+ "<input type='submit' value='Contact seller' onclick='search()'/>"
+ "</p>"
+ "</div>"
+ "</div>"
+ "</div>"
}
document.getElementById("row").innerHTML = resulthtml;
}
</script>

You're overwriting resulthtml on every iteration of the loop. Initialize it as an empty string outside the loop and then add to it.
edit: You're also doing quite a lot of work in the loop that could be hoisted outside of it, mainly all that string concatenation. This would be easier on the browser:
var item, id, username, srcpath, title, type, postcode, description, price, phone, lat, lon,
resulthtml = '',
pre = "<div class='col-md-4'><div class='thumbnail'><img id='a' class='a' alt='300x200' src='",
inner1 = "'><div class='caption'><h3>",
inner2 = "</h3><p>£",
post = "</p><p>Contact number:</p><p><input type='submit' value='Contact seller' onclick='search()'/></p></div></div></div>";
for (var count=0; count<array.length; count++)
{
item = array[count];
id = item.id;
username = item.username;
srcpath = item.srcpath;
title = item.title;
type = item.type;
postcode = item. postcode;
description = item. description;
price = item.price;
phone = item.phone;
lat = item.lat;
lon = item.lon;
resulthtml += pre + srcpath + inner1 + description + inner2 + price + post;
}

You can't do
document.getElementById("row").innerHTML = resulthtml;
Because that overwrites the old innerHTML of the #row. Instead, you can do:
document.getElementById("row").innerHTML += resulthtml;
That adds resulthtml to the innerHTML string returned, or use the method:
document.getElementById("row").appendChild(resulthtml);
That does the exactly same thing. It's really a matter of personal choice which one you'll use.

Cheers. Thought it was something small!
<script type="text/javascript">
function search() {
var xhr2 = new XMLHttpRequest();
xhr2.addEventListener ("load", view);
var reg = document.getElementById("type").value;
xhr2.open("GET", "getresults.php?type=" + reg);
xhr2.send();
}
function view(e, resulthtml) {
resulthtml = "";
var array = JSON.parse(e.target.responseText);
for (var count=0; count<array.length; count++)
{
var id = array[count].id;
var username = array[count].username;
var srcpath = array[count].srcpath;
var title = array[count].title;
var type = array[count].type;
var postcode = array[count]. postcode;
var description = array[count]. description;
var price = array[count].price;
var phone = array[count].phone;
var lat = array[count].lat;
var lon = array[count].lon;
resulthtml = resulthtml + "<div class='col-md-4'>"
+ "<div class='thumbnail'>"
+ "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>"
+ "<div class='caption'>"
+ "<h3>"
+ description
+ "</h3>"
+ "<p>"
+ "£" + price + ""
+ "</p>"
+ "<p>"
+ "Contact number:"
+ "</p>"
+ "<p>"
+ "<input type='submit' value='Contact seller' onclick='search()'/>"
+ "</p>"
+ "</div>"
+ "</div>"
+ "</div>"
}
document.getElementById("row").innerHTML = resulthtml;
}
</script>

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

If a change a Javascript string links on a page don't work, and I don't know why?

I've got a JavaScript file querying a SharePoint list. It's working great but returning an 'undefined' line which I can't resolve:
Fine, so I thought I'd just knock it out from the code.
If I use this string:
txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalog‌​ue%20Devices.aspx?di‌​d=" + tempID + "'>" + tempTitle + "</a>" + "</p>";
The undefined vanishes BUT none of the links work, despite being the exact same links if I use this string which shows up the 'undefined'?!
txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalogue%20Devices.aspx?did=" + tempID + "'>" + tempTitle + "</a> - " + tempDeviceType + "</p>";
This is an example of a link: http://example.com/sites/it/ITInfrastructure/SitePages/Service%20Catalogue%20Devices.aspx?did=10
The code for the two js files I'm using (getDevices and getDeviceDetails) are below:
getDevices
function getDevices() {
var txtTitle = "";
var txtDeviceType = "";
var query = "http://example.com/sites/it/ITInfrastructure/_vti_bin/listdata.svc/Devices?select=ID,Title";
var call = $.ajax({
url: query,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$.each(data.d.results, function (i, result) {
var tempID = result.Id;
var tempTitle = result.Title;
var tempDeviceType = result.DeviceTypeValue;
txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalogue%20Devices.aspx?did=" + tempID + "'>" + tempTitle + "</a> - " + tempDeviceType + "</p>";
//txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalog‌​ue%20Devices.aspx?di‌​d=" + tempID + "'>" + tempTitle + "</a>" + "</p>";
});
$('#devices').append($(txtTitle));
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving data: " + jqXHR.responseText);
});
}
getDeviceDetails
function getDeviceDetails() {
var txtTitle = "";
var txtName = "";
var txtOverview = "";
var txtAccessories = "";
var txtDevicetype = "";
var txtTypicalDeviceUsage ="";
var txtKnownSystemIssues ="";
var txtTrafficlight = "";
var imgDevicePicture = "";
var tempLCS2 = "";
var HTML = "<h3>Desktop</h3>";
var Laptop = "Y"
var Tabs="Y" ;
var query
= "http://example.com/sites/it/ITInfrastructure/_vti_bin/listdata.svc/Devices?$expand=Priority&$filter=Id eq " + window.DeviceId + "";
var call = $.ajax({
url: query,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$.each(data.d.results, function(index, item) {
var tempID = item.Id;
var NameofDevice = item.Title;
var tempTitle = item.Title;
var DeviceOverView = item.Description;
var AccessDetails = item.Accessories;
var DeviceKind = item.DevicetypeValue;
var Usage = item.TypicalUsage;
var DevicePriority = item.PriorityValue;
var DeviceImage = item.DeviceImage;
txtTitle = "<p>";
txtName = "<p>" + NameofDevice + "</p>" + DeviceKind + "</p>";
txtOverview = "<p>" + DeviceOverView + "</p>";
txtAccessories = "<p>" + AccessDetails + "</p>";
txtDevicetype = "<p>" + DeviceKind + "</p>";
txtTypicalDeviceUsage = "<p>" + Usage + "</p>";
txtTrafficlight = "<p>" + DevicePriority + "</p>";
imgDevicePicture = "<img src='" + DeviceImage + "'>";
});
$('#devicedetails').append($(txtTitle));
$('#deviceoverview').append($(txtOverview));
$('devicename').append(txtName);
$('#devicekind').append(txtDevicetype);
$('#deviceacc').append(txtAccessories);
$('#deviceuse').append(txtTypicalDeviceUsage);
$('#devicestatus').append(txtTrafficlight);
$('#imageContainer').append("<img src='/sites/IT/ITInfrastructure/SiteAssets/"+txtTrafficlight.replace(/<[^>]*>/g, '')+".png' />");
$('.deviceimage').append(imgDevicePicture);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving data: " + jqXHR.responseText);
});
}
You have some charset problem. When I copy paste the lines:
txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalogue%20Devices.aspx?did=" + tempID + "'>" + tempTitle + "</a> - " + tempDeviceType + "</p>";
//txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalog‌​ue%20Devices.aspx?di‌​d=" + tempID + "'>" + tempTitle + "</a>" + "</p>";
In notepadd++ with ANSI encoding, I get:
txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalogue%20Devices.aspx?did=" + tempID + "'>" + tempTitle + "</a> - " + tempDeviceType + "</p>";
//txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalog??ue%20Devices.aspx?di??d=" + tempID + "'>" + tempTitle + "</a>" + "</p>";
Notice the "??" in the "Service%20Catalogue%20Devices" and "did" part. I think this is what make your link fail.
This worked at knocking out the 'undefined':
txtTitle = txtTitle + "<p><a href='/sites/it/ITInfrastructure/SitePages/Service%20Catalogue%20Devices.aspx?did=" + tempID + "'>" + tempTitle + "</a></p>";

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 can create toggleable divs using javascript's innerhtml function?

I am trying to import information from an XML file, and create a name which, when clicked, will show more information. This information will be inside a div with no display until the header has been clicked.
This is the idea. Doesn't work.
$(document).ready(function () {
$.ajax({
type: "Get",
dataType: "xml",
url: 'service.xml',
success: function (xml) {
$(xml).find('Service[Name="j1979"]').find("Define").each(function () {
var PID = $(this).attr("PID");
var name = $(this).find("Name").text();
var source = $(this).find("source").text();
var doffset = $(this).find("DOffset").text();
var type = $(this).find("Type").text();
var length = $(this).find("Lenght").text();
var scale = $(this).find("Scale").text();
var noffset = $(this).find("NOffset").text();
var units = $(this).find("Units").text();
var moreinfo = "<div id='moreinfo'>source += '\r\n' += doffset += '\r\n' += type += '\r\n' += length += '\r\n' += scale += '\r\n' += noffset += '\r\n' += units</div>";
document.getElementById("j1979").innerHTML += PID += " ";
document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";
document.getElementById("j1979").innerHTML += moreinfo;
});
}
});
});
Sorry for any obvious mistakes and/or ugly code.
I assume that this is what you want to achieve: DEMO
just assume that the script in the demo is inside the success function
first, you have some error in here
document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";
this will not add the p element to the element with id j1979 because you write it like that, where you should be writing it like this
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\" ></p>";
note the quotes at start and end, and the closing tag
second, there's no word or anything inside the p element that indicates that you could click it to show more information, so put the PID inside the p like this
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";
here's the full code with some CSS style to hide it before the user click on the PID
$(document).ready(function () {
var PID = "testPID";
var name = "Random Name";
var source = "Google";
var doffset = "1000";
var type = "A-9001";
var length = "50CM";
var scale = "100";
var noffset = "0";
var units = "Some Units";
var moreinfo = "<div id='moreinfo'>source: " + source + "</br>" + "doffset: " + doffset + "</br>" + "type: " + type + "</br>" + "length: " + length + "</br>" + "scale: " + scale + "</br>" + "noffset: " + noffset + "</br>" + "units: " + units + "</div>";
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
});
#moreinfo {
display: none;
}
#j1979 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="j1979"></div>
From the code you have, you can use '+' operator to concatenate strings.
When you need to use single quote inside string defined with single quote, you can use backslash (\) as escape character before it.
Also, you need to hide the div with class "moreinfo" initially.
As for new line, if you want each attribute in new line in moreinfo class, it can be achieved by using HTML "pre" tag or "br" tag or some other way.
So code would be:
var moreinfo = "<pre id='moreinfo' style='display:none'> source = " + source + "\r\n doffset = " + doffset + "\r\n type = " + type + "\r\n length = " + length + "\r\n scale = " + scale + "\r\n noffset = " + noffset + "\r\n units = " + units +"</pre>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
or
var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
If you want to toggle display on click, you can use ternary operator to give condition in onclick function:
var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display == \'inline-block\' ? document.getElementById(\'moreinfo\').style.display = \'none\' : document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
I wrote a program where I needed to toggle a div with javascript. I found a solution with this code.
function toggle( selector ) {
var nodes = document.querySelectorAll( selector ),
node,
styleProperty = function(a, b) {
return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
};
[].forEach.call(nodes, function( a, b ) {
node = a;
node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
});
You can then call the function with:
toggle('.idOrClass');
make sure you use single quotes around the class or id name
Hope this helps! :)

How to add new class to the existing class in this case

I am new to Javascript and Jquery so please excuse if this is a dumb question
HTML is being constructed dynamically as shown
var favoriteresultag = '<ul>';
favoriteresultag += "<section id='"+name+"' class='ulseWrap lielement'>" + "<div class='intit someclassss'>"+ name + "</div>" + "</section>";
How can i add/concat one more variable to the class ulseWrap lielement ??
I tried this way
var classactive = '';
if (some condition) {
classactive = 'activeRest';
} else {
classactive = '';
}
favoriteresultag += "<section id='" + name + "' class='ulseWrap lielement '+classactive+' '>" + "<div class='intit someclassss'>" + name + "</div>" + "</section>";
String concatenation, just like you're doing:
favoriteresultag += "<section id='"+name+"' class='ulseWrap lielement " + classactive + "'>" + "<div class='intit someclassss'>"+ name + "</div>" + "</section>";
Try this with jquery if you are using it
$('.actual_class').addClass('new_class')
In your case can be
$('#'+name).addClass('activeRest')
or
$('.ulseWrap.lielement').addClass('activeRest')

Categories

Resources