Develop Reference

How do I get an element with a specific ID from getElementsByClassName?

EDIT: SOLVED. Thanks everyone!
I'm new to programming :D My code is below. Here is the deal: I have multiple buttons, but I want to make it so that the same thing would happen anytime any one of these buttons is clicked, but each button also has a specific value, and I also want that specific value to be printed out. My code goes through the document and looks at all the elements with "editButton" class, and correctly identifies all the buttons, but the problem is that no matter which button I press, I always get the value of the last button, because var id only gets assigned after the for loop finishes and is on the last element. I tried creating a global variable and assigning the value to it, but the result is the same. I tried ending the for loop before moving on to .done (function (data), but I got an error. Can someone help me out? Thanks!
$(document).ready(function() {
var anchors = document.getElementsByClassName('editButton');
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = anchor.value;
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records"></div>

Actually, instead of doing a huge for loop to add onclick events to your buttons, one of the best ways to do this is to listen to each button with editButton class on click() event then use $(this) which refers to the exact clicked button. After that, you can use each individual button to do whatever you want.
So your final code should be something like this:
$(document).ready(function() {
$('.editButton').click(function() {
console.log('innerHTML is:', $(this).html())
console.log('id is:', $(this).attr('id'))
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = $(this).value;
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records">
<button class="editButton" id="firstButton">button 1</button>
<button class="editButton" id="secondButton">button 2</button>
<button class="editButton" id="thirdButton">button 3</button>
<button class="editButton" id="fourthButton">button 4</button>
</div>

save the button with button = this when run the onclick function and use it
$(document).ready(function(){
var anchors = document.getElementsByClassName('editButton');
for(var i = 0; i < anchors.length; i++) {
var button;
var anchor = anchors[i];
anchor.onclick = function() {
button = this;
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function( data ) {
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+ button.value +'</p><br>';
$("#records").html(string);
});
}
}
});
https://jsfiddle.net/x02srmg6/

You need to look in to JavaScript closures and how they work to solve this.
When you add event listeners inside a for loop you need to be careful in JS. When you click the button, for loop is already executed and you will have only the last i value on every button press. You can use IIFE pattern, let keyword to solve this.
One simple way to resolve this issue is listed below.
<div id="records"></div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var anchors = document.getElementsByClassName('editButton');
for(var i = 0; i < anchors.length; i++) {
//Wrap the function with an IIFE and send i value to the event listener
(function(anchor){
anchor.onclick = function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function( data ) {
var id = anchor.value;
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+id+'</p><br>';
$("#records").html(string);
});
}
})(anchors[i]);
}
}
});
You can read more about this in JavaScript closure inside loops – simple practical example

