Develop Reference

Inserting class of clicked element and ID of parent into another image

I'm a JavaScript novice and I'm having some difficulty getting my code to work. I've set up a function that pulls in variables based on element classes and IDs and executes it onclick.
<div id="holder">
<img id="wallImg" src="/testpath/selwall/nopaint.jpg">
</div>
<div id="options">
<ul id="selWall">
<li class="bluepaint" onclick="printStuff()"><strong>Blue</strong></li>
<li class="redpaint" onclick="printStuff()"><strong>Red</strong></li>
<li class="greenpaint" onclick="printStuff()"><strong>Green</strong></li>
</ul>
</div>
<script type="text/javascript">
function printStuff() {
var imgCategory = srcElement.parentNode;
var imgClass = srcElement.className;
document.getElementById("wallImg").src="http://testurl.co.uk/media/gbu0/" + imgCategory + ImgClass + ".png";
}
</script>
The user is supposed to be able to select their paint colour from a selection of swatches (the ul#selWall li elements) and the JS will change the source of a particular image ID on the page (in this case, img#wallImg) with the clicked element's class and clicked element's parent element ID.
Eventually I want to be able to expand this script to use the ul id as a URL parameter name and the paint type (i.e. testurl.com/paint-selection&selWall=bluepaint&selDoor=greenpaint.) As far as I know, JQuery is unable to append URLs so I'd rather stick with plain JavaScript.

You're saying you want to stick with javascript because you don't think jQuery can append URLs. This is not a real reason to just entirely ignore it. JQuery IS javascript, it's just a library. This means that you can just use vanilla javascript whenever you want it, for example, when you want to change the URL.
Now for your desired functionality. You can use the keyword this in your inline click event registrator (i.e. onclick="printstuff()"). Passing the this variable will allow you to use the clicked element in the click handler. So change onclick="printStuff()" to onclick="printStuff(this)". Now in your function you can just use this instead of srcElement, and make sense.
OR INSTEAD USE JQUERY LIKE THE REST OF THE WORLD
$(document).ready(function(event){
$("#selwall).children("li").on("click", function(event) {
event.preventDefault();
var category = "sellwall"; //probably want to store this into a data-category arrtibute somewhere (maybe in the id=sellwall ul)
var imgClass = $(this).attr('class'); //preferably use data-img_id or something too (i.e. dont use classes and id's to store data you need somewhere else).
$("#wallImg").attr('src', <url> with imgClass and category>);
});
})
So I'd recommend using jQuery (since you're a javascript novice too, dont learn bad stuff, just learn how to program well right away) and using the data-attribute paradigm, look it up on the internet. Use it to store the URL parts you want to use.

Made some changes to your script to make script work and get the parent id and class of the current element.
function printStuff(srcElement) {
var imgCategory = srcElement.parentNode;
var imgClass = srcElement.className;
document.getElementById("wallImg").src="http://testurl.co.uk/media/gbu0/" + imgCategory.getAttribute('id') + imgClass + ".png";
alert(document.getElementById("wallImg").src);
var url = 'testurl.com/paint-selection&selWall='+imgClass+'&selDoor='+ imgCategory.getAttribute('id');
alert(url);
}
<div id="holder">
<img id="wallImg" src="/testpath/selwall/nopaint.jpg">
</div>
<div id="options">
<ul id="selWall">
<li class="bluepaint" onclick="printStuff(this)"><strong>Blue</strong></li>
<li class="redpaint" onclick="printStuff(this)"><strong>Red</strong></li>
<li class="greenpaint" onclick="printStuff(this)"><strong>Green</strong></li>
</ul>
</div>

Polymer - Get data-bound attribute value in repeating template

