HTML
<div class="col-sm-1">
<a class="a" ng-click="aa()">
<span name="yesLink"></span>
</a>
</div>
<div class="col-sm-1">
<a class="a" ng-click="bb()">
<span name="NoLink"></span>
</a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
<p ng-show="yes"> Text for yes</P>
<p ng-show="no"> Text for no</P>
</div>
JS
yesLink.onclick()=function()
{
scope.yes=true;
}
noLink.onclick()=function()
{
scope.no=true;
}
I have used the above code.I want to display message according to click.But it is not working. What is wrong with this code?
If yesLink is clicked, "Text for yes" should come and if NoLink is clicked ,"Text for no" should come.
I think, there is no need to add onclick method. just do this
<div class="col-sm-1">
<a class="a" ng-click="yes=true">
<span name="yesLink"></span>
</a>
</div>
<div class="col-sm-1">
<a class="a" ng-click="yes=false;">
<span name="NoLink"></span>
</a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
<p ng-show="yes"> Text for yes</P>
<p ng-hide="yes"> Text for no</P>
</div>
I see Angular is being used in the above code so the HTML part will be
your controller part should be something like
Considering bb() and aa() as a click function
$scope.bb = function(){
$scope.yes = true;
}
$scope.aa = function(){
$scope.no = true;
}
The value you are checking against is a boolean but the value you are assigning to the variable is a string. You have two options>
OPTION 1:
Tell the ng-hide/show value to look for the string value,
ng-show="yes === 'true'".
OPTION 2:
In your function swap out the strings for boolean values,
scope.yes = true and NOT scope.yes="true"
No need for jquery, you can use ng-click, ng-click triggers the function in controler
<div class="col-sm-1">
<a class="a" ng-click="aa()">
<span name="yesLink"></span>
</a>
</div>
<div class="col-sm-1">
<a class="a" ng-click="bb()">
<span name="NoLink"></span>
</a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
<p ng-show="yes"> Text for yes</P>
<p ng-show="no"> Text for no</P>
</div>
JS
scope.aa() = function(){
scope.yes = true;
}
scope.bb() = function(){
scope.no = true;
}
Related
I have multiple div's that represent some products, example below :
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta!</span>
</span>
Ofertas especiales
<span class="special-price">200,00 €</span>
<del style="margin-top: -9px;">250,00 €</del>
+ Add to cart
</p>
</div>
Troubles getting the ID (so the value) of some elements inside this division (div id="special") :
i want for example to get the ID of <span id="pdctName"> and <span class="special-price">.
The element that triggers my function is
+ Add to cart.
i tried document.querySelector('#special span#pdctName').innerText, it works only for the first occurence of this div, but i want to retrieve those elements for the selected division.
Yes getElementById always give you first element. You have to find element using this object
Example is as follow
var buttons=document.getElementsByClassName("js-cd-add-to-cart");
[].slice.call(buttons).forEach(x=>{
x.addEventListener('click',function(obj){
console.log(this.closest("#special").innerText);
return false;
})
})
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12x XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales1
<span class="special-price">300,00 €</span>
<del style="margin-top: -9px;">450,00 €</del>
+ Add to cart
</p>
</div>
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales
<span class="special-price">600,00 €</span>
<del style="margin-top: -9px;">150,00 €</del>
+ Add to cart
</p>
</div>
First, you have to attach event on every add(+) button
Then call parent div element using this.parentElement.parentElement
Then get values using querySelector
function addtocart(){
event.preventDefault();
var spanid = this.parentElement.parentElement.querySelector("a h3 span").id;
var price = this.parentElement.parentElement.querySelectorAll("p span")[2].innerText;
console.log(spanid);
console.log(price);
}
[...document.querySelectorAll(".special-add")].forEach((btn)=>{
btn.addEventListener("click",addtocart);
});
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta!</span>
</span>
Ofertas especiales
<span class="special-price">200,00 €</span>
<del style="margin-top: -9px;">250,00 €</del>
+ Add to cart
</p>
</div>
This is best practice when data is dynamically added to pages.
I have a couple suggestions on how you could improve the structure of your special elements.
Data
If you want to extract data from a HTML element, and you have multiple pieces of data to extract, then consider using a form with input type="hidden" elements in there. They will not be visible to the user and can hold information that will be easy for you to use.
In combination with the FormData API you can access all of the input values in your form and add them to your cart if you need to.
If you do use the form element than change the <a class="special-add.. link to a button. I doesn't link anywhere anyway, so it probably should be a button.
IDs
It seems that you have multiple id attributes with the same values on your page, assuming you have more than one special. If that is the case, remove them or make them totally unique.
It's also the reason why getElementById doesn't work properly. It always finds the first element with the matching id.
Check the example below. If you have any questions please let me know.
function addSpecialToCart(event) {
/**
* Get all the inputs in the form.
*/
const formData = new FormData(event.target);
/**
* Show all data in the current form.
* Loop over the items in formData and
* show the name and value of each input.
*/
for (const [ name, value ] of formData) {
console.log(name, value);
}
/**
* Or get a single value by the name of the input.
*/
const productName = formData.get('product-name');
console.log(productName);
event.preventDefault();
};
document.addEventListener('submit', addSpecialToCart);
<div class="special">
<form class="special-form">
<input type="hidden" name="product-name" value="Product 1"/>
<input type="hidden" name="product-category" value="Ofertas especiales1"/>
<input type="hidden" name="special-price" value="150"/>
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span class="pdctName">Product 1</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales1
<span class="special-price">150,00 €</span>
<del style="margin-top: -9px;">250,00 €</del>
<button type="submit" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</button>
</p>
</form>
</div>
<div class="special">
<form class="special-form">
<input type="hidden" name="product-name" value="Product 2"/>
<input type="hidden" name="product-category" value="Ofertas especiales2"/>
<input type="hidden" name="special-price" value="300"/>
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span class="pdctName">Product 2</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales2
<span class="special-price">300,00 €</span>
<del style="margin-top: -9px;">450,00 €</del>
<button type="submit" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</button>
</p>
</form>
</div>
<div class="special">
<form class="special-form">
<input type="hidden" name="product-name" value="Product 3"/>
<input type="hidden" name="product-category" value="Ofertas especiales3"/>
<input type="hidden" name="special-price" value="1200"/>
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span class="pdctName">Product 3</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales3
<span class="special-price">1200,00 €</span>
<del style="margin-top: -9px;">1450,00 €</del>
<button type="submit" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</button>
</p>
</form>
</div>
Here is my code:
var itemCount = 0;
var addTo = "";
$(".add").click(function(){
alert($(this).attr('id'));
var itemClicked = $(this).attr('id');
var a = parseInt(itemClicked);
alert($(".price").find('#' + a).text());
itemCount = itemCount + 1;
});
and
<div class="col-sm-5 col-md-4 col-sm-2">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3 class="item-header" id="1">iPhone</h3>
<p>...</p>
<p class="hidden" id="1">1</p>
<p class="price" id="1">19.95</p>
<p><button class="btn btn-primary add" role="button" id="1">Add to cart</button> More</p>
</div>
</div>
</div>
What I want to do is write a function takes figures out which button triggered the function, and retrieves the according price to the button. In this case I pressed 1, and I want the price according to Item 1.
When I perform alert(a); then I retrieve the number of 1. So I suppose something is wrong with the following line, just cant figure out what...
alert($(".price").find('#' + a).text());
Maybe you should add a data-price attribute (or something to reference to your actual data). I don't think it's a good practice to be dependant on the value of some paragraph tags. Better is to have a separation of display data and internal data.
You can access the data-price like this:
$('.button').click(function(e) {
console.log(e.target.getAttribute('data-price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Shop</h1>
<p>iPhone 7</p>
<p>price € 110</p>
<button data-price="110" class="button">Add</button>
You don't need id:
$("button.add").click(function(){
var $card = $(this).parents("div.caption");
alert("adding good id:"+$card.children("input.good-id").val() + " with price: " + $card.children("p.price").text());
/* note - don't send price to backend,
it can be easily corrected in browser before click,
send only id of the good, and get price from DB */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-4 col-sm-2">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3 class="item-header">iPhone</h3>
<p>...</p>
<input type="hidden" class="good-id" name="goodId" value="1">
<p class="price">19.95</p>
<p><button class="btn btn-primary add" role="button">Add to cart</button> More</p>
</div>
</div>
</div>
I updated your html markup to use data attributes. In that way it will be easier for you to select the needed prices of certain items:
<p class="hidden" data-item="1">1</p>
<p class="price" data-price="1">19.95</p>
Demo:
$('.add').on('click', function() {
var itemId = $(this).attr('id');
var itemPrice = $('.price[data-price="'+ itemId +'"]').text();
alert(itemPrice);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-4 col-sm-2">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3 class="item-header" id="1">iPhone</h3>
<p>...</p>
<p class="hidden" data-item="1">1</p>
<p class="price" data-price="1">19.95</p>
<p>
<button class="btn btn-primary add" role="button" id="1">Add to cart</button> More</p>
</div>
</div>
</div>
I have a disclaimer div that I want to show when a certain menu item is clicked. I have my Jquery correctly showing my hidden divs with this script:
$(function(){
var $allItems = $(".food-container > div");
$(document.body).on("click", "a.menu-item", function () {
var id = this.id, itemId = ".food-container > #item-" + id;
$allItems.not($(itemId).fadeToggle()).hide();
});
});
I am using Advanced Custom Fields Repeater Field, so I need to hide the field out of the Repeater loop. The menu id that I have is "4". So I just need to connect the disclaimer div which is "burger-disclaimer" to the #4 click event.
Here is the menu: https://jsfiddle.net/42gqu9r9/
This should put you on the right path. I am grabbing the ID of the click event (evt variable), to see what was selected.
HTML:
<a id="1" href="javascript:void(0)" class="menu-item">Appetizers<i class="fa fa-caret-right"></i></a>
<a id="2" href="javascript:void(0)" class="menu-item">Tex-Mex<i class="fa fa-caret-right"></i></a>
<a id="3" href="javascript:void(0)" class="menu-item">Salads<i class="fa fa-caret-right"></i></a>
<a id="4" href="javascript:void(0)" class="menu-item">Burgers<i class="fa fa-caret-right"></i></a>
<div class="food-container">
<div id="item-1" style="display: none;">
<div class="food">
<h3>Mac N Cheese Bites</h3> Breaded, then fried macaroni, stuffed with cheese</div>
<div class="price"> $8 </div>
</div>
<div id="item-2" style="display: none;">
<div class="food">
<h3>Salads</h3> Salads
</div>
<div class="price"> $8 </div>
</div>
<div id="item-3" style="display: none;">
<div class="food">
<h3>Tex-Mex</h3> Tex-Mex
</div>
<div class="price"> $8 </div>
</div>
<div id="item-4" style="display: none;">
<div class="food">
<h3>Burgers</h3> Burger
</div>
<div class="price"> $8 </div>
</div>
</div>
<div class="burger-disclaimer">
*All sandwiches and burgers are served with fries or potato chips. Side salad and onion rings available as side, add $2 upcharge
</div>
JS:
$(function() {
var $allItems = $(".food-container > div");
$(document.body).on("click", "a.menu-item", function(evt) {
var id = this.id,
itemId = ".food-container > #item-" + id;
$allItems.not($(itemId).fadeToggle()).hide();
if (evt.target.id == 4) {
$('.burger-disclaimer').toggle();
} else {
$('.burger-disclaimer').hide();
}
});
});
And your updated JS Fiddle: https://jsfiddle.net/6y0ymao8/
I have this code wherein I want it only to run when clicked. However, the problem is that the scriptlet notificationDAO.read() is always running whether or not the button is clicked.
Html:
<div style="word-wrap: break-word;">
<li>
<a onclick="read();">
<span class="message" style="color: gray;">
</span>
<span class="subject">
<span class="time" style="color: gray;">
Mark All as Read
</span>
</span>
</a>
</li>
</div>
Javascript:
function read() {
<%
notificationDAO.read(((User)session.getAttribute("user")).getEmployeeID());
%>
}
What I am trying to achieve is to get all products name from page its position and than store it in an array which than I can use in next part of the code. Here is that I have done so far
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var i = 1;
$(".product-name").each(function() {
var pnameforostock = $(this).text();
var positionp = i++;
alert(pnameforostock);
});
});
</script>
<body>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name"></a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426">
199,- </span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426">
Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('http://www.google.com/')"><span><span>Buy</span></span></button>
</div>
</li>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name"></a>
<h2 class="product-name">Sample Product Name 2</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426">
199,- </span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426">
Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span></button>
</div>
</li>
</body>
</html>
From the above jquery code I am able to get the product names but not able to place them in array so that it will look something like this
name: product1, name: product2
I tried a lot to get some results in array but no success. Please advise.
You would want an array of objects (JS doesn't have associative arrays)
var products = $(".product-name a").map(function() {
return { name: $(this).text() }
}).get();
.map reference: http://api.jquery.com/jquery.map/