Append to element is not working - javascript

I have the following HTML:
<textarea class="input" placeholder="Tap to enter message" maxlength="160"></textarea>
<div class="keyboard">
<ul id="special">
<li data-letter="!">!</li>
<li data-letter="?">?</li>
<li data-letter=",">,</li>
<li data-letter=":">:</li>
<li data-letter=";">;</li>
</ul>
<ul id="first">
<li data-letter="q">q</li><li>1</li>
<li data-letter="w">w</li><li>2</li>
<li data-letter="e">e</li><li>3</li>
<li data-letter="r">r</li><li>4</li>
<li data-letter="t">t</li><li>5</li>
<li data-letter="y">y</li><li>6</li>
<li data-letter="u">u</li><li>7</li>
<li data-letter="i">i</li><li>8</li>
<li data-letter="o">o</li><li>9</li>
<li data-letter="p">p</li><li>0</li>
</ul>
<ul id="second">
<li data-letter="a">a</li>
<li data-letter="s">s</li>
<li data-letter="d">d</li>
<li data-letter="f">f</li>
<li data-letter="g">g</li>
<li data-letter="h">h</li>
<li data-letter="j">j</li>
<li data-letter="k">k</li>
<li data-letter="l">l</li>
</ul>
<ul id="third">
<li id="caps" class="pointer">⇧<span id="underline" class="color">_</span></li>
<li data-letter="z">z</li>
<li data-letter="x">x</li>
<li data-letter="c">c</li>
<li data-letter="v">v</li>
<li data-letter="b">b</li>
<li data-letter="n">n</li>
<li data-letter="m">m</li>
<li><img src="backspace.png"></li>
</ul>
<ul id="fourth">
<li class>?123</li>
<li>,</li>
<li> </li>
<li>.</li>
<li><img src="search.png"></li>
</ul>
with the following javascript:
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').append(data);
});
What I want to have happen is when I click on one of the list items, I want the data-letter to insert itself into the input, sorta like an onscreen keyboard. But it isn't working. Can someone help me?
Here is a Fiddle
Update
This works now
My next problem is the uppercase button. When I click the button, the characters turn to uppercase. How would I use the data to inject an uppercase letter into the input?
The final problem is the first row of letters won't inject into the input. How do I fix this?

Try the below
Enable Jquery file instead of mootools in the fiddle
Thanks

Try:
Demo
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').val( $('.input').val()+ data);
});​