I'm having a bit of an issue here. I had a small amount of success with event.target.templateInstance.model.thing syntax to get the value of attributes from within a repeating template but I keep getting back undefined from this bit of code I have here:
downloadFunction: function (e) {
console.log("dl function clicked");
//get particular id of thing
var fu = e.target.templateInstance.model.s.soundId;
console.log(fu);
//^ returns "TypeError: Cannot read property 'soundId' of undefined"
}
And my repeating template is here:
<div layout horizontal wrap center center-justified>
<template repeat="{{s in carddata}}">
<sound-card image="{{s.imgurl}}"
quotetext="{{s.quote}}"
soundsrc="{{s.soundurl}}"
soundref="{{s.soundId}}"
downloadfunction="{{downloadFunction}}">
</sound-card>
</template>
</div>
Where carddata is just an array with my data in it. All of the values are generated fine so I know it's not an issue with my array. I'm just confused how exactly I'm supposed to target someting from within the repeating template? Am I calling it at the wrong time? Or am I messing up the syntax of the templateInstance bit?
If it matters, I'm trying to get it to work in an Android 4.4 webView using Apache Cordova. 4.4 webView doesn't appear to enjoy the shadowDOM terribly much.
Thanks!
edit: After some jiggery pokery with console logs, it appears that the sender value is referring to the div that I apply the on-click="{{downloadFunction}} to. Here's the template that I am repeating, if this provides any insight.
<div class="soundcard-container" vertical layout>
//can't target this one either on WebView 4.4, works on ChromeOS
<img src="{{image}}" on-tap="{{playAudio}}">
<div class="soundcard-bottom-container" horizontal layout center justified>
<span>{{quotetext}}</span>
//I have an 'a' tag for desktop browsers and the div tag is targeting my Android/iOS
//apps that I am exporting as a webView to using Apache Cordova. Webonly is hidden
//at the point where I'm trying to get my downloadfunction to work.
//console.log(sender) in my downloadfunction returns this div v
<div on-tap="{{downloadfunction}}" class="mobileonly"></div>
</div>
//just a hidden audio thing for web
<div style="display: none">
<audio id="{{soundref}}" src="{{soundsrc}}" controls preload="auto"></audio>
</div>
</div>
edit2 some console logs..
console.log(sender) and console.log(event.target) are both the same div that has the on-click event for my downloadFunction.. not sure if this should be the case.
console.log(e.target.templateInstance.model) returns my <sound-card> object, I believe like it should(?)
It's just when I add the specific .s.soundId that it's undefined. I'm not sure why it's unable to find it.. Maybe there's another way to get the specific soundId (or s.soundId rather) of that particular <sound-card> object?

I'll bet you want to refer to the "sender" of the event—not e.target. See the part about inSender at https://www.polymer-project.org/0.5/docs/polymer/polymer.html#declarative-event-mapping:
inSender: A reference to the node that declared the handler. This is
often different from inEvent.target (the lowest node that received the
event) and inEvent.currentTarget (the component processing the event),
so Polymer provides it directly.
This might fix it:
downloadFunction: function (e, detail, sender) {
console.log("dl function clicked");
//get particular id of thing
var fu = sender.templateInstance.model.s.soundId;
console.log(fu);
}

Alright I was able to fit this in a different way. I wasn't able to get e.target.templateInstance.model.s.soundId bit to work, so instead on the div that I call the event on (event.target) I gave it an attribute called data-soundid and passed it {{soundref}} from my original template and then where I repeat that template I simply made a function like so:
downloady: function (e) {
console.log(e.target.getAttribute('data-soundurl'));
}
Ta da! Very nice solution. Thanks to Eyal who suggested this to me in a previous question. It works like a charm. :-)

Here is working example of using templateInstance, with included selecting by dynamic ID: Plunk .
As for your code, can't tell why it's not working.
handleEvent: function(e, detail, sender) {
console.log('handleEvent');
console.log(sender.id);
//How to catch full_obj here,
//..as if first item is clicked: full_obj = {"firstName":"John", "lastName":"Doe"}
//console.log(e);
console.log(e.target.templateInstance.model.item.firstName);
//console.log(detail);
//console.log(sender);
this.instance_firstName = e.target.templateInstance.model.item.firstName;
this.instance_lastName = e.target.templateInstance.model.item.lastName;
//Selecting by dynamic ID
var clicked_element = this.shadowRoot.querySelector('#'+this.instance_firstName);
console.log('Selecting');
console.log(clicked_element);
//var second_element = sender.templateInstance.model.querySelector('my-second-element');
//var second_element = this.$.second_element;
}
Edit:
Event handling and data binding Docs

Function not displaying when page is clicked on

