Develop Reference

Can't get the ID of a button

I'm trying to get the ID of a button but I can't seem to get it but rather getting the ID of the div which isn't what I want.
Here's what I'm currently doing:
HTML
<div class="container container-about container-login">
<div id="white-container" class="white-container about-text2 bottom-padding-fortypx">
<p id="availableTitle" class="text-center avail-title">Available</p>
<p id="acceptedTitle" class="text-center accept-title">Accepted</p>
<div id="availableJ" class="contractor-dash-div available-j"></div>
<div id="acceptedJ" class="contractor-dash-div accepted-j"></div>
<div class="clear"></div>
</div>
</div>
Javascript:
i++;
$('<div>', {
id: 'available' + i,
class: "avail-accept-jobs-div margin-bottom-twentypx"
}).appendTo('#availableJ');
$('#available' + i).append('<div class="delete-job initial-hidden"><p class="text-center font-weight-bold"><b>X</b></p></div>');
// Populating the available list
$('#available' + i).append('<p class="customer-name partial-name">Name: ' + partialName + '</p>');
$('#available' + i).append('<p class="customer-name full-name initial-hidden">Name: ' + name + '</p>');
$('#available' + i).append('<p>Date: ' + date + '</p>');
$('#available' + i).append('<p>Time: ' + time + '</p>');
// Get this buttons ID
var but = $('#available' + i).append('<div class="accept-job-button text-center"><p>Accept</p></div>');
but.id = keys;
// I understand this is getting the id of the div but the button is essentially a div
$("div").click(function() {
alert(this.id);
});
My question:
How am I able to get the actual ID of the button which is actually a div?

this should be the element that fired the event.
you could also respond to the button's click event, directly, instead of waiting for it to bubble up to the div.
if you want the button ID, you can add it as an attribute to the divs firing the event.
if you add matching "btnID" data attributes to the divs and their button, you can get back what you need (in the same attribute) when the user clicks on the div or its button.
BTW, is the value of keys being updated somewhere? if not, it appears you will allow "shared" ID values.

I misread the original question. If you want to select a child element it is as follows.
$("div > .accept-job-button").click(function() {
alert(this.id);
});

implementing html tags of js variable

When I click open first window link a popup opens.
in that popup you will see a grid with two columns.
in that first column i need to combine name and and icon.
so i added span tag before a tag but its not working.
can you guys tell me how to combine.
providing code below.
http://jsfiddle.net/cepzsokp/
var a = $('<span></span><a/>', {
class: 'sportsDataPlayer',
download: 'download.csv',
type: 'text/csv',
href: URL.createObjectURL(data),
html: ev.FileName
});
return a[0].outerHTML;

You can not do that html mark up. easiest thing would be just add the span before the outerHTML
var a = $('<a></a>', {...})
return "<span></span>" + a[0].outerHTML;

I have edited your latest jsfiddle. Here is the working DEMO
I have modified this line of code as below:
return "<span onclick="window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span>" + a[0].outerHTML;

Add class to dynamically created HTML node

I thought this was going to be a bit easier to do, but I have spent a good 2 hours on it, without being able to figure it out.
I have this output:
<div class="cart-contents">
Your shopping cart is empty
</div>
and I am dynamically creating about 5 spans with JS:
function outputValue(value){
//output.innerHTML = output.innerHTML + value;
output.innerHTML += "<br>" + "<span>" + value + "</span>";
}
so my last span div is a total. I created a CSS class of .total to change a few styles, I tried few things like output.classList.addClass(.total);
How can I dynamically add a class to just the last span?
this would be my output:
var output = document.querySelector(".cart-contents");
var total;
function outputValue(value){
//output.innerHTML = output.innerHTML + value;
output.innerHTML += "<br>" + "<span>" + value + "</span>";
}
<div class="cart-contents">
Your shopping cart is empty
//<span>would go here</span>
//<span>would go here</span>
//<span>would go here</span>
//<span>would go here</span>
//<span class="total">would go here</span>
</div>

To target the last span and add the class with javascript, you'd use a selector, like span:last-child, that gets the last span inside output, and then you'd use classList.add().
There is no addClass(), that's a jQuery method.
output.querySelector('span:last-child').classList.add('total')
FIDDLE