In your code..
var id = anchor.value;
could be
var id = anchor.id;
but I recommend you to use event delegation
If you have a html like this
<div id="buttonArea">
<a class="editButton" id="1"/>
<a class="editButton" id="2"/>
<a class="editButton" id="3"/>
.......(so many buttons)
</div>
you can code like below.
$(document).ready(function(){
$('#buttonArea').on('click', 'a.editButton', function (event) {
var anchor = event.currentTarget;
$.ajax({
method: "GET",
url: "/testedit.php",
})
.done(function(data) {
var id = anchor.id;
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+id+'</p><br>';
$("#records").html(string);
});
}

You can use getAttribute. Like:
var anchors = document.getElementsByClassName('editButton');
// Id of anchors
id_of_anchor = anchors.getAttribute("id");
Refs
EDIT
anchor.onclick = function() {
id_of_anchor = $(this).attr("id");
});

You have jQuery in your application, there is easier and more readable way to do it with jQuery;
$(document).ready(function() {
$(".editButton").each(function(a, b) {
$('#' + $(b).attr('id')).on('click', function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = $(b).attr('id');
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
});
});
});
Example: https://jsfiddle.net/wao5kbLn/

How to use an Angular variable to control the index of an angular array?

I need to show some information about an item, and if I click in a list of other items the information must change (not the case right now).
To show the first item of an array is easy if I use 0 between [ ], but if I try to use the $scope.id = 0, nothing happens.
HTML:
<div class="col-md-5">
<b>{{faturas[{{id}}].faturan}}</b>
<p>Vencimento: <span>{{faturas[{{id}}].venc}}</span></p>
</div>
<div class="col-md-7">
<p>Período: {{faturas[{{id}}].ini}} a {{faturas[{{id}}].fim}}</p>
<p>Valor: R$ <span>{{faturas[{{id}}].valor}}</span></p>
</div>
Node:
var queryString = 'SELECT * from faturas WHERE empID = '+usuarioSession.empID;
connection.query(queryString,function(err,rows) {
var ret = [];
for (var i = 0; i < rows.length; i++) {
ret.push ({
index: i,
faturan: "Fatura "+(i+1),
venc: rows[i].fatDataVenc,
ini: rows[i].fatDataIni,
fim: rows[i].fatDataFim,
valor: rows[i].fatValor
});
}
response.writeHead(200, {'Content-Type': 'application/json'});
response.end(JSON.stringify(ret), 'utf-8');
});
Angular:
app.controller('faberto',function($scope,$http){
$scope.id = 0;
$http.get('/servico/faberto').success(function(data) {
$scope.faturas = angular.fromJson(data);
});
});

As #Claies said, you can't use a {{ }} inside another one! Check this link: https://plnkr.co/edit/mHNaTXBNfzTGD3T0ujHY
I've created a mock to show you how ng-repeat would be more suitable for the situation!

Couldn't append span element to array object in Angularjs/Jquery

Am struggling hard to bind an array object with list of span values using watcher in Angularjs.
It is partially working, when i input span elements, an array automatically gets created for each span and when I remove any span element -> respective row from the existing array gets deleted and all the other rows gets realigned correctly(without disturbing the value and name).
The problem is when I remove a span element and reenter it using my input text, it is not getting added to my array. So, after removing one span element, and enter any new element - these new values are not getting appended to my array.
DemoCode fiddle link
What am I missing in my code?
How can I get reinserted spans to be appended to the existing array object without disturbing the values of leftover rows (name and values of array)?
Please note that values will get changed any time as per a chart.
This is the code am using:
<script>
function rdCtrl($scope) {
$scope.dataset_v1 = {};
$scope.dataset_wc = {};
$scope.$watch('dataset_wc', function (newVal) {
//alert('columns changed :: ' + JSON.stringify($scope.dataset_wc, null, 2));
$('#status').html(JSON.stringify($scope.dataset_wc));
}, true);
$(function () {
$('#tags input').on('focusout', function () {
var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters
if (txt) {
//alert(txt);
$(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
var div = $("#tags");
var spans = div.find("span");
spans.each(function (i, elem) { // loop over each spans
$scope.dataset_v1["d" + i] = { // add the key for each object results in "d0, d1..n"
id: i, // gives the id as "0,1,2.....n"
name: $(elem).text(), // push the text of the span in the loop
value: 3
}
});
$("#assign").click();
}
this.value = "";
}).on('keyup', function (e) {
// if: comma,enter (delimit more keyCodes with | pipe)
if (/(188|13)/.test(e.which)) $(this).focusout();
if ($('#tags span').length == 7) {
document.getElementById('inptags').style.display = 'none';
}
});
$('#tags').on('click', '.tag', function () {
var tagrm = this.innerHTML;
sk1 = $scope.dataset_wc;
removeparent(sk1);
filter($scope.dataset_v1, tagrm, 0);
$(this).remove();
document.getElementById('inptags').style.display = 'block';
$("#assign").click();
});
});
$scope.assign = function () {
$scope.dataset_wc = $scope.dataset_v1;
};
function filter(arr, m, i) {
if (i < arr.length) {
if (arr[i].name === m) {
arr.splice(i, 1);
arr.forEach(function (val, index) {
val.id = index
});
return arr
} else {
return filter(arr, m, i + 1)
}
} else {
return m + " not found in array"
}
}
function removeparent(d1)
{
dataset = d1;
d_sk = [];
Object.keys(dataset).forEach(function (key) {
// Get the value from the object
var value = dataset[key].value;
d_sk.push(dataset[key]);
});
$scope.dataset_v1 = d_sk;
}
}
</script>
Am giving another try, checking my luck on SO... I tried using another object to track the data while appending, but found difficult.

You should be using the scope as a way to bridge the full array and the tags. use ng-repeat to show the tags, and use the input model to push it into the main array that's showing the tags. I got it started for you here: http://jsfiddle.net/d5ah88mh/9/
function rdCtrl($scope){
$scope.dataset = [];
$scope.inputVal = "";
$scope.removeData = function(index){
$scope.dataset.splice(index, 1);
redoIndexes($scope.dataset);
}
$scope.addToData = function(){
$scope.dataset.push(
{"id": $scope.dataset.length+1,
"name": $scope.inputVal,
"value": 3}
);
$scope.inputVal = "";
redoIndexes($scope.dataset);
}
function redoIndexes(dataset){
for(i=0; i<dataset.length; i++){
$scope.dataset[i].id = i;
}
}
}
<div ng-app>
<div ng-controller="rdCtrl">
<div id="tags" style="border:none;width:370px;margin-left:300px;">
<span class="tag" style="padding:10px;background-color:#808080;margin-left:10px;margin-right:10px;" ng-repeat="data in dataset" id="4" ng-click="removeData($index)">{{data.name}}</span>
<div>
<input type="text" style="margin-left:-5px;" id="inptags" value="" placeholder="Add ur 5 main categories (enter ,)" ng-model="inputVal" />
<button type="submit" ng-click="addToData()">Submit</button>
<img src="../../../static/app/img/accept.png" ng-click="assign()" id="assign" style="cursor:pointer;display:none" />
</div>
</div>
<div id="status" style="margin-top:100px;"></div>
</div>
</div>

Draw an information table in JS

I have this code using Harvard API that thakes all the CS courses and load them to a dropdownlist.
after picking a course I want to draw an table with all the information of the course, but for some reason I get this to work, the function just not fire (I think it's the issue).
can some one see the problem in the function i wrote?
<script type="text/javascript">
function loadXMLDoc() {
document.getElementById("span").style.visibility = "visible";
document.getElementById("button").style.visibility = "hidden";
$.ajax({
type: "GET",
url: "http://courses.cs50.net/api/1.0/courses?field=COMPSCI&output=xml",
success: function (data) {
var courses = data.documentElement.getElementsByTagName("course");
var options = document.createElement("select");
$(options).change(function () {
ShowCourseDetails(this);
});
for (var i = 0; i < courses.length; i++) {
var option = document.createElement("option");
option.value = $(courses[i]).find("cat_num").text();
option.text = $(courses[i]).find("title").text();
options.add(option, null);
}
document.getElementById("selectDiv").appendChild(options);
document.getElementById("span").style.visibility = "hidden";
}
});
}
//Get the Course information
function ShowCourseDetails(event) {
// get the index of the selected option
var idx = event.selectedIndex;
// get the value of the selected option
var cat_num = event.options[idx].value;
$.ajax({
type: "GET",
url: "http://courses.cs50.net/api/1.0/courses?output=xml&&cat_num=" + cat_num,
success: function (data) {
$("#TableDiv").html(ConvertToTable(data.documentElement));
}
});
}
//Draw The Table
function ConvertToTable(targetNode) {
targetNode = targetNode.childNodes[0];
// first we need to create headers
var columnCount = 2;
var rowCount = targetNode.childNodes.length
// name for the table
var myTable = document.createElement("table");
for (var i = 0; i < rowCount; i++) {
var newRow = myTable.insertRow();
var firstCell = newRow.insertCell();
firstCell.innerHTML = targetNode.childNodes[i].nodeName;
var secondCell = newRow.insertCell();
secondCell.innerHTML = targetNode.childNodes[i].text;
}
// i prefer to send it as string instead of a table object
return myTable.outerHTML;
}
</script>
the Markup:
<div class="left">
<input id="button" type="button" onclick="loadXMLDoc()" value="Get all Coputer Science Courses From Harvard"/>
<br />
<span id="span" style="visibility: hidden">Downloading Courses From Harvard.. Please Wait.. </span>
<div id="selectDiv"></div>
<div id="TableDiv"></div>
</div>
10x alot in advance.

To get it to call ShowCourseDetails I changed this code:
$(options).change(function () {
ShowCourseDetails(this);
});
To this:
$('select').change(function () {
ShowCourseDetails(this);
});
And moved it to the bottom of your callback function, under this:
document.getElementById("span").style.visibility = "hidden";
So that the event gets hooked up to the DOM element after it's been added. I then had to change this code:
$("#TableDiv").html(ConvertToTable(data.documentElement));
To this, since documentElement didn't seem to be defined:
$("#TableDiv").html(ConvertToTable(data.childNodes[0]));
Which then allowed me to just remove this line in your ConvertToTable function:
targetNode = targetNode.childNodes[0];
It still doesn't quite work since you are not navigating through the returned XML correctly. But I'll leave fixing that up to you.

Parse XML to UL

I am trying to use JQuery to parse a sitemap.xml to look like this HTML: http://astuteo.com/slickmap/demo/
After working on it for a few hours I decided I really need some help in the right direction.
the main template it has is this, where each indent is a different directory level:
<ul id="primaryNav" class="col4">
<li id="home">Home</li>
<li>Services
<ul>
<li>Graphic Design</li>
<li>Web Development</li>
<li>Internet Marketing
<ul>
<li>Social Media</li>
<li>Search Optimization</li>
<li>Google AdWords</li>
</ul>
</li>
<li>Copywriting</li>
<li>Photography</li>
</ul>
</li>
</ul>
I am using a google sitemap.xml which looks like this:
http://meyers.ipalaces.org/sitemap_000.xml
<url>
<loc>http://meyers.ipalaces.org/</loc>
<lastmod>2011-02-26T09:32:18Z</lastmod>
<changefreq>hourly</changefreq>
<priority>0.4</priority>
</url>
<url>
<loc>http://meyers.ipalaces.org/meyers/photos/Explorer</loc>
<lastmod>2011-02-26T09:31:33Z</lastmod>
<changefreq>hourly</changefreq>
<priority>0.2</priority>
</url>
The method I came up with avoids setting everything exactly how it is on the css template, but instead I just focused on getting it to have the correct levels:
What it does is takes the level of a URL goes through each level trying to create the list based on the previous level. So with the example www.example.com/brand/model/product/:
it gets the first [0] element, www.example.com this is level 1 so it checks is there a ul[id=1], if not then run create_ul and append it to #content. Now attach a li to the ul it just made..level 1 is "special" because it has to be created first, thats why I have a lot of if level==1 in the code.
For the next element [1] it gets brand which is level 2. This time it checks
is there a li[id=www.example.com] ul[id=2] if there exist, it will create one and then attach a li to the ul.
This method isn't working out for me at all, it also messes up if say level 8 has the same id and something from level 4. I just need a new idea on how to approach this.
Here is my functions as of now, but im sure I should just scrap most of the code:
function create_ul(level, id, prev_id) {
var ul = $('<ul/>',{
id: level
});
if(level==1) {
$('#content').append(ul);
} else {
$('ul[id='+(level-1)+'] li[id='+prev_id+']').append(ul);
}
}
function create_li(level, id, prev_id){
if (level ==1){
if ($('ul[id='+level+']').length == 0) {
create_ul(level, id, prev_id);
} else if ($('ul[id='+level+'] li[id='+id+']').length > 0) {
return;
}
var li = $('<li/>',{
id: id
});
var a = $('<a/>',{
text: level + " - " + id,
href: "nothing yet"
});
$('ul[id='+level+']').append(li);
return;
}
// If there is no UL for the LI, create it
if ($('li[id='+prev_id+'] ul[id='+level+']').length == 0) {
create_ul(level, id, prev_id);
} else if ($('ul[id='+level+'] li[id='+id+']').length > 0) {
return;
}
var li = $('<li/>',{
id: id
});
var a = $('<a/>',{
text: level + " - " + id,
href: "nothing yet"
});
li.append(a);
$('li[id='+prev_id+'] ul[id='+level+']').append(li);
}
$.ajax({
type: "GET",
url: "/sitemap_000.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
URLS = new Array(new Array(), new Array(), new Array());
$(xml).find("loc").each(function(){
var url = $(this).text();
URLS[1].push(url);
url = url.replace("http://", "")
var url_array = url.split("/");
URLS[0].push(url_array);
var rawLastMod = $(this).parent().find('lastmod').text();
var timestamp = rawLastMod.replace(/T.+/g, '');
var lastMod = formatDate(timestamp);
URLS[2].push(lastMod);
});
$(URLS[0]).each(function(i, url_array){
$(url_array).each(function(index, fragment){
var level = index+1;
var id = fragment;
if(index!=0) {
var prev_id = URLS[0][i][index-1];
} else {
var prev_id = null;
}
if(id != "") {
create_li(level, id, prev_id);
}
});
});
}
I have decided to reply on a PHP solution instead of Javascript. I am using this PHP script: http://www.freesitemapgenerator.com/xml2html.html

This is my try to it.
Basically it uses an array to store all the urls' pieces.
For example, the url mytest.url.com/sub1/othersub2.html is handled as:
var map = ['mytest.url.com']['sub1']['othersub2.html'];
This is possible because javascript allows you to index arrays using strings.
Full code (just replace your parseXml function and test it on chrome or firefox with firebug):
<script type="text/javascript">
function parseXml(xml) {
//here we will store nested arrays representing the urls
var map = [];
$(xml).find("loc").each(function () {
//some string cleaning due to bad urls provided
//(ending slashes or double slashes)
var url = this.textContent.replace('http://', '').replace('//', ''),
endingInSlash = (url.substr(url.length - 1, 1) == '/'),
cleanedUrl = url.substr(0, url.length - (endingInSlash ? 1 : 0)),
splittedUrl = cleanedUrl.split('/'), //splitting by slash
currentArrayLevel = map; //we start from the base url piece
for (var i = 0; i < splittedUrl.length; i++) {
var tempUrlPart = splittedUrl[i];
//in javascript you can index arrays by string too!
if (currentArrayLevel[tempUrlPart] === undefined) {
currentArrayLevel[tempUrlPart] = [];
}
currentArrayLevel = currentArrayLevel[tempUrlPart];
}
});
var currentUrlPieces = []; //closure to the recursive function
(function recursiveUrlBuilder(urlPiecesToParse) {
//build up a DOM element with the current URL pieces we have available
console.log('http://' + currentUrlPieces.join('/'));
for (var piece in urlPiecesToParse) {
currentUrlPieces.push(piece);
//recursive call passing the current piece
recursiveUrlBuilder(urlPiecesToParse[piece]);
}
//we finished this subdirectory, so we step back by one
//by removing the last element of the array
currentUrlPieces.pop();
})(map);
}
</script>