I have a Javascript function that creates a few list items in an unordered list when run, but when the page is called the onload event does not run the function, and it only works when I refresh the page. I tried putting an onclick function in the anchor tag that leads to the page, but that too does not run the function. I'm using JQuery mobile's UI to style and D3. I also tried .ready from JQuery, but that did not solve the problem either.
<div data-role="content">
<ul data-role="listview">
<li> To Data</li>
</ul>
</div>
The D3 function is:
coolcat: function(){
var AddedElem = d3.select("#YourData_ul").selectAll("li")
.data(lines)
.enter()
.append("li")
.attr("class", "ui-field-contain");
AddedElem.append("label").text(function (d){ return d.itemname;}).attr("class", "information");
AddedElem.append("input").attr("class", "input-deco");
console.log("Just ran Coolcat!");
I previously put the "Onload" event in the data.html file, (Not in the index), and it did not work, so I put it in the index, and it would not display either. (It did run without a refresh)

It's probably linked to the order of loading of these libraries.
You could avoid all that by using plain old JavaScript, which would look like this:
HTML:
<div data-role="content">
<ul id="myListView" data-role="listview">
<li> To Data</li>
</ul>
</div>
JavaScript:
var list = document.getElementById('myListView');
var listEntry = document.createElement('li');
listEntry.appendChild(document.createTextNode('new list text'));
list.appendChild(listEntry);
I haven't completed the rest of it, but if you call this javascript on your onload function, it'll definitely run.
You can also append your function to each of the list items using a standard DOM selector also.

jQuery jScrollPane replace specific div inside of getContentPane()

I'm using a custom jScrollPane and dynamically populate it using jQuery from a returned partial view.
I'm populating it like this:
var pane = $('.mainContainingDiv').jScrollPane(settings);
var api = pane.data('jsp');
// Populate function
api.getContentPane().html(someData);
api.reinitialise();
This is great and works exactly as I expect it to, but this content pain currently contains content that only needs to be set once so I do not want to return more than i have to on every server call. Rather, i'd like to move it out of the partial view and into the main view that contains the javascript.
Here's some html to illustrate this better:
BEFORE:
<div class="myContainingDiv">
<div class="staticContentDivThatIDontWantReturnedOnEveryServerCall">
Info
</div>
<div class="dynamicDiv">
More Info
</div>
</div>
so right now I'm replacing both divs with the getContentPane() function. How can I only replace one. e.g.
CALL 1
// some controller calls
api.getContentPane().html(NEWDATAFROMWHEREVER);
Here's what this results in (as expected), and the result I want.
UNDESIRED RESULT
<div class="myContainingDiv">
NEWDATAFROMWHEREVER
</div>
DESIRED RESULT
<div class="myContainingDiv">
<div class="staticContentDivThatIDontWantReturnedOnEveryServerCall">
Info
</div>
NEWDATAFROMWHEREVER
</div>
So how can I replace only one div in the container with the getContentPane() call via jScrollPane
Thanks

Figured it out:
api.getContentPane().children('.dynamicDiv').html(NEWDATAFROMWHEREVER);
api.reinitialise();
hopefully this helps someone else

Getting screen reader to read new content added with JavaScript

When a web page is loaded, screen readers (like the one that comes with OS X, or JAWS on Windows) will read the content of the whole page. But say your page is dynamic, and as users performing an action, new content gets added to the page. For the sake of simplicity, say you display a message somewhere in a <span>. How can you get the screen reader to read that new message?

The WAI-ARIA specification defines several ways by which screen readers can "watch" a DOM element. The best supported method is the aria-live attribute. It has modes off, polite,assertive and rude. The higher the level of assertiveness, the more likely it is to interrupt what is currently being spoken by the screen reader.
The following has been tested with NVDA under Firefox 3 and Firefox 4.0b9:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<button onclick="$('#statusbar').html(new Date().toString())">Update</button>
<div id="statusbar" aria-live="assertive"></div>
</body>
The same thing can be accomplished with WAI-ARIA roles role="status" and role="alert". I have had reports of incompatibility, but have not been able to reproduce them.
<div id="statusbar" role="status">...</div>

Here is an adapted real world example -- this up-level markup has already been converted from an unordered list with links into a select menu via JS. The real code is a lot more complex and obviously could not be included in its entirety, so remember this will have to be rethought for production use. For the select menu to be made keyboard accessible, we registered the keypress & onchange events and fired the AJAX call when users tabbed off of the list (beware of browser differences in timing of the onchange event). This was a serious PITA to make accessible, but it IS possible.
// HTML
<!-- select element with content URL -->
<label for="select_element">State</label>
<select id="select_element">
<option value="#URL_TO_CONTENT_PAGE#" rel="alabama">Alabama</option>
</select>
<p id="loading_element">Content Loading</p>
<!-- AJAX content loads into this container -->
<div id="results_container"></div>
// JAVASCRIPT (abstracted from a Prototype class, DO NOT use as-is)
var selectMenu = $('select_element');
var loadingElement = $('loading_element');
var resultsContainer = $('results_container');
// listen for keypress event (omitted other listeners and support test logic)
this.selectMenu.addEventListener('keypress', this.__keyPressDetector, false);
/* event callbacks */
// Keypress listener
__keyPressDetector:function(e){
// if we are arrowing through the select, enable the loading element
if(e.keyCode === 40 || e.keyCode === 38){
if(e.target.id === 'select_element'){
this.loadingElement.setAttribute('tabIndex','0');
}
}
// if we tab off of the select, send focus to the loading element
// while it is fetching data
else if(e.keyCode === 9){
if(targ.id === 'select_element' && targ.options[targ.selectedIndex].value !== ''){
this.__changeStateDetector(e);
this.loadingElement.focus();
}
}
}
// content changer (also used for clicks)
__changeStateDetector:function(e){
// only execute if there is a state change
if(this.selectedState !== e.target.options[e.target.selectedIndex].rel){
// get state name and file path
var stateName = e.target.options[e.target.selectedIndex].rel;
var stateFile = e.target.options[e.target.selectedIndex].value;
// get the state file
this.getStateFile(stateFile);
this.selectedState = stateName;
}
}
getStateFile:function(stateFile){
new Ajax.Request(stateFile, {
method: 'get',
onSuccess:function(transport){
// insert markup into container
var markup = transport.responseText;
// NOTE: select which part of the fetched page you want to insert,
// this code was written to grab the whole page and sort later
this.resultsContainer.update(markup);
var timeout = setTimeout(function(){
// focus on new content
this.resultsContainer.focus();
}.bind(this), 150);
}.bind(this)
});
}

It really depends whether you are just adding some messages or replacing large parts of the page.
Messages
There are Aria Live Regions, which announce any change to their contents. This is very useful for status messages and sometimes even used with visually hidden live regions to only address screen reader users.
<button onclick="document.querySelector('#statusbar').innerHTML = new Date().toString()">Update</button>
<div id="statusbar" aria-live="assertive"></div>
The aria-live attribute establishes a live region and its value is a politeness setting, which regulates how likely it is the change will interrupt what is currently being spoken by the screen reader.
Another classic example is inline validation of form fields, where the alert role, a live region, is used to immediately announce the error message to the user:
<label>Day of the week we hate
<input type="text" aria-describedby="error">
</label>
<div role="alert" id="error" hidden>only Monday is permitted</div>
Large Parts of Content
When JavaScript is changing large parts of the site, like in single page applications, putting everything inside a live region would be overkill and actually very annoying.
To let the user know that content changed after activating a trigger, two approaches exist:
A new state of the trigger is announced, implying that the user can simply continue reading to find the new content
Focus is put either onto the element who’s content changed, or on the first interactive element inside
Simply read on
The first case would be applied if the role of the trigger (or other status information) makes it clear that a content change will happen, so it’s expected.
A classic example is the accordion. It has aria-expanded state, which communicates whether its contents are currently visible or not. If they are, the user will simply continue reading, because contents should follow immediately after.
toggleAccordion = e => {
const target = document.getElementById(e.currentTarget.getAttribute('aria-controls'));
e.currentTarget.setAttribute('aria-expanded', ! target.toggleAttribute('hidden'));
}
<!-- soon to be replaced by <details> and <summary> -->
<button aria-expanded="false" aria-controls="accordion-content" onclick="toggleAccordion(event)">2.1 First Rule of ARIA Use</button>
<blockquote id="accordion-content" hidden>
<p>If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. […]</p>
</blockquote>
Put focus on the new content
In the second case focus is set programmatically elsewhere, so that element will be announced. This is particularly helpful if it’s parent elements have grouping roles, so their names will be announced as well, as in the case of a modal dialog.
Another example would be a single page application’s navigation, where the single navigation items are still navigated by means of tab.
To be able to programmatically focus a non-interactive element, but not manually, tabindex="-1" is necessary. Focussing the headline is a best practice.
/* some sort of SPA router */
document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', e => {
// hide all visible contents
document.querySelectorAll('main > :not([hidden])').forEach(c => c.hidden = true);
document.querySelectorAll('[aria-current]').forEach(c => c.removeAttribute('aria-current'));
// show selected content
const content = document.querySelector(e.currentTarget.getAttribute('href'));
content.hidden = false;
content.querySelector('h1').focus();
e.currentTarget.setAttribute('aria-current', 'page');
}));
a[aria-current] { font-weight: bold }
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</nav>
<main>
<div id="page-1">
<h1 tabindex="-1">Page 1</h1>
<p>Many lines of content to follow</p>
</div>
<div id="page-2" hidden>
<h1 tabindex="-1">Page 2</h1>
<p>Many lines of content to follow</p>
</div>
</main>