Not a fix for the problem, but this removes the problem:
You can do this in pure CSS, using the last-of-type selector. This is the best solution IMHO.
https://developer.mozilla.org/nl/docs/Web/CSS/:last-of-type
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-child
Codepen example: http://codepen.io/anon/pen/gMOXqK
Since this doesn't even need JavaScript, and only uses CSS without complicated selectors, this seems like the best solution.
Possible fixes for your problem:
Your addClassList syntax is incorrect.
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
output.classList.add("total");
This is the correct addClass syntax.
Is there any reason why you would add the class with JavaScript, instead of adding it instantly? If you would pass an (optional) class parameter, you could pass the class when adding the totals (assuming you know when you're adding the totals).
function outputValue(value){
outputValue(value,"");
}
function outputValue(value, class){
output.innerHTML += "<br>" + "<span class='" + class + "'>" + value + "</span>";
}

Self written toc jQuery function: jump to link target and show corresponding element

I generate dynamically a toc for elements of class=faqQuestion.
The answer resides in a class=faqAnswer element which is hidden by default.
By clicking on class=faqQuestion entry it will show up with
$(this).next(".faqAnswer").slideToggle(300);
Everything works as expected.
What I want: by clicking on a toc link i will jump to the target faqQuestion element and show the corresponding faqAnweser element.
The way I generate the toc:
$(document).ready(function(){
var url = window.location.pathname;
$('<ol />').prependTo('#toc')
$(".faqQuestion").each(function(i) {
var current = $(this);
current.attr("id", "entry" + i);
$("#toc ol").append("<li class=\"faqToc\"><a id='link" + i + "' href='" + url + "#entry" +
i + "' entry='" + current.attr("tagName") + "'>" +
current.html() + "</a></li>");
});
This is what I tried, which will jump to the selected faqQuestion but the faqAnswer element is still hidden.
$(".faqToc").click(function(event){
$(this).next(".faqAnswer").slideToggle(300);
});
My problem is this - at least I think so - so I tried something like - which results in "undefined"
var url = $(this).prop("href");
alert(url);
Trying attr instead of prop returns also "undefined".
Can you point out my problem?
I'm trying to improve my Javascript and jQuery know how, so I don't want to use a toc-plugin.
Update: HTML looks like this:
<div id="toc">
<ol>
<li class="faqToc">
...
</li>
<li class="faqToc">
...
</li>
</div>
<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>
<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

A very simple way would be to use the index() method since relationship between the TOC elements and the question/answer elements is 1 to 1.
$(".faqToc").click(function(event){
var index=$(this).index(); /* zero based index position of element within it's siblings*/
/* toggle answer element with same index */
$(".faqAnswer").eq(index).slideToggle(300);
});
jQuery API Reference : index()

using .append to build a complex menu

To build a menu block which should be switchable with hide/unhide of the menu items, I'm using .append html.
The code idea is this:
navigat += '<h3 class="infoH3"> <a id="' + menuID +'"'
+ ' href="javascript:slideMenu(\'' + menuSlider + '\');">'
+ menuName + '</a></h3>';
navigat += '<div id="' + menuSlider + '" style="display:none">';
navigat += ' <ul>';
navigat += ' <li>aMenu1</li>'
navigat += ' <li>aMenu2</li>'
navigat += ' <li>aMenu3</li>'
navigat += ' </ul>';
navigat += '<!-- menuName Slider --></div>';
$("#someElement").append (navigat);
This is doing well .. so far.
But the point is::
I use JS to read the required menu items (eg. 'aMenu1' together with title and/or link info) from a file to build all that, eg. for 'aMenu1' a complex is composed and $("#someElement").append(someString) is used to add that the 'someElement'.
At the moment I build those html elements line by line. Also OK .. as far as the resulting string has the opening and closing tag, eg. "<li>aMenu2</li>".
As can be seen from above posted code there is a line "<div id="' + menuSlider + '" style="display:none">".
Appending that -- AFAIS -- the .append is automatically (????) adding "</div>" which closes the statement.
That breaks my idea of the whole concept! The menu part isn't included in the 'menuSlider '.
QQ: How to change it -- NOT to have that "</div" added to it??
Günter

You could change you method around to use document fragment style creation and an object to populate the properties on the elements, like this:
var someElement = $("#someElement");
$('<h3 class="infoH3"></h3>').append($('<a />',
{ 'id': menuID,
'href': '#',
click: function() { slideMenu(menuSlider); }
})
).appendTo(someElement);
var div = $('<div />', { 'id': menuSlider, css: {display: 'none'} });
$('<ul />').append('<li>aMenu1</li>')
.append('<li>aMenu2</li>')
.append('<li>aMenu3</li>')
.appendTo(div);
div.appendTo(someElement);
This is a very different way of doing it, first we're caching the $("#someElement") object so we're not searching for it repeatedly. Then we're creating the <h3> as an object, putting the link inside, then inserting then appending the whole thing to someElement. In the last, the same approach it's creating the <div>, setting it's properties, then creates the <ul> menu and appends it inside...then appends that whole div to someElement as well.
As a side note, I'm not sure how .slideMenu() works, but an event handler that works via $(this).parent().next() (or give the div a class) would work as well, and you wouldn't need a function with the slider argument passed.