We Keep Coding

Add svg fill patterns dynamically via JavaScript [duplicate]

When prepending or appending to an element, it literally puts the text and doesn't compile in HTML:
var banner ={
'Format': '90x120cm',
'Value': 35
};
// var premium = { key: values };
function defineProduct(data) {
var item = $('span.tooltip')[0];
console.log($('span.tooltip'));
for(var keys in data){
console.log(keys);
item.append('<div class="item"><div class="left">'+keys+':</div><div class="right ">'+data[keys]+'</div></div>');
}
}
defineProduct(banner);
HTML:
<div class="three-columns">
<div class="col">
<div class="image-holder">
<a href='' id="premium" class="tooltips">
<img src="" class="premium-img" width="85px" height="79px">
<p class="description">Cartão <br><span style="color: #ffc600;" class="different">premium</span></p>
<span class="tooltip"></span>
</a>
</div>
<!-- Same thing from above different description -->
<!-- ditto -->
</div>
Output:
What have I tried/used:
.get();
.prepend(string);
.html(string);
.text(string); <– I don't know why, but I did
document.createTextNode(string);
set a variable which contains HTML tags strings and set to one of the previous attempts
And the reason I used .get() is because I have more than one object that are equivalent to the quantity of their elements, in this case, I have 3. So, for every append, I have different information. E.g.: .get(0), .get(1), etc

Instead of
item.append....
you can use:
item.insertAdjacentHTML('beforeend',....
insertAdjacentHTML: parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.
var banner = {
'Format': '90x120cm',
'Value': 35
};
function defineProduct(data) {
var item = $('span.tooltip')[0];
//console.log($('span.tooltip'));
for (var keys in data) {
//console.log(keys);
item.insertAdjacentHTML('beforeend', '<div class="item"><div class="left">' + keys + ':</div><div class="right ">' + data[keys] + '</div></div>');
}
}
defineProduct(banner);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="three-columns">
<div class="col">
<div class="image-holder">
<a href='' id="premium" class="tooltips">
<img src="" class="premium-img" width="85px" height="79px">
<p class="description">Cartão <br><span style="color: #ffc600;" class="different">premium</span></p>
<span class="tooltip"></span>
</a>
</div>
<!-- Same thing from above different description -->
<!-- ditto -->
</div>
</div>

You're using ParentNode.append to append a literal DOMString which is appended as a text node instead of jQuery#append here:
var item = $('span.tooltip')[0];
The [0] access the underlying DOM element in the jQuery object. Remove the [0] to use jQuery methods (or eq(0) for the first element in the selection collection as a jQuery object) on it or use Node.appendChild.

[0] needs to be removed from $('span.tooltip')[0] . It is trying to access first child of ".tooltip" span which is not available in DOM.

Html syntax to make it work properly

I have got this part of code which represents an item in this bunch of items:
http://www.gosu.cz
<script> //this script is used to set A TAG href via it's ID
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
<!-- Least Content -->
<main id="least">
<div class="container-fluid">
<div class="least-preview"></div> //div used to show selected item
<ul class="gallery start" id="gallery_w">
<!-- item -->
//definition of item, which carry additional informations in data-caption
//However having A TAG using ID to set HREF does't work when ID is not in ""
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="<h3>Header</h3> <p>description </p> <a id=link>Zobrazit produkty</a>" />
<img src="http://placehold.it/857x712" class="img-responsive" alt="chair" />
</a>
</li>
<!-- /item -->
and if you click on first item (http://imgur.com/a/VdKQK) which I work on right now you can see displayed data-caption (which can be seen in this code). What I need is to make that A TAG working via id. It normaly works when it's used outside tag parameters but I can't run it inside parameter. Where is my syntax mistake please?

how can I manipulate my HTML after reading my JSON file?

<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
$.getJSON("./data/data.json", function(json) {
console.log(json.length); // this will show the info it in firebug console
});
});
</script>
I know that json is my JSON object. I want to use that to manipulate my html
if it's the 1st item in my JSON object then
<div class="item active"> <!-- active only appears if it's the first item -->
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="json[0].image" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>json[0].quote</p>
<small>json[0].person</small>
</div>
</div>
</blockquote>
</div>
and I want to repeat the above code n times