All you have to do is remove the margin on the .input element (it's offscreen for me), and enable jquery on the jsfiddle. After that it works fine for me.

Not sure why jquery .data() not work, but you can use below "this.dataset.xxx"
var data = this.dataset.letter;

This is the solution I came up with
keys = $(".keyboard ul li");
keys.on("click", function() {
var let = $(this).text(),
upperlet = let.toUpperCase(),
lowerlet = let;
if (keys.hasClass("uppercase")){
input.append(upperlet);
}else {
input.append(lowerlet);
}
});
Instead of having the data-letter attribute for every single list-item, I got the text using this function, and appended it on click. This now also accounts for the uppercase letters as well.

Related

Jquery: select an element when two or more conditions are true

I have an element like this
<ul>
<li data-ud="321" data-id="42">
<li data-ud="322" data-id="42">
<li data-ud="323" data-id="42">
<li data-ud="324" data-id="42">
<li data-ud="321" data-id="43">
<li data-ud="322" data-id="43">
<li data-ud="323" data-id="43">
<li data-ud="324" data-id="43">
<li data-ud="321" data-id="44">
<li data-ud="322" data-id="44">
<li data-ud="323" data-id="44">
<li data-ud="324" data-id="44">
<li data-ud="321" data-id="45">
<li data-ud="322" data-id="45">
<li data-ud="323" data-id="45">
<li data-ud="324" data-id="45">
</ul>
Now I want to select a element with data-id=45 and data-ud=322. I have tried but it didn't work.
Thanks in advance
To use 'and' in a selector, simply don't use any other separator, eg a li and class myclass would be:
li.myclass
to find by attribute, use [attribute=x], so to combine the two:
li[data-id=45][data-ud=322]
or, with jquery:
$("li[data-id=45][data-ud=322]")
This can be difficult to read and prone to errors eg a space between the two [][] will give a totally different result, so you can instead use filter to the same effect:
$("li").filter("[data-id=45]").filter("[data-ud=322]")
Fiddle example: https://jsfiddle.net/o9fdhphf/
Try the following:
$('li[data-id=45][data-ud=322 ]');
$("[data-ud=322][data-id=45]").text()
OR
$("[data-ud=321] + [data-id=45]").text()
JSFiddle

Dynamic heading text based upon selected link

I have a portfolio site set up and I have my portfolio set up to shuffle through by selecting certain filters. What I want to do is set some header text, based upon which filter they choose.
The issues is when I select a link, let's say advertising, Advertising will show up as my header text. However if I select something else, say branding, it doesn't change, it stays at advertising.
here is my html
<div id="portfolio-filter-container">
<h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
</div>
<ul id="portfolio-filter">
<!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
<li class="workFilterButtons">All</li>
<li class="workFilterButtons">Advertising</li>
<li class="workFilterButtons">Branding</li>
<li class="workFilterButtons">Catalog</li>
<li class="workFilterButtons">Corporate ID</li>
<li class="workFilterButtons">Consumer Relations</li>
<li class="workFilterButtons">Incentive/Loyalty</li>
<li class="workFilterButtons">Packaging</li>
<li class="workFilterButtons">Product Launch</li>
<li class="workFilterButtons">Promotion</li>
<li class="workFilterButtons">Public Relations</li>
<li class="workFilterButtons">Sales Support</li>
<li class="workFilterButtons">Social Media</li>
<li class="workFilterButtons">Tradeshows</li>
<li class="workFilterButtons">Web/Mobile</li>
</ul>
<div id="bottomWrapper">
and here is my script
$(document).ready(function(){
$(".workFilterButtons a").click(function(){
$(".currentFilter").replaceWith($(this).append());
});
});
by default the page is set to "ALL" when loaded, but as you can see I am trying to gett he dynamic text to work within the .currentFilter span
Any help would be greatly appreciated.
If you only want text you use text() method to both get and set. Also you don't want to replace the element or it won't be found again because it will no longer exist
Try
$(".workFilterButtons a").click(function(){
$(".currentFilter").text($(this).text());
});
You don't need to replace the element with the clicked <a> element (unless you really want to), all you need to do is update the text:
$(document).ready(function () {
$(".workFilterButtons a").click(function () {
// selecting the element with the class
// of 'currentFilter', and setting its
// text (using the text() method) to
// the textContent of the clicked <a>
// element:
$(".currentFilter").text(this.textContent);
});
});
$(document).ready(function() {
$(".workFilterButtons a").click(function() {
$(".currentFilter").text(this.textContent);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="portfolio-filter-container">
<h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
</div>
<ul id="portfolio-filter">
<!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
<li class="workFilterButtons">All
</li>
<li class="workFilterButtons">Advertising
</li>
<li class="workFilterButtons">Branding
</li>
<li class="workFilterButtons">Catalog
</li>
<li class="workFilterButtons">Corporate ID
</li>
<li class="workFilterButtons">Consumer Relations
</li>
<li class="workFilterButtons">Incentive/Loyalty
</li>
<li class="workFilterButtons">Packaging
</li>
<li class="workFilterButtons">Product Launch
</li>
<li class="workFilterButtons">Promotion
</li>
<li class="workFilterButtons">Public Relations
</li>
<li class="workFilterButtons">Sales Support
</li>
<li class="workFilterButtons">Social Media
</li>
<li class="workFilterButtons">Tradeshows
</li>
<li class="workFilterButtons">Web/Mobile
</li>
</ul>
<div id="bottomWrapper"></div>
JS Fiddle demo.
Incidentally, the reason your original code didn't work, and couldn't work, is because of this line:
$(".currentFilter").replaceWith($(this).append());
This replaced the selected element(s) with the clicked <a> element, which meant that, in future, the there was no .currentFilter element to replace or update.
On the other hand, if you want to put the clicked <a> element into the .currentFilter span-element, then you could try the following approach:
$(document).ready(function () {
$(".workFilterButtons a").click(function () {
// finding those <li> elements whose text, when trimmed
// (removing leading and trailing white-space) is equal
// to an empty string (''):
var emptyLi = $('.workFilterButtons').filter(function () {
return $(this).text().trim() === '';
}),
// caching the '.currentFilter' element(s):
currentFilter = $('.currentFilter'),
// checking for those elements in the
// currentFilter jQuery object that have
// a descendant <a> element, and finding
// length of that collection, and then
// checking that it's greater than 0:
hasA = currentFilter.has('a').length > 0;
// appending the contents of the currentFilter
// element into the found emptyLi element:
emptyLi.append(currentFilter.contents());
// if there are no <a> elements in the
// currentFilter element(s):
if (!hasA) {
// we replace the contents (textNode 'all')
// with the clicked <a> element:
currentFilter.contents().replaceWith(this);
} else {
// otherwise we append the clicked link to
// the currentFilter; this works because
// once we get to this stage the <a> element
// if it exists has already been moved back
// to the empty <li>, therefore we can't
// use '.contents().replace()' because
// there are no contents remaining by this point
// (and yes, this was incredibly counter-intuitive
// to me for quite a long time, which is why this
// update took a while):
currentFilter.append(this);
}
});
});
$(document).ready(function() {
$(".workFilterButtons a").click(function() {
var emptyLi = $('.workFilterButtons').filter(function() {
return $(this).text().trim() === '';
}),
currentFilter = $('.currentFilter'),
hasA = currentFilter.has('a').length > 0;
emptyLi.append(currentFilter.contents());
if (!hasA) {
currentFilter.contents().replaceWith(this);
} else {
currentFilter.append(this);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="portfolio-filter-container">
<h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
</div>
<ul id="portfolio-filter">
<!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
<li class="workFilterButtons">All
</li>
<li class="workFilterButtons">Advertising
</li>
<li class="workFilterButtons">Branding
</li>
<li class="workFilterButtons">Catalog
</li>
<li class="workFilterButtons">Corporate ID
</li>
<li class="workFilterButtons">Consumer Relations
</li>
<li class="workFilterButtons">Incentive/Loyalty
</li>
<li class="workFilterButtons">Packaging
</li>
<li class="workFilterButtons">Product Launch
</li>
<li class="workFilterButtons">Promotion
</li>
<li class="workFilterButtons">Public Relations
</li>
<li class="workFilterButtons">Sales Support
</li>
<li class="workFilterButtons">Social Media
</li>
<li class="workFilterButtons">Tradeshows
</li>
<li class="workFilterButtons">Web/Mobile
</li>
</ul>
<div id="bottomWrapper"></div>
JS Fiddle demo.
References:
JavaScript:
Node.textContent.
String.prototype.trim().
jQuery:
append().
click().
contents().
filter().
has().
replaceWith().
text().
I changed your class="currentFilter" to id="currentFilter" so now you won't need a .each() to do what you want to do, the selector selects only 1 element and not an array of 1 element.
Also changed replaceWith() with text(), and likewise append() replaced with text().
Here's a fiddle if you want to see it in action
https://jsfiddle.net/s6bpwycn/

Change the background of li element using the html content of that element

Im pretty sure this is possible, I think Im on the right track, yet it still isn't working for me;
I have this as the jquery, have imported the latest jquery file - what I want is for each colour list item, the content that they contain will be used as their background colour.
If anyone can help me, as I have tried for tens of hours with no success, thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$( "$li.selected-color" ).each(function(element) { var colorlinkcontent = $(element).html(); $(element).css("background-color", colorlinkcontent); });
</script>
<ul class="colors">
<li class="selected-color">#f334568
<li class="selected-color">#f334568
<li class="selected-color">#f334568
<li class="selected-color">#f334568
</ul>
<hr/>
<span class="title">Selected criteria:</span>
<ul class="selected-criteria">
<li>yolo
<li class="selected-color">#f334568
<li>Website
</ul>
Some issues:
No li closing tags.
No script opening tag.
The hex colour codes have too many digits.
The script tag needs to wait until the DOM is loaded or go after the list elements.
You need to read how .each() works as the first argument of the callback function is the index not the element.
The selector should be li.selected-color rather than $li.selected-color.
<ul class="colors">
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
</ul>
<hr/>
<span class="title">Selected criteria:</span>
<ul class="selected-criteria">
<li>yolo</li>
<li class="selected-color">#f33456</li>
<li>Website</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( "li.selected-color" ).each( function() {
var $el = $(this);
$el.css( "background-color", $el.text() );
});
</script>

How can I get this href value?

I would like to get the value "3 Sent" from the hmtl below. How can I do this?
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
EDIT: Apologies everyone, I wasn't clear on what I was after.
The value "3 Sent" changes all the time, can be "1 Sent, 2 Sent" etc. It is a clickable link so I want to be able to click on it.,
Thanks.
Possible with xpath text based search. I believe you are looking for a selector
//a[.='3 Sent']
Edit
Just simply use css selector then,
a[href='#sent']
Try this
The anchor tag when gets clicked it search for the text
$('.nav li a').on('click', function(e){
e.preventDefault();
console.log("Value is " + $(this).text());
});
You can simply get it using below code:
$(document).ready(function(){
$('li').find('a').each(function() {
if($(this).attr('href')=="#sent")
{
alert($(this).text());
}
});
});
Here is JSFiddle
From the class .active in the next list element get the text in anchor.
var textInAnchor = document.querySelector(".active + li a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
from the class .some-tabs find the child list element in the second position then return his anchor text
var textInAnchor = document.querySelector(".some-tabs > li:nth-child(2) a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
Get the href with value = #sent the return the text
var textInAnchor = document.querySelector("[href='#sent']").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>

click on li if no leaf node its append in another div

I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});

Categories

Resources