I have some tabs' info rendered with handlebars and here is my HTML:
<ul class="nav nav-tabs" id="tabsId">
<script id="tabs-template" type="text/x-handlebars-template">
{{#each Tabs}}
<li data-tab-content={{Id}}>{{Name}}</li>
{{/each}}
</script>
</ul>
<div id="tabsContentId">
<script id="tabs-content-template" type="text/x-handlebars-template">
{{#each Tabs}}
<div class="tab-content" data-tab-content="{{Id}}">{{Content}}</div>
{{/each}}
</script>
</div>
And now I'm writing a function that will fill my future form when I double click on any tab. I've only managed how to get id and I don't understand how to get name and content values. I've tried to use jQuery .text() function, but I've failed. Here is my function:
$(function() {
$("#tabsId").on("dblclick", "li", function(evt) {
evt.preventDefault();
var id = $(this).data("tabContent");
//var name = ?
//var content = ?
$('#inputIndex').val(id);
//$('#inputTitle').val(name);
//$('#textareaContent').val(content);
});
});
var id = $(this).data("tab-content");
var name = $(this).text();
// Get the content from the nth element in the other list (using the index of the LI clicked)
var content = $('#tabs-content-template .tab-content').eq($(this).index()).text();
Note: this only works as the same collection is used for both the LIs and the tab DIVs. Otherwise you will need to find it via the data-tab-content attribute.
Use $(this).text() then you can get the name in the dbclicked li.
Use $('#tabsContentId div[data-tab-content="' + id + '"]'); so you can get the target div which has an attribute data-tab-content and value is the id you previously retrieved.
$(function() {
$("#tabsId").on("dblclick", "li", function(evt) {
evt.preventDefault();
var id = $(this).data("tabContent");
var name = $(this).text();
alert("Name is :" + name);
var targetDiv = $('div.tab-content[data-tab-content="' + id + '"]');
var content = targetDiv.text();
alert("Content is :" +content);
$('#inputIndex').val(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="tabsId">
<li data-tab-content="t1">I'm Name</li>
</ul>
<div id="tabsContentId">
<div class="tab-content" data-tab-content="t1">Here's content</div>
</div>
Not exactly sure what you're after, but this would get the inner HTML of the first <a> element with href="#" inside the clicked element:
var name = $(this).find('a[href="#"]').first().html();
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');
});
Okay I am trying to simply create a dynamic list that generates the same drop down menu using JQuery or Javascript.
<ul id="main-list">
<li value="a" class="dd-list-item"> A </li>
<li value="b" class="dd-list-item"> B </li>
<li value="c" class="dd-list-item"> C </li>
</ul>
<ul class="list-menu">
<li>Rename </li>
<li>Delete</li>
</ul>
<form>
<input type="text" id="text-input" placeholder="New item"/>
<input type="button" id="btn" value="Add New"/>
</form>
Above is a chunk of the HTML code. Now below is the JQuery code to implement adding the new item to the list.
$(function(){
let list= $('#main-list');
let button = $('#btn');
button.on('click', function(){
let value = $('#text-input').val();
list.append("<li class='dd-list-item'>" + value + "</li>");
});
$('.list-menu').clone().appendTo('.dd-list-item');
});
This is the closest I have gotten thus far to dynamically add new list item, but I haven't been successful with creating a drop down with the same options for the listed items. Any ideas how to effectively go about it?
You have an issue with your quotes. The quotes in the HTML snippet are not being replaced.
Instead of
list.append("<li class="dd-list-item">" + value + "</li>");
Use
list.append('<li class="dd-list-item">' + value + "</li>");
(With fiddle https://jsfiddle.net/o2gxgz9r/9401/)
like this :
https://www.w3schools.com/code/tryit.asp?filename=FH6GZAFJOEHS
Script :
$(document).ready(function(){
let list= $('#main-list');
let button = $('#btn');
button.on('click', function(){
let value = $('#text-input').val();
list.append("<li class='dd-list-item'>" + value + "</li>");
});
button.on('click', function(){
let value = $('#text-input').val();
$(".list-menu").append("<li>" + value + "</li>");
});
});
I have this list with divs and a dropdown menu. The list with divs and the dropdown menu divs have the same data attribute (data-num). When a div in the dropdown menu is clicked I want to show the div with the same data attribute and hide the others. I tried something like this but it's only giving me the first div from the list:
$('#chooseAnnexDropdown ul li').each(function(){
var that = $(this);
var sibs = $(this).siblings();
var thisAttr = $(this).attr('data-num');
var thisParent = $(this).parent().parent().parent().parent();
var theProducts = thisParent.find('.theProduct');
var theProductsAttr = $(theProducts).attr('data-num');
console.log(theProductsAttr);
that.click(function(){
if ( thisAttr === theProductsAttr ) {
// show the product div with the correct attribute and hide the others
}
});
});
So how do i loop through each element in my dropdown and then compare it to my other list and show the correct div?
Here is some of the HTML code:
<div id="configurator">
<!-- dropdown menu -->
<div id="chooseAnnexDropdown" class="confDropdown">
<ul>
<li class="block_2" data-num="block_2">Atelier</li>
<li class="block_3" data-num="block_3">Bryggerhus</li>
<li class="block_4" data-num="block_4">Smørebod</li>
<li class="block_5" data-num="block_5">Bakstehus</li>
<li class="block_6" data-num="block_6">Sportsrom</li>
<li class="block_7" data-num="block_7">Boenhet</li>
<li class="block_8" data-num="block_8">Ingen</li>
</ul>
</div>
<!-- end dropdown menu -->
{% for i in 1..39 %}
{% for block in entry['hyttekonf' ~i] %}
<div class="theProduct" data-num="block_{{ i }}" id="block_{{ i }}">
<div class="conf-image absolutecenter">
{% set image = block.bilde.first() %}
<img src="{{ image.getUrl('plantegningKonfigurator') }}" alt="{{ image.title }}" />
</div>
</div>
{% endfor %}
{% endfor %}
</div>
I guess you are looking for this.
$('#chooseAnnexDropdown ul li').click(function(){
var thisParent = $(this).parent().parent().parent().parent();
thisParent.find('.theProduct[data-num=' + $(this).attr('data-num') + ']').show().siblings().hide();
});
I'm guessing at your HTML structure, but based on what it looks like you are doing, you can add your click handler to all the "li" elements and in that handler, just find the matching item to show and then hide it's siblings.
$('#chooseAnnexDropdown ul li').click(function(){
var dataNum = $(this).attr('data-num');
//this could be done in a better way
var thisParent = $(this).parent().parent().parent().parent();
thisParent.find('.theProduct[data-num=' + dataNum + ']').show().siblings().hide();
});
Seeing your actual HTML would help though.
You can modify your JS code as follows:
Here we are hiding all the div on document ready and then on click of li we are grabbing its data-num and then finding the associated div to show it.
$(document).ready(function() {
$(".theProduct").hide(); //hide all div first
$('#chooseAnnexDropdown ul li').click(function() {
var thisAttr = $(this).attr('data-num');
$(".theProduct").hide(); //hide all div first
$("div[data-num='" + thisAttr + "']").show(); //show the matching div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- dropdown menu -->
<div id="chooseAnnexDropdown" class="confDropdown">
<ul>
<li class="block_2" data-num="block_2">Atelier</li>
<li class="block_3" data-num="block_3">Bryggerhus</li>
<li class="block_4" data-num="block_4">Smørebod</li>
<li class="block_5" data-num="block_5">Bakstehus</li>
<li class="block_6" data-num="block_6">Sportsrom</li>
<li class="block_7" data-num="block_7">Boenhet</li>
<li class="block_8" data-num="block_8">Ingen</li>
</ul>
</div>
<!-- end dropdown menu -->
<div class="theProduct" data-num="block_2" id="block_2">Atediver</div>
<div class="theProduct" data-num="block_3" id="block_3 ">Bryggerhus</div>
<div class="theProduct " data-num="block_4" id="block_4">Smørebod</div>
<div class="theProduct " data-num="block_5" id="block_5">Bakstehus</div>
<div class="theProduct " data-num="block_6" id="block_6">Sportsrom</div>
<div class="theProduct " data-num="block_7" id="block_7">Boenhet</div>
<div class="theProduct " data-num="block_8" id="block_8">Ingen</div>
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 have a list which is being loaded from a php file I am trying to get text inside this list. When i click this list, the console gives me a referenceError. I am going to show just HTML code with comments where data is added from php.
<div data-demo-html="true">
<ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true" id="courselist">
<!-- Data below loaded from PHP-->
<li id="clist">
<a href="#page">
<h2> text loaded here </h2>
</a>
</li>
</ul>
<!-- Data loading finished from PHP -->
</div>
<script>
$(function(){
var desc;
$('body').on('click','clist',function(){
desc = $(this).text();
console.log(desc);
});
});
</script>
Your selector is wrong as clist is id of li element, so use '#clist' instead of 'clist':
<script>
$(function(){
var desc;
$('body').on('click','#clist',function(){
desc = $(this).text();
console.log(desc);
});
});
</script>
See jQuery Selector API for more information
You missed id # selector
HTML <li id="clist">
$('body').on('click','#clist',function(){
^^^^^
desc = $(this).text();
console.log(desc);
});
Read Jquery Selector