There are many ways to do this, but probably the easiest way would be to build a string and append it to whatever container you want it to live in.
$.getJSON("./data/data.json", function(json) {
$.each(json, function(data) {
var html = '<p>' + data.quote + '</p>' +
'<small>' + data.person + '</small>';
$('#MySuperSpecialDiv').append(html);
});
});
Please note that this won't scale well. If you are going to add much more markup than you already have, you should really consider some sort of templating alternative.
Also, if some one comes in behind you to maintain this project, you probably won't be their favorite person.

jQuery append an img to every div

I am trying to display a thumbnail image with every thumb class, but currently I am getting the output below where the images are looping inside the href instead. The order of div, href and img must not change. It looks something like this jsfiddle but this isn't fully working of course...
currently getting:
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
<img src="">
<img src="">
</div>
required output:
<div class ='thumb'>
<a href="#" rel="1">
<img src=>
</a>
</div>
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
</div>
my loop:
var thumbnails = [];
$.each(data.productVariantImages,function(key, val){
thumbnails.push(val.imagePath);
});
for(var thumb in thumbnails) {
$('.thumb').append($('<img>').attr({
"src":[thumbnails[thumb]]
}));
}
am i looping it wrongly?
edit:
The thumbnails are part of a dynamic gallery where basically every time a user choose a different option in a dropdown list, the sources for the thumbs are supposed to change accordingly.
current html:
<div class="thumbnail"><?php
foreach($skuDetails['productVariantImages'] as $variantImage){
if(isset($variantImage) && $variantImage['visible']){
?>
<div class="thumb">
<a href="#" rel="1">
<img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
</a>
</div> <?php }}?>
</div>
sample array of thumbnails:
["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
"http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]
sample output:
<div class="thumbnail">
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
</div>

You need to use .each function on .thumb. Something like:
$(document).ready(function(){
$('.thumb').each(function(){
$(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
});
});

your loop is focused on wrong element. You append img tag to the thumb class. So, the img tags inside the same element. You should create div has thumb class inside the loop, and append it to the thumbnail div. That must like
var div = $(".thumbnail");
$.each(imageArray, function(index, value){
var elem = "<div class='thumb'><a href='#' rel='1'></div>";
div.append($elem);
$('.thumb').append("<img />").attr("src", value);
});
It may be wrong but you should watch the thumbnail element. I cannot write the code to test. But I think the logic must be like this.

If you want that exact structure, I made a demo using plain JavaScript. Enter a number and the thumbClone() function will generate that many. You could probably adapt this function with your existing code easily. I'm in rush, it probably needs refactoring, sorry. :-\
DEMO
function thumbClone(qty) {
var main = document.getElementById('main');
var aFig = document.createElement('figure');
var aLnk = document.createElement('a');
var aImg = document.createElement('img');
aLnk.appendChild(aImg);
aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
aFig.appendChild(aLnk);
aLnk.setAttribute('rel', '1');
main.appendChild(aFig);
aFig.className = "thumb";
console.log('qty: ' + qty);
var thumb = document.querySelector('.thumb');
for (var i = 0; i < qty; i++) {
var clone = thumb.cloneNode(true);
thumb.parentNode.appendChild(clone);
}
}

You need to use each loop which will get each class rather than getting only one class below is syntax of each loop
$(selector).each(function(){
// do your stuff here
)};
in your case
$('.thumb a').each(function(){
// do your stuff here
$(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};

Looks like you need to create the entire div structure for each image.
Lets create the below structure dynamically using the max length of the image array and add the image src .
var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) {
thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
thumbDivEnd;
//Here you can append the thumbDiv to the parent element wherever you need to add it.
}

Get specific data from page and write it to div

I'm building an online store with javascript shopping cart. However, the script doesn't allow printing only one or two values when displaying cart, but I need to do this.
Here's what the cart looks like:
<div class="simpleCart_items">
<div>
<div class="headerRow">
<div class="item-name">Tuote</div>
<div class="item-price">Hinta</div>
<div class="item-decrement">-</div>
<div class="item-quantity">Määrä</div>
<div class="item-increment">+</div>
<div class="item-total">Yhteensä</div>
<div class="item-remove">Poista</div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-1">
<div class="item-name">Teipit</div>
<div class="item-price">€0.00</div>
<div class="item-decrement"><img src="css/minus.png" alt="minus">
</div>
<div class="item-quantity">3</div>
<div class="item-increment"><img src="css/plus.png" alt="plus">
</div>
<div class="item-total">€0.00</div>
<div class="item-remove"><img src="css/remove.png" alt="Remove">
</div>
</div>
<div class="itemRow row-1 even" id="cartItem_SCI-3">
<div class="item-name">Car Speaker -hajuste</div>
<div class="item-price">€4.00</div>
<div class="item-decrement"><img src="css/minus.png" alt="minus">
</div>
<div class="item-quantity">1</div>
<div class="item-increment"><img src="css/plus.png" alt="plus">
</div>
<div class="item-total">€4.00</div>
<div class="item-remove"><img src="css/remove.png" alt="Remove">
</div>
</div>
<div class="itemRow row-2 odd" id="cartItem_SCI-5">
<div class="item-name">Teipit (Musta hiilikuitu)</div>
<div class="item-price">€0.00</div>
<div class="item-decrement"><img src="css/minus.png" alt="minus">
</div>
<div class="item-quantity">1</div>
<div class="item-increment"><img src="css/plus.png" alt="plus">
</div>
<div class="item-total">€0.00</div>
<div class="item-remove"><img src="css/remove.png" alt="Remove">
</div>
</div>
</div>
</div>
NOTE: The cart is written via javascript so it isn't visible in page source, only in inspect mode of the browser.
So how would I gather the item-name, item-priceand item-quantity?
I've tried this:
var name = $('.item-name');
var price = $('.item-price');
var quantity = $('.item-quantity');
var data = name + price + quantity;
$('#items').html(data);
But this won't actually do anything.

When doing this -> $('.item-name');
You are just capturing the element as object but not the value.
Now that you got your element as object, you need to extract the value and, in this case, your element object is a div so you can try .text() or .html() (to get the text or html inside the div).
(For this situation I will use text() cause you are working just with values and there is nothing related to html)
Try this:
var name = $('.item-name');
var price = $('.item-price');
var quantity = $('.item-quantity');
var data = name.text() + price.text() + quantity.text();
$('#items').html(data);
Better solution:
This will make clickable the div in which you have the product and match the cartItem_SCI pattern.
So, when user clicks any of the elements of your cart, you will get the name, price and quantity values that will be attached to the $('#items') div using append() method instead of html() (because using this will replace the product information each time the user clicks a div)
$(document).ready(function() {
$('div[id^="cartItem_SCI-"]').css({ cursor:'pointer' });
$('div[id^="cartItem_SCI-"]').click(function() {
var name = $(this).find('.item-name');
var price = $(this).find('.item-price');
var quantity = $(this).find('.item-quantity');
var data = name.text() + ' - ' + price.text() + ' - ' + quantity.text();
$('#items').append(data + '<br/>');
});
});​

You are just getting a reference to the class, add .html() to get the inner html of the element that the class applied to.
var name = $('.item-name').html();

For one item you can get like this.But since you have multiple items make one object like this .
var item={};
$('.item-name').each(function(){item.name=$(this).html()});
$('.item-price').each(function(){item.price=$(this).html()});
$('.item-quantity').each(function(){item.quantity=$(this).html()});
var data='';
for(var i=0;i<item.length;i++)
{
data+=item[i].name+item[i].price+item[i].quantity;
}
$('#items').html(data);