Develop Reference

Print text on HTML from JavaScript

I have this for loop
<script>
...
for(i = 0;i < json.length;i++){
document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
</script>
I want to print a paragraph with a href on each loop, so i did this:
</script>
<a id="pLink">
<p id="pText">
</p>
</a>
It works but the thing is this only prints the last loop.
So i tried this inside the script
document.write("<a href=\"" + json[i].html_url + "\">");
document.write("<p>" + json[i].name + "</p>");
document.write("</a>");
instead of this:
document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);
And it prints everything i want but it replaces the whole page.
How can i do this? Do i need to create an id for every loop? Like "pText1, pText2, etc.

Create a container element for that loop, and add the html as you had in mind
<div id="container"></div>
Then in javascript
var container = document.getElementById('container');
var my_html = '';
for(var i = 0;i < json.length;i++){
my_html += '<a href="' + json[i].html_url + '\">';
my_html += '<p>'+ json[i].name + '</p>'
my_html += '</a>'
}
container.innerHTML = my_html;
What we are doing here is adding the content to a string as many times as needed and then add it to the container so it already has all the loops

document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);
If you want to use your this code, you have to write "+=" instead of the "=".
var json = [
{"name":"Name 1", "html_url": "http://www.example.com"},
{"name":"Name 2", "html_url": "http://www.example.com"},
{"name":"Name 3", "html_url": "http://www.example.com"}
];
for(var i = 0; i < json.length; i++){
document.getElementById("pText").innerHTML += json[i].name + "<br>";
document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
<a id="pLink">
<p id="pText">
</p>
</a>

I will do it in the following way:
let json = [{'name':'Google','html_url':'https://www.google.com/'}, {'name':'Facebook','html_url':'https://www.facebook.com/'}, {'name':'Twitter','html_url':'https://twitter.com/?lang=en'}];
let item = document.querySelector(".pLink")
for(let j = 1; j<json.length; j++){
let cln = item.cloneNode(true);
document.body.appendChild(cln);
}
let aTag = document.querySelectorAll('a.pLink');
aTag.forEach(function(item, i){
let a = item.setAttribute("href",json[i].html_url);
let p = item.querySelector('.pText');
p.innerHTML = json[i].name;
})
<a class="pLink">
<p class="pText">
</p>
</a>

Double for loop multidimensional array javascript

Im using ajax to return some json. Here is what the json looks like.
[{"optionValue":"11","optionDisplay":"Canon","preitem":`[{"preitemId":"15","preitemLabel":"Canon EF 100mm f\/2.8L Macro IS USM "},{"preitemId":"18","preitemLabel":"12412"},{"preitemId":"21","preitemLabel":"Sonydas1df Test"}]},{"optionValue":"20","optionDisplay":"Nikon","preitem":""},{"optionValue":"21","optionDisplay":"Audio & Aerial","preitem":""},{"optionValue":"23","optionDisplay":"Sony","preitem":[{"preitemId":"19","preitemLabel":"Sony 1412Test"},{"preitemId":"20","preitemLabel":"Son124124y Test"}]}]`
From what you can see here each option has a few preitems.
For example Canon has the preitems Canon EF 100mm, 12412 and Sonydas1df Test.
The goal is to output everything onto a html page.
So canon will have its own heading with its pre items under it.
Here is my code.
for (var i = 0; i < j.length; i++) {
for (var u = 0; u < j[i].preitem.length; u++) {
preitems += j[i].preitem[u].preitemLabel+'<br>';
}
options += '<div class="itemBlock"><b>'+ j[i].optionDisplay +'</b><input class="subcheckboxes" type="checkbox" id="checkit" value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</input><div class="" id="subcat' + j[i].optionValue + '">'+preitems+'</div></div>';
}
$("#subcat").html(options);
The main options (canon,etc) get displayed fine. However it does not output the only the pritems which are in the option. It outputs every single preitem in the whole json returned.
I want to only show the preitems which are in the option.
Thanks

You aren't resetting preitems
You probably want...
for (var i = 0; i < j.length; i++) {
preitems = '';
for (var u = 0; u < j[i].preitem.length; u++) {
...

When traversing multi-dimensional data objects, you need more specifically identify which actions happen how many times and where. Your plan of just scooping up all of the pre-items and dumping them for each item is fine if you reset the pre-items as rjdown suggests. I'd try something like this instead though:
for (var i = 0, lenj = j.length; i < lenj; i++) {
options += '<div class="itemBlock"><b>'+ j[i].optionDisplay +'</b><input class="subcheckboxes" type="checkbox" id="checkit" value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</input><div class="" id="subcat' + j[i].optionValue + '">';
for (var u = 0, lenu = j[i].preitem.length; u < lenu; u++) {
options += j[i].preitem[u].preitemLabel+'<br>';
}
options += '</div></div>';
}
$("#subcat").html(options);
I feel like this is much more readable and fixes your problem.

BootstrapJS - Nav Nav-list not collapsing on click.

Stumped on another one. I'm using boostrapJS to create a Nav-List. Ideally the headers will remain collapsed by default, but will expand when clicked. Right now I have some javascript that will go and dynamically populate the List, but the click event seems to be doing nothing. (sort of - I click on the header and it jitters a bit, but it does not collapse).
I've looked at the code examples, and I'm pretty sure I'm using the same classes and div structure, but It still seems to be not working, and it's not throwing any errors.
Here is my Code:
$('#header').append('<ul class="nav nav-list">');
for (i = 0; i < len; i++) {
k = keys[i];
$('#header').append('<label class="tree-toggle nav-header">' + keys[i] + '</label>');
for (var j in groupedtemplates[k]) {
$('#header').append('<li data-value=' + groupedtemplates[k][j].id + '>' + groupedtemplates[k][j].attributes.im_name.value + '</li>');
}
}
$('#header').append('</ul>');
$(document).ready(function () {
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
});
The HTML that it's being inserted into is just a simple container.
<div class="well" style="width:100%; padding: 8px 0;" id="header">
</div>

Figured it out.
When you append a tag without a closing tag, the browser inserts one for you. Because of this the objects were not appearing as children.
This is my revised solution that puts all the data to be appended in a variable, then appends it afterwards.
for (i = 0; i < len; i++) {
k = keys[i];
var toAppend = "";
toAppend = toAppend + '<ul class="nav nav-list">' + '<li><label class="tree-toggle nav-header">' + keys[i] + '</label</li>' + '<ul class="nav nav-list tree">'
for (var j in groupedtemplates[k]) {
toAppend = toAppend + '<li data-value=' + groupedtemplates[k][j].id + '>' + groupedtemplates[k][j].attributes.im_name.value + '</li>'
}
toAppend = toAppend + "</ul></ul>";
$('#header').append(toAppend);
}

How to make list in jQuery mobile nested list?

Can you please tell me how to make list in jQuery mobile? I am trying to make this type list as given in fiddle on pop up screen dynamically .
Here is the fiddle
In this fiddle I make two rows.In first row there is only p tag. But in second row there is nested collapsible rows. I need to make same thing in pop up screen. I am able to make first row. But In my second row contend is null why? Can you suggest where I am wrong?
fiddle
$(function () {
$('#test').click(function(){
alert('d');
createCommandPopUpTabs();
$("#tabbedPopup").popup("open");
});
});
var tabsHeader = [ "InputParameter", "basic"];
var tabsHeader_basic = [ "XYZ", "Third Level",
];
function createCommandPopUpTabs(){
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("'+
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").append(button);
$("#commandInfoheader").html(header);
for ( var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>InputParameter</h3></div>";
var content ;
if(tabsHeader[i]=="InputParameter"){
content = "<p>yes</p>";
}else if(tabsHeader[i]=="basic"){
for ( var i = 0; i < tabsHeader_basic.length; i++) {
headerId = tabsHeader_basic[i] + "_tab" + commmand;
header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>basic</h3></div>";
content += getcontend(tabsHeader_basic[i]);
}
}
$("#tabbedSet").append(header);
$("#tabbedSet").find("#" + headerId).append(content);
$("#tabbedSet").collapsibleset("refresh");
}
}
function getcontend(name){
if(name=="Third Level"){
return"<p>Third Level></p>";
} if(name=="XYZ"){
return"<p> second Level></p>";
}
}

There are errors in your code and logic. I will only go over a couple of them to hopefully get you on the right path:
In tabsHeader_basic array the Third Level has a space in it which you later use as an ID which makes it an invalid ID because you cannot have spaces in an ID.
From the HTML 5 Draft:
The value must not contain any space characters.
Also, the "basic" collapsible div needs to exist before you start adding the nested collapsible div.
So this line needs to come out of the for loop
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";
Go through the JSFiddle and compare your code agaisnt my changes.
Hopefully that helps! Let me know if you have any other questions.

I have updated createCommandPopUpTabs() function.
Also removed space in Third Level on var tabsHeader_basic = ["XYZ", "ThirdLevel"];
Check the Updated Fiddle
function createCommandPopUpTabs() {
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("' +
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").html(button);
$("#commandInfoheader").html(header);
$("#tabbedSet").html('');
for (var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='true' id='" + headerId + "'><h3>" + tabsHeader[i] + "</h3></div>";
$("#tabbedSet").append(header);
var content;
if (tabsHeader[i] == "InputParameter") {
content = "<p>yes</p>";
$("#tabbedSet").find("#" + headerId).append(content);
} else if (tabsHeader[i] == "basic") {
for (var j = 0; j < tabsHeader_basic.length; j++) {
var headerId1 = tabsHeader_basic[j] + "_tab" + commmand;
var header1 = "<div data-role='collapsible' data-collapsed='true' id='" + headerId1 + "'><h3>" + tabsHeader_basic[j] + "</h3></div>";
var content1 = getcontend(tabsHeader_basic[j]);
$("#tabbedSet").find("#" + headerId).append(header1);
$("#tabbedSet").find("#" + headerId1).append(content1);
}
}
$("#tabbedSet").collapsibleset("refresh");
}
}

Ajax success append HTML with fadeIn()

I am appending html to a <ul> on an ajax success function.
HTML
<ul id="revisionList">
<!-- ajax.js will insert ordered list here based on number of revisions -->
</ul>
Ajax Success
success: function(json)
{
/*
If successful build the list of revision links
Links include link that will load images in next tab
*/
//loop through revisions and display
for(i = 0, j = json.revision_count.length; i < j; i++) {
//count for revision number
var k = i + 1;
//revision number, does not match k
var revisionID = json.revision_count[i].layout;
$('#revisionList').append(
"<li><a onclick=\"initEditRevision(" + galleryID + ',' + revisionID + ")\" href=\"#editRev\" data-toggle=\"tab\">Revision " + k + "</a></li>"
);
}
}
How do I go about fading in the whole <ul> after the list is built?

Try this
success: function(json) {
var $list = $('#revisionList');
$list.hide(); // Hide Here
for (i = 0, j = json.revision_count.length; i < j; i++) {
var k = i + 1;
var revisionID = json.revision_count[i].layout;
$list
.append("<li><a onclick=\"initEditRevision(" + galleryID + ',' +
revisionID + ")\" href=\"#editRev\"
data-toggle=\"tab\">Revision " + k + "</a></li>");
}
$list.fadeIn('slow'); // Fade In here
}​

for (...
}
$("#revisionList").hide().fadeIn();
Or perhaps you can hide it before the for loop; whatever works best.

You have to hide it using CSS display property firstly or using style attribute if you don't want to use CSS.
#revisionList{display: none;}
OR
<ul id="revisionList" style="display: none;">
then fade in after that all lis appnded completely.
$("#revisionList").fadeIn(500);