html code:
<div ng-controller="reviewsController as revCtrl ">
<div ng-repeat="review in revCtrl.proreviews>
<div ng-init="revCtrl.checklikereview(review)"> LIKE
<div ng-if="review.likestats" ng-href="#" ng-click="revCtrl.removelikereview(review._id)" class="glyphicon glyphicon-star ">
</div>
<div ng-if="!review.likestats" ng-href="#" ng-click="revCtrl.addlikereview(review._id)" class="glyphicon glyphicon-star-empty ">
</div>
<span ng-bind="review.numoflikes"></span>
</div>
<div ng-init="revCtrl.checkdislikereview(review)"> DISLIKE
<div ng-if="review.dislikestats" ng-href="#" ng-click="revCtrl.removedislikereview(review._id)" class="glyphicon glyphicon-star ">
</div>
<div ng-if="!review.dislikestats" ng-href="#" ng-click="revCtrl.adddislikereview(review._id)" class="glyphicon glyphicon-star-empty ">
</div>
<span ng-bind="review.numofdislikes"></span>
</div>
</div>
the problem occurring is that the user is able to do multiple clicks on the div which increases the likes/dislikes by 2 or more
how to disable this?
You can use two different div's one to validate and other to call function
in one div you can use like this
ng-if="review.likestats" ng-href="#"
and inside that div you can put other one to call function
ng-click="revCtrl.removelikereview(review._id)";
try this. I'm not sure if this will work with your code. Give it a try.
<a class="toggle" data-stats="like">Like</a>
<a class="toggle" data-stats="dislike">Like</a>
javascript
var toggle = getElementsByClassName('toggle'),
i;
function func(){
setInterval(function(){
var stat = this.dataset.stats;
if(stat == 'like')
// count + 1
else
// dislike count + 1
}, 3000);
}
for(i = 0; i < toggle.length; i++) toggle[i].addEventListener('click', func);
Related
Using puppeteer, I tried getting two objects in but failed.
My test code is like this
const btnUp = await page.$('div#ember322 > a:nth-child(0)');
const btnDown = await page.$('div#ember322 > a:nth-child(1)');
How can I solve this problem?
This is my example codes for the test.
<div id="ember322" class="ember-view">
<div class="order-btn-group">
<div class="order-value"><span>0.8</span></div>
<div class="row">
<div class="col-xs-6">
<a class="btn-order btn-down txt-left" data-ember-action="" data-ember-action-323="323">
<span class="btn-order-text">down</span>
<span class="btn-order-value txt-center">
<small>300</small>
</span>
<i class="btn-order-status"></i>
</a>
</div>
<div class="col-xs-6">
<a class="btn-order btn-up txt-right" data-ember-action="" data-ember-action-324="324">
<span class="btn-order-text">up</span>
<span class="btn-order-value txt-center">
<small>500</small>
</span>
<i class="btn-order-status"></i>
</a>
</div>
</div>
</div>
</div>
Try the selectors without the >. It would require the <a> elements to be direct children of the <div> (see for example W3Schools). Like so:
const btnUp = await page.$('div#ember322 a:nth-child(0)');
const btnDown = await page.$('div#ember322 a:nth-child(1)');
And, maybe instead of using nth-child, why not try the btn-up and btn-down classes?
This code is used to remove a cart-item from a partial view.
$(document).on('click', '.RemoveLink', (function (e) {
e.preventDefault();
var recordToDelete = $(this).attr("data-id");
var itemID = $(this).attr("data-itemid");
if (recordToDelete != '') {
$.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete, "itemID": itemID },
function () {
$('.container-cart').load('#Url.Action("cartDropDown","ShoppingCart")', function () {
$('.cart-dropdown').css('display', 'inline-block');
}
);
});
}
}));
This works well for the first iteration but from the second iteration on-wards, every click of a remove of an item is resulting in deletion of 2 items of a kind. Suppose we had 4 items of pencils and 8 items of pens. Clicking delete pencil button once will result in deletion of 2 pencils and vice versa.
This is probably because of the logic used. Following is the html that is rendered when $('.container-cart').load('#Url.Action("cartDropDown","ShoppingCart")' executes:
#model OnlineStore.ViewModels.ShoppingCartViewModel
<div class="container-cart">
#if (Model.ItemCount == 0)
{
<div>
<span>
There are no items in your cart. Continue shopping.
</span>
</div>
}
else
{
<ul class="cart-dropdown">
<li>
<div class="cart-items cart-caption">
<ul>
#foreach (var i in Model.CartItems)
{
<li id="list-item-#i.item.ItemID">
<div class="container-fluid item-wrap" style="position: relative">
<div class="item-remove">
<a href="#" class="RemoveLink"
data-id="#i.RecordID" data-itemid="#i.item.ItemID">
x
</a>
</div>
<div class="col-md-2 item-img">
<div class="row-cart">
<img alt="" id="cartImg" height="71" width="75" src="#i.item.ImageUrl">
</div>
</div>
<div class="col-md-5 item-info">
<div class="row-cart">
<div class="brand-name">
<a href="#" class="brandName">
#i.item.BrandName
</a>
</div>
<div class="product-name">
<a href="#" class="productName">
#i.item.ItemName
</a>
</div>
<div class="product-qty">
<p class="productQTY" id="item-count-#i.item.ItemID">
#i.Count x #i.item.ItemPrice
</p>
</div>
</div>
</div>
<div class="col-md-5 price-info">
<div class="row-cart" style="margin-top: 10px">
<div class="col-md-6">
<div class="row-mrp">
<span class="cartItemPrice" id="item-total-#i.item.ItemID">
Rs #(#i.Count * #i.item.ItemPrice)
</span>
</div>
</div>
</div>
</div>
</div>
</li>
}
</ul>
</div>
</li>
<li class="clearfix">
<div class="col-md-6">
<div class="row-cart sub-cost" style="background: #fff; margin-left: -10px; margin-right: 0">
<p>
Sub Total :
<span style="float: right">
Rs
<span class="ng-binding"></span>
</span>
</p>
<p>
Delivery Charge :
<span qa="delChargeMB" style="float: right">Free</span>
</p>
</div>
<div class="row-cart cart-chkout-btn">
<button type="button">View Basket & Checkout</button>
</div>
</div>
</li>
</ul>
}
</div>
This html is the partial view that is initially rendered when user clicks a button to view the cart-items. So when user clicks on 'remove an item' button on this partial view, an ajax call is sent to server to remove an item from the cart-items and on success, load the UI again by rendering this partial view once again with new values from the database.
All this is working fine for the first iteration of the deletion of an item from the cart-item list. But when I'm deleting an item again as a second deletion, code is running twice. I'm guessing this is because <div class="container-cart"> is rendered twice on the page as after the first deletion, I can see it on the live DOM inside the browser that <div class="container-cart"> is encolsed inside another <div class="container-cart"> and then the normal elements are rendered in sequence. I'm guessing maybe that's why javaScript is rendered twice or running twice.
Please suggest what you think about it and help me resolve it.
Thanks in advance
After deletion of an item try to use location.reload(); instead of hitting the MVC action method again!
I making a shopping cart website. I need to set up a delete button per product and I want to call the same delete function with this every time. Can you help me understand what I did wrong? excuse me for not using proper terminology as I am new to coding.
This is my function to delete products:
function myFunction(element){
var element = document.getElementById("remove");
element.parentElement.parentElement.remove();
}
///
this is a snippet of my code for a product row.
<div class="row product">
<div class="buttons">
<i class="fas fa-heart" onclick="myHeart(this)"></i>
<i class="fas fa-times" id="remove" onclick="myFunction(this.element)"></i>
</div>
</div>
I need the specific product row to be deleted every time I click on the delete icon.
Change the ID to a class, so it can be reused
<div class="row product">
<div class="buttons">
<i class="fas fa-heart"></i>
<i class="fas fa-times remove"></i>
</div>
</div>
Add event handlers for those elements
var elems = document.querySelectorAll('.remove');
for (i = 0; i < elems.length; ++i) {
elems[i].addEventListener('click', function() {
this.closest('.product').remove();
});
}
You need to put this as parameter, not this.element:
<div class="row product">
<div class="buttons">
<i class="fas fa-heart" onclick="myHeart(this)"></i>
<i class="fas fa-times" id="remove" onclick="myFunction(this)"></i>
</div>
</div>
and for your function myFunction(). You don't need to search for element using document.geElementById() because you already have it as a parameter. Here is an update of your function:
function myFunction(element){
element.parentElement.parentElement.remove();
}
Close button which remove the elements from DOM, work only on the second click.
Here is HTML part of button: That is closeBtn.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
closeBtn
</div>
</div>
</div>
</div>
You should use list.childNodes[1] because the list.childNodes[0] represent the #text node that is the whitespaces after <div id="main">. So, in first click it was removing that node and in second click it was removing the actual node with <div class="nanoSaturnBanner">
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[1]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close">close</i>
</div>
</div>
</div>
Note: Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.
As childNodes get none element nodes as well, like text and comment, use e.g. children instead to get the first actual element.
Note, with that you also make sure getting the element no matter how many "none element nodes" their might be in your markup.
Stack snippet
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.children[0]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close">close</i>
</div>
</div>
</div>
function removeHeader() {
var list = document.getElementById("main");
list.remove(list.childNodes[0]); // replacing removeChild with remove worked
}
Check the fiddle.
I've got six divs that act as buttons. When clicked, one of the spans in a different div (and class) is displayed, and others are hidden.
Buttons:
<div class="menu">
<div class="menubutton">
Menu1
</div>
.
.
.
<div class="menubutton">
Menu6
</div>
</div>
Info shown based on clicked button:
<div class="information">
<span class="information1"> Info1 </span>
...
<span class="information6"> Info6 </span>
</div>
How do I know which one called the function, so I can know which span to make visible?
Provided your markup is this way:
<div class="menu">
<div class="menubutton">
Menu1
</div>
<div class="menubutton">
Menu2
</div>
<div class="menubutton">
Menu3
</div>
<div class="menubutton">
Menu4
</div>
<div class="menubutton">
Menu5
</div>
<div class="menubutton">
Menu6
</div>
</div>
<div class="information">
<span class="information1"> information1 </span>
<span class="information2"> information2 </span>
<span class="information3"> information3 </span>
<span class="information4"> information4 </span>
<span class="information5"> information5 </span>
<span class="information6"> information6 </span>
</div>
You can do this:
$('.menubutton').click(function(){
var index = $('.menubutton').index(this); //get the index of the menubutton clicked
$('.information > span').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});
Demo
with this you can safely remove the class with index like information1, information2 etc instead you can add a common class say content
<div class="information">
<span class="content"> information1 </span>
<span class="content"> information2 </span>
<span class="content"> information3 </span>
<span class="content"> information4 </span>
<span class="content"> information5 </span>
<span class="content"> information6 </span>
</div>
and change it to:
$('.menubutton').click(function(){
var index = $('.menubutton').index(this); //get the index of the menubutton clicked
$('.information > .content').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});
Since you can't have ID's, we can get the index of the clicked menu item, add 1, then find the corresponding information span to show:
$(".menubutton").click(function() {
var menuIndex = $(this).index() + 1;
$(".information" + menuIndex).show();
});
The this keyword inside a function refers to the element that called the function.
Add the #id for each menubutton, so:
<div class="menubutton" id="btn_1"></div>
then:
$(".menubutton").on("click", function() {
// Get the id of button clicked.
var id = $(this).attr("id").split("_")[1];
// Target SPAN with the same id.
$("SPAN.information" + id).show();
});