We Keep Coding

How to appropriately apply styles to a functioning get request using JQuery?

So here's whats going on, I have a couple scenarios where I can't seem to apply any styles to content coming from a get request, and on one of them I managed to be able to but it wouldn't be considered best practice.
Premise:
I have an empty Ul to which Li's will be attached from a GET request to an API.
Scenarios
1) I create DOM objects using JQuery and append LI <-- SPAN <-- string to the empty UL and then state that all the children of the UL will be colored green.
(this does not work & yes I could target the UL and have everything inherit the styles but that wont work for what I have in mind)
2) I append a string which contains HTML markup within it to then add styles and concat them with what the GET request spits out. ( for some reason it seems to work this way but I really don't want to be creating LI's and SPANS + classes all in one string)
//scenario 1
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function (data) {
$.each(data, function (i, item) {
if (item.name && item.drink) {
var $spn = $("<span></span>");
var $lli = $("<li></li>");
// $spn.append(String(item.name));
$spn.css({width: "20px"});
$orders.append($lli).append($spn).append("name: "+item.name+", Order: " + item.drink);
$orders.children().css({ color: "green" });
console.log($spn);
}
})
}
});
/* scenario 2
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function (data) {
$.each(data, function (i, item) {
if (item.name && item.drink) {
var $spn = $("<span>hell</span>");
var $lli = $("<li></li>")
// $spn.append(String(item.name));
$spn.css({width: "20px"});
$orders.append("<li>Name: <span class='tato'>" + item.name + ",</span> Order: " + item.drink + "</li>");
$orders.children().css({ color: "green" });
console.log($spn);
}
})
}
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Coffee Orders</h2>
<br />
<ul id="orders">
<li>control group</li>
</ul>
<br />
<h4>Add a coffee order</h4>
<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="drink"></p>
<button id="add_order">Add!</button>
I haven't been able to find a reliable answer as to why this is happening, eventually I'll want to line up the orders regardless of the name length using a span.
edit:
What was happening (as stated in the answer) was I was appending empty LI's SPANs and Strings to the original UL. When using append() keep in mind anything you add (in a chain form) will be appended to the original stated element and not the previous one.
Side note:
For more information on better practice of templating incoming GET stuff check out this vid I found.
https://www.youtube.com/watch?v=GbNWPn8vodo&index=9&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_

As noted by #Taplar the issue is use of .append(). You are appending <span> elements and #text nodes to <ul> at
$orders.append($lli).append($spn).append("name: "+item.name+", Order: " + item.drink);
which are not valid child elements of <ul>
Permitted content zero or more <li> elements, which in turn often
contain nested <ol> or <ul> elements.
To correct issue, set #text node as .innerHTML of <span> element, and span element as .innerHTML of <li> element using html of jQuery(html, attributes) function attributes property.
Also set span css display property to block for width property to be applied to the element.
//scenario 1
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function(data) {
$.each(data, function(i, item) {
if (item.name && item.drink) {
var $spn = $("<span></span>", {
html: "name: "
+ item.name
+ ", Order: "
+ item.drink,
css: {
width: "20px",
display: "block",
position: "relative"
}
});
var $lli = $("<li></li>", {
html: $spn
});
$orders.append($lli)
.children().css("color", "green");
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Coffee Orders</h2>
<br />
<ul id="orders">
<li>control group</li>
</ul>
<br />
<h4>Add a coffee order</h4>
<p>name:
<input type="text" id="name">
</p>
<p>drink:
<input type="text" id="drink">
</p>
<button id="add_order">Add!</button>

Is it possible to select element by attribute value only?

I need to find all elements in a page by attribute value only (ignoring the key) using jquery.
Is there a way to do this easily?
Currently, I am just iterating on all elements in the page, on every property etc..

You can use $.expr, Element.attributes, Array.prototype.some()
$.expr[":"].attrValue = function(el, idx, selector) {
return [].some.call(el.attributes, function(attr) {
return attr.value === selector[selector.length - 1]
})
};
// filter element having attribute with `value` set to `"abc"`
$(":attrValue(abc)").css("color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div title="abc">abc</div>
<div title="def">def</div>
<div title="ghi">ghi</div>
<div title="jkl">jkl</div>

Use brackets []
var ElementsWithAttributeKeyTest = $('[attributeKey="Test"]');
Or pass an object with the attribute name and value as parameter to this function:
var getElemsByAttribute = function(obj) {
if (obj) {
if (obj.attributeKey && obj.attributeValue) {
return $('[' + obj.attributeKey + '="' + obj.attributeValue + '"]');
}
}
}
var attrObj = {
attributeKey: 'data-color',
attributeValue: 'red'
}
getElemsByAttribute(attrObj).css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span data-color="red">Red</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>
<span data-color="blue">Blue</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>

If you want to search all attributes values you can use this small plugin:
$.fn.search_by_attr_value = function(regex) {
return this.filter(function() {
var found = false;
$.each(this.attributes, function() {
if (this.specified && this.value.match(regex)) {
found = true;
return false;
}
});
return found;
});
};
and you can use it like this:
$('*').search_by_attr_value(/^some value$/);
Based on this answer

You could define new function take as parameter the value you want to filter with (e.g get_elements_by_value(filter)), then inside this function parse all the elements of the page using $('*').each(), after that parse the attributes of every element el of those elements using attribute attributes like below :
$.each(el.attributes, function(){ })
Then inside the each loop you could make your condition and push the matched values with the passed filter inside matched[] that should be returned.
Check working example below, hope this helps.
function get_elements_by_value(filter){
var matched=[];
$('*').each(function(index,el) {
$.each(el.attributes, function() {
if( this.value===filter )
matched.push(el);
})
})
return $(matched);
}
get_elements_by_value('my_value').css('background-color','green');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="my_value">AA</div>
<div title="def">BB</div>
<input type='text' name='my_value' value='CC'/>
<p class='my_value'>DD</p>
<span title="test">EE</span>

Blaze.getData(el) returns null unless data property is accessed

I am trying to make a list of re-orderable items in Meteor. My items have a info.order property which I change on click events. Why does the example below work until I comment out if the line below // ! ...?
If I comment out that line I get the error Cannot read property '_id' of null when data._id is referenced in the event handler.
This is minimal Meteor javascript:
Widget = new Mongo.Collection('widget');
if (Meteor.isClient) {
function moveUp (mongo_id) {
var clicked = Widget.findOne({_id: mongo_id});
var above = Widget.findOne({'info.order': clicked.info.order - 1});
if (above) {
Widget.update({_id: clicked._id}, {$inc: {"info.order": -1}});
Widget.update({_id: above._id}, {$inc: {"info.order": 1}});
}
}
Template.widget.helpers({
// Get list of widget to display and sort by latest first.
widget: function(data){
return Widget.find({}, {sort: {'info.order': 1}});
},
display: function(mongo_id, info) {
var html = '<div>';
html += '<div>' + info.label + '</div>';
html += '<div>Up</div>';
// ! IF NEXT LINE IS COMMENTED-OUT data == null IN EVENT HANDLER
html += '<div>' + info.order + '</div>';
html += '</div>';
return html;
}
});
Template.widget.events({
'click .js-moveup': function(e, tpl){
e.preventDefault();
var data = Blaze.getData(e.currentTarget);
moveUp(data._id);
}
});
} // end is MeteorClient
With this template:
<head></head>
<body>
{{> widget}}
</body>
<template name="widget">
<div class="container">
<h1>Widgets</h1>
{{#each widget}}
{{{display _id info}}}
{{/each}}
</div>
</template>
And this seed data:
Meteor.startup(function () {
if (Widget.find().count() === 0) {
[{info :{label: "first", order: 1}},
{info: {label: "second", order: 2}},
{info: {label: "third", order: 3}}
].forEach(function(w){
Widget.insert(w);
});
}
});

I've got an idea what's going on...
Meteor must compare the output of display() to it's previous value and only evaluate update the DOM if it has changed (or something similar). If I don't print out info.order the HTML of each widget is unchanged.
I tested this by replacing info.order with new Date() to add varying content that didn't reference the model and, sure enough, the widgets more as expected.
So, my take home message is that if you return raw HTML from display Meteor will try to do the write thing but won't always get it right.

Shorten function in Javascript / Jquery

LF way to short my js/jquery function:
$.ajax({ // Start ajax post
..........
success: function (data) { // on Success statment start
..........
//1. Part
$('var#address').text(data.address);
$('var#telephone').text(data.telephone);
$('var#mobile').text(data.mobile);
$('var#fax').text(data.fax);
$('var#email').text(data.email);
$('var#webpage').text(data.webpage);
//2. Part
if (!data.address){ $('p#address').hide(); } else { $('p#address').show(); };
if (!data.telephone){ $('p#telephone').hide(); } else { $('p#telephone').show(); };
if (!data.mobile){ $('p#mobile').hide(); } else { $('p#mobile').show(); };
if (!data.fax){ $('p#fax').hide(); } else { $('p#fax').show(); };
if (!data.email){ $('p#email').hide(); } else { $('p#email').show(); };
if (!data.webpage){ $('p#webpage').hide(); } else { $('p#webpage').show(); };
}, End Ajax post success statement
Here is my html:
<p id="address">Address:<var id="address">Test Street 999 2324233</var></p>
<p id="telephone">Telephone:<var id="telephone">+1 0000009</var></p>
<p id="mobile">Mobile:<var id="mobile">+1 0000009</var></p>
<p id="email">E-mail:<var id="email">info#example</var></p>
<p id="webpage">Web Page:<var id="webpage">www.example.com</var>/p>
How can we reduce the number of selector*(1. part)* and else if the amount (2. part)?

Assuming your object's property names exactly match the spelling of your element ids you can do this:
for (var k in data) {
$('var#' + k).text(data[k]);
$('p#' + k).toggle(!!data[k]);
}
...because .toggle() accepts a boolean to say whether to show or hide. Any properties that don't have a matching element id would have no effect.
Note: your html is invalid if you have multiple elements with the same ids, but it will still work because your selectors specify the tag and id. Still, it might be tidier to just remove the ids from the var elements:
<p id="address">Address:<var>Test Street 999 2324233</var></p>
<!-- etc. -->
With this JS:
$('#' + k).toggle(!!data[k]).find('var').text(data[k]);
And then adding some code to hide any elements that aren't in the returned data object:
$('var').parent('p').hide();
...and putting it all together:
$.ajax({
// other ajax params here
success : function(data) {
$('var').parent('p').hide();
for (var k in data) {
$('#' + k).toggle(!!data[k]).find('var').text(data[k]);
}
}
});
Demo: http://jsfiddle.net/z98cw/1/

["address", "telephone", "mobile", "fax", "email", "webpage"].map(
function(key) {
if (data.hasOwnProperty(key) && !!data[key]) {
$('p#' + key).show();
} else {
$('p#' + key).hide();
}
});
But you should not.

As long as the properties of the object match the id attributes of the p tags you can iterate through the object using the property name as a selector. Also since id attributes are unique, refrain from prefixing the selector with var it is unnecessary.
var data = {
address: "address",
telephone: "telephone",
mobile: "mobile",
fax: "fax",
email: "email",
webpage: "webpage"
};
for(x in data){
var elem = $("#" + x);
if(elem.length == 1){
elem.text(data[x]);
}
}
JS Fiddle: http://jsfiddle.net/3uhx6/

This is what templating systems are created for.
If you insist on using jQuery there is a jQuery plugin: https://github.com/codepb/jquery-template
More:
What Javascript Template Engines you recommend?

I would use javascript templates for this (I've shortened the example a quite a bit, but you should get the gist).
First the template, I love Underscore.js for this so I gonna go ahead and use that.
<% if data.address %>
<p id="address">Address: {%= Test Street 999 2324233 %}</p>
to compile this inside your success function
success: function(data) {
//assuming data is a json that looks like this {'address':'my street'}
var template = _.template(path_to_your_template, data);
$('var#addresscontainer').html(template);
}

Thanks for birukaze and nnnnnn:
With your advice came function;) :
for (var key in data) {
if (data.hasOwnProperty(key) && !!data[key]) {
$('p#' + key).show().find('var').text(data[key]);
} else {
$('p#' + key).hide();
}
};
Now i can avoid for selector with var.

Access daughter DIV from other daughter without ID

I have a structure as below:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Tiger128 (v2)</h3>
</div>
<div class="panel-body">
<input class="form-control" id="tiger128v2" placeholder="String to Hash" type="text">
</div>
<div class="panel-footer">
<a class="btn btn-primary generate-hash" data-hash="tiger128v2">Generate Hash</a>
</div>
</div>
When a user presses the <a> it runs a jQuery function (using $('.generate-hash') selector) which makes a $.getJSON request passing data-hashtype. When it returns the JSON object I need it to append some text to <div class="panel-body"> however as you can see none of them have ID's.
What I have tried is something along the lines of:
$(this).parent().prev('.panel-body').append('Appending some text');
$(this).parent().parent().siblings(".panel-body").append('test');
But I cannot get it to work. Any suggestions?
$('.generate-hash').click(function (e) {
e.preventDefault();
var hashtype = $(this).data('hash');
var string = $(this).closest('.panel').find('input').val();
console.log('Started hash request for ' + hashtype + ' with a value of ' + string);
$.getJSON('ajax/hash.php', {
hashtype: hashtype,
string: string
})
.success(function(data) {
console.log('success function');
if(data.type == 'success'){
// Here is where i need to select the parents
$(this).parent().parent().siblings(".panel-body").append('test');
$(this).parent().prev('.body').append('<div class="alert alert-info"><strong>Generated Hash:</strong> <code>' + data.hash + '</code></div>');
console.log('success msg found');
}else{
$(this).parent().prev('.body').append('<div class="alert alert-' + data.type + '">' + data.msg + '</div>');
console.log('error msg found');
}
})
.fail(function() {
$(this).parent().prev('.body').append('<div class="alert alert-error"><strong>Error:</strong> We could not generate the hash for some reason. The details are below:</div>');
console.log('unable to find hash.php or other error');
});
});

You can use .prev() method:
$(this).parent().prev('.body').append('Something');
Or .closest() method:
$(this).closest('.box').find('.body').append('Something');
Edit:
You should cache the this object, within the context of the Deferred object's handlers this doesn't refer to the clicked element, also replace .success() with .done():
$('.generate-hash').click(function (e) {
// ...
var $this = $(this);
$.getJSON('ajax/hash.php', {
hashtype: hashtype,
string: string
})
.done(function(data) {
console.log('success function');
if(data.type == 'success'){
// Here is where i need to select the parents
$this.parent().parent().siblings(".panel-body").append('test');
// ...
})
.fail(function() {
$this.parent()...
});
});

use closest
closest() selects the first element that matches the selector, up from the DOM tree while parent() selects all the elements that are parent of another element in the DOM tree.
$(this).closest('.box').find('.body').append('Something');
reference closest

try something like this, try prev()
$(this).parent().prev().append('Something');

maybe pure javascript might work
var box = this.parentNode.parentNode,
body = box.getElementsByClassName('body')[0];
body.innerHTML += 'Something';

Try this,
$(this).parents('.box').find('.body').append('Something');
or
$(this).closest('.box').find('.body').append('Something');
Read parents() and closest()