here I am adding the text of each '. cmsCategories' div to item_array, but then .replace() won't work on the item_array keys. How can I fix this? (after this I'll write the new contents back into the div). Any help would be awesome!
http://jsfiddle.net/QKHJJ/1/
Javascript:
$(document).ready(function() {
var item_array=new Array();
$("[class=' cmsCategories']").each(function(i, obj) {
item_array.push(obj.innerHTML);
});
item_array[0].replace("icon_dog", "<img src='img/icon_dog.png' alt='icon_dog' />");
item_array[0].replace("icon_cat", "<img src='img/icon_cat.png' alt='icon_cat' />");
alert(item_array[0]);
});
HTML:
<ul class="cmsSmartListResults">
<li>
<div class=" cmsCategories">icon_cat, apple, icon_dog, pear, banana</div>
<div class=" cmsDescription"></div>
<div class=" cmsFileSize"></div>
<a class=" cmsMoreLink"></a>
</li>
<li>
<div class=" cmsCategories">apple, icon_dog</div>
<div class=" cmsDescription"></div>
<div class=" cmsFileSize"></div>
<a class=" cmsMoreLink"></a>
</li>
<li>
<div class=" cmsCategories">pear, banana</div>
<div class=" cmsDescription"></div>
<div class=" cmsFileSize"></div>
<a class=" cmsMoreLink"></a>
</li>
</ul>
1) The replace function doesn't change the string you pass (strings are immutable) : it returns a new one.
Do :
var newString = item_array[0].replace(...
or
item_array[0] = item_array[0].replace(...
2) After this operation, you must change the DOM again with $('someselector').html(item_array[0]);
The complete code you need is something like
$("[class=' cmsCategories']").each(function(i, obj) {
var html = $(this).html();
html = html.replace ...
$(this).html(html);
});
The replace method does not modify the original value. You'd have to do something like:
item_array[0] = item_array[0]
.replace("icon_dog", "<img src='img/icon_dog.png' alt='icon_dog' />");
You should do
item_array[0] =
item_array[0].replace("icon_dog", "<img src='img/icon_dog.png' alt='icon_dog' />")
I think that your replace statement is incorrect. Try this.
item_array[0] = item_array[0].replace("icon_dog", "<img src='img/icon_dog.png' alt='icon_dog' />");
item_array[0] = item_array[0].replace("icon_cat", "<img src='img/icon_cat.png' alt='icon_cat' />");
jsFiddle
Updated your jsFiddle, you forgot the array = array.replace.
http://jsfiddle.net/QKHJJ/3/
Related
In my e-commerce environment, I need a jQuery validation between 2 product attributes. Simplified it needs to check if the cart has a product which is present on the same page:
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." ></a>
</li>
</ul>
<! –– Product ––>
<article class="post-6735 product" data-id="6735">
<div class="product_wrapper">
<a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
</div>
</article>
I would like to be able to check if the attribute and its value from data-product_id within the cart is the exact same as in article a.button element. My approach:
jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id').each( function() {
if( jQuery('article a.button')/*check if it is the same*/){
// do something here
}
});
As you can see the ID number 6735 is in more attributes. So perhaps a different way is also possible?
To get current_ProductId, You just need to get from $('article').data('id')
To loop through all mini cart items, You just need mini_cart_item
As you can see, we can get data attribute value by using data
var current_ProductId = $('article').data('id');
$('.mini_cart_item').each(function() {
var productId_MiniCartItem = $(this).find('a').data('product_id');
if(productId_MiniCartItem == current_ProductId){
// do something here
console.log("ProductId: " + productId_MiniCartItem + " has been ordered");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." >6735</a>
</li>
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6736" data-cart_item_key="..." >6736</a>
</li>
</ul>
<! –– Product ––>
<article class="post-6735 product" data-id="6735">
<div class="product_wrapper">
<a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
</div>
</article>
If you only need help to clarify your solution it would be
$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
if( $('article a.button').data('product_id') == $(this).data('product_id'){
// do something here
}
});
each iterate through collection of jquery elements.
This
jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id')
is the single value, it would take the first element that finds and then executes attr on it.
UPDATE
To update all products button on site based on all products that are inside the card
var product_id = "";
var article = ".post-"; // class of article
$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
product_id = $(this).data('product_id')
article = article + product_id; // we add strings here, example .post-6225
$(article + " .product_wrapper a").attr('disabled', 'disabled');
});
I have an array full of objects that have the same keys, but different values. These objects need to be turned into divs with various sub elements. The following code works, but seems messy and hard to maintain.
pim.buildProducts = function(array) {
// for each item in the array
productHTML = '';
compareBoxHTML = '<div class="checkbox compare">' +
'<label data-placement="right" data-toggle="tooltip" title="Add to Compare"><span class="compare-text">Compare</span><input type="checkbox" value="compare"></label>' +
'</div>';
for(i = 0; i < array.length; i++) {
// build image
image = '<div class="image"><img src="' + array[i].image + '" /></div>';
// build description
desc = '<div class="desc"><h4>' + array[i].id + '</h4>' +
'<h5>' + array[i].description + '</h5>';
// build icons
icons = '<div class="pim-icons"><a class="cart" href="' + array[i].url + '"><span class="glyphicon glyphicon-shopping-cart"></span></a>';
if(array[i].catalog) {
icons += '<a class="file" href="' + array[i].catalog + '"><span class="glyphicon glyphicon-file"></span></a>';
}
icons += '</div>';
productHTML += '<div class="product">' + image + desc + icons + '</div>';
}
return productHTML;
};
Are there better ways of doing this, or other options that I could pursue?
Thanks!
Walter
As far as I know this is the cleanest way to do it.
First of all you should create all html like this;
<div hidden="hidden" id="mainDiv">
<div class="checkbox compare">
<label data-placement="right" data-toggle="tooltip" title="Add to Compare">
<span class="compare-text">Compare</span>
<input type="checkbox" value="compare">
</label>
</div>
<div class="image">
<a href="">
<img src="">
</a>
</div>
</div>
After that you should make the parent div hidden, and clone it to an object with .clone(). After that you just simply change values of the element like;
<script>
function fillData(array)
{
for(var i ; i<array.length;i++)
{
var element = $("#mainDiv").clone();
element.attr("hidden","");
element.find("img").attr("id",array[i].url);
$(document).append(element);
}
}
</script>
and append to where ever you want.
You could use document.createElement and the other DOM methods instead of writing HTML, but that may be even more verbose than using an HTML string.
Another option would be to use a template function like what lodash provides, which would make the HTML a lot cleaner.
The JS becomes:
pim.buildProducts = function(array) {
var tplHtml = document.getElementById('productsTpl').innerHTML;
var tpl = _.template(tplHtml);
return tpl({ products: array });
}
And you could put the template in your HTML file:
<script type="text/template" id="productsTpl">
<% products.forEach(function(item) { %>
<div class="product">
<div class="image">
<a href="<%= item.url %>">
<img src="<%= item.image %>" />
</a>
</div>
<div class="desc">
<h4><%= item.id %></h4>
<h5><%= item.description %></h5>
<div class="pim-icons">
<a class="cart" href="<%= item.url %>">
<span class="glyphicon glyphicon-shopping-cart"></span>
</a>
<% if (item.catalog) { %>
<a class="file" href="<%= item.catalog %>">
<span class="glyphicon glyphicon-file"></span>
</a>
<% } %>
</div>
</div>
</div>
<% }) %>
</script>
Take a look to document.createElement function and all others for DOM handling
When I run the function in the browser, "[object Object]" shows up instead of the text stored inside the variable $new_comment. I wish to append user inputs.
HTML :
<li class="list-group-item">"User comments"</li>
<div class="comments">
<ul class="list-group"></ul>
</div>
Js :
var addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append('<li class="list-group-item">' + ($new_comment) + '</li>');
$new_comment.fadeIn();
$(".input-group input").val("");
}
};
Everything runs fine when I change the code to:
$(".list-group").append($new_comment);
But I wish to style it with Bootstrap.
You can use it something like this $(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
Here this the full demo code
addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
$new_comment.fadeIn();
$(".input-group input").val("");
}
}
addCommentFromInputBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
<ul class="list-group">
</ul>
</div>
var listGroupItem = $('<li class="list-group-item"></li>').html($new_comment)
$(".list-group").append($listGroupItem);
I'm trying to insert <span class=""> value inside an array arrChairs[], and insert this array inside an object room{}, obviously I'm doing it in the wrong way, because it isn't working, here are the codes:
html:
<div id="table">
<a href="" id="foo1">
<span class="chair1"></span>
<span class="chair2"></span>
<span class="chair3"></span>
<span class="chair4"></span>
</a>
<a href="" id="foo2">
<span class="chair1"></span>
<span class="chair2"></span>
</a>
<a href="" id="foo3">
<span class="chair1"></span>
<span class="chair2"></span>
<span class="chair3"></span>
</a>
</div>
js:
room = {},
arrChairs = [];
$('#table a').each(function(i){
tableId = $('#table a:eq('+i+')').attr('id');
room[tableId] = {};
$('#table a:eq('+i+') span').each(function(i){
arrChairs.push( $(this).attr('class') );
});
room[tableId].chairs = arrChairs;
});
I don't know why it isn't working.
This is what arrChair is return me on console.log:
['chair1','chair2', 'chair3', 'chair4', 'chair1', 'chair2', 'chair1', 'chair2', 'chair3']
It's concatenating all the content. Some help would be appreciated
You are putting <span class=""> all together since you don't initialize arrChairs for each <a> in the root <div>. Try with this instead:
room = {};
$('#table a').each(function(i){
tableId = $('#table a:eq('+i+')').attr('id');
room[tableId] = {};
var arrChairs = [];
$('#table a:eq('+i+') span').each(function(i){
arrChairs.push( $(this).attr('class') );
});
room[tableId].chairs = arrChairs;
});
An make the console.log for the room instead of arrChairs.
Hope this helps
Got a problem with semantic-ui dropdown.
I've been using Semantic-Ui, and wanted to change the dropdown item dynamically.
That is, when i choose the value from the first dropdown, the second dropdown's item will change.
But the thing is, when the items are changed, the second dropdown cannot be chose,
the value won't change. The dropdown won't collapse back.
The HTML
The First Dropdown
<div id="programmetype" class="ui fluid selection dropdown">
<input type="hidden" name="programmetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="val1">Car</div>
<div class="item" data-value="val2">Tank</div>
<div class="item" data-value="val3">Plane</div>
</div>
</div>
Second Dropdown
<div id="servicetype" class="ui fluid selection dropdown">
<input type="hidden" name="servicetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="select">Choose..</div>
</div>
</div>
..........................
The jQuery
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Saloon</div>' +
'<div class="item" data-value="val2">Truck</div>'
);
};
if (val == "val2")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Abraham</div>' +
'<div class="item" data-value="val2">Leopard</div>' +
);
};
if (val == "val3")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Jet</div>' +
'<div class="item" data-value="val2">Bomber</div>' +
);
};
}
});
Found it,
I put $('#servicetype').dropdown();
after assigning the values:
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "fertility")
{
$('#servicetype').dropdown({'set value':'something'});
$('#servicetype .menu').html(
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-value="art">ART</div>'
);
$('#servicetype').dropdown();
};
});
A workaround approach:
function setDinamicOptions(selector, options) {
var att = "data-dinamic-opt";
$(selector).find('[' + att + ']').remove();
var html = $(selector + ' .menu').html();
for(key in options) {
html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
}
$(selector + ' .menu').html(html);
$(selector).dropdown();
}
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
if (val == "val2")
setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
if (val == "val3")
setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
}
});
Try this.
If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div
this is a demo
http://jsfiddle.net/BJyQ7/30/
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Another approach for setting dropdown content just in time (for example based on some dynamic criteria) is using the remoteApi, that is a particularly unfortunate name for the data binding features of the SemanticUI dropdowns.
Follow instructions here: http://semantic-ui.com/behaviors/api.html#mocking-responses