Well, I have a problem when creating fields for data editing. The problem is that when editing, all fields with the product name are activated instead of one specific. I know the problem is because I only have one variable responsible for enabling the edit box, but creating more variables will not solve the problem because then there may be thousands of such records.
HTML:
<ul>
<li v-for="product in products" class="single-product" v-bind:key="product.id_product">
<i style="color:#df4a49;padding:5px;" class="fa-solid fa-xmark fa-xl" #click="deleteProduct(product.id_product)"></i>
<p class="product-name"><i #click="enableEditing(product.name)" class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>
<span v-if="!editing">{{product.name}}</span> <span v-if="editing"> <input v-model="tempValue" class="input"/>
<button #click="disableEditing"> Edit</button>
<button #click="saveEdit"> Save</button>
</span>
</p>
<span class="product-localization"><span><i class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>Lokalizacja: </span>{{produkt.lokalizacja}}</span> <span class="product-key"><span><i class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>Klucz: </span>{{product.key}}</span>
<hr />
</li>
</ul>
Data:
editing:false,
tempValue: null,
methods:
enableEditing: function(tempProductName){
this.tempValue = tempProductName;
this.editing=true;
},
disableEditing: function(){
this.tempValue = null;
this.editing = false;
},
saveEdit: function(){
this.value = this.tempValue;
this.disableEditing();
}
Related
I'm trying to develop multi pages e-commerce website...and when click cart div I want to store 'productId' in localstorage and redirect to product detail page but when transfering to product-details page,productId lost from localstorage...so I can't access productId in details page...I want locaclstorage keep "productId" when redirect to product details page
let produtDb = document.querySelectorAll(".row3");
let producttss = JSON.parse(localStorage.getItem("Products"));
producttss.forEach(function (product) {
produtDb.forEach(function (re) {
re.innerHTML += `
<div class="pro hi " data-filter =${product.category} item-filter =${product.filter}>
<div class="info">
<div class="cart" onclick="shoppingCart(${product.id})">
<i class="fas fa-shopping-cart"></i> Add to Cart</div>
<div class="show" onclick="saveData(${product.id})" >Show Details</div>
</div>
<div class="prod"> </div>
<img src="${product.imgSrc}">
<p class="name">${product.name}</p>
<span class="price">${product.price} $</span><span class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></span>
</div>
`
});
});
function saveData(id) {
localStorage.setItem("productId", id);
window.location.href = 'Product-descriptions.html'
}
In the product - details page:
localStorage.getItem("productId");
I have a list of images and I want to be changed when I hover on it and then change back to the previous image on mouse leave. and each image is different. I have done it but it's not the right way of doing it. and I couldn't figure out the right way.
//html code: its actually long list but I'm just showing two of the list//
<li>
<div class="card">
<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans"onmouseover="hover1()" onmouseout="offhover1()">
<h1>Lorem1</h1>
<span class="price-first">$24.99</span>
<span class="price">$17.99</span>
<br>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<p>Lorem ipsum dolor sit amet..</p>
<button class="add-to">Add to Cart</button>
</div>
</li>
<li>
<div class="card">
<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans" onmouseover="hover2()" onmouseout="offhover3()">
<h1>Lorem2</h1>
<span class="price-first">$24.99</span>
<span class="price">$14.99</span>
<br>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<p>Lorem ipsum dolor sit amet..</p>
<button class="add-to">Add to Cart</button>
</div>
</li>
//javascript code//
function hover1() {
document.getElementById("my-img1").src = "./images/AMH010301_G-5-dresslink.jpg";
}
function offhover1() {
document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";
}
function hover2() {
document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg";
}
function offhover2() {
document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";
}
function hover3() {
document.getElementById("my-img3").src = "./images/AMH011122_W-3-dresslink.jpg";
}
function offhover3() {
document.getElementById("my-img3").src = "./images/AMH011122_W-1-dresslink.jpg";
}
function hover4() {
document.getElementById("my-img4").src = "./images/AMH011200_W-3-dresslink.jpg";
}
function offhover4() {
document.getElementById("my-img4").src = "./images/AMH011200_W-2-dresslink.jpg";
}
Although what you've done works fine, the code looks a bit messier. The solution for a clean, well-organized code would be like this. First, you should consider that you can use a single javascript function to handle all 8 events since they belong to a related logical group. for example, you should have used a javascript function and use the e event param to identify the event triggered and then use a switch or any other suitable control structure to handle the events from different UI elements.
NOTE: another approach that I would recommend is using jquery library. Because it is optimized for this type of things.
Here's how I would do something like this with event listeners and a really simple swapping function. You could also do this with CSS which may be optimal depending on your case.
window.onload = function bindEvents(){
var img1 = document.querySelector('#my-img1');
img1.addEventListener('mouseover', function(){swapImage(img1, "./images/AMH010301_G-5-dresslink.jpg")});
img1.addEventListener('mouseout', function(){swapImage(img1, "./images/AMH010301_G-1-dresslink.jpg")});
}
function swapImage(el, elImg) {
el.src = elImg;
}
I wrote a script where I add items to individual sections on the page. I will show you this by the example of one particular section. The problem appears with the c-grid-box, which is responsible for the fadeOut of the parent div. The anonymous function responsible for this action must be called outside of the diva addition function (otherwise I would have to add a function to each call that misses the target). For this I wrote something like this, although it still does not work - what could be the reason here?
function showModal(type) {
switch(type) {
case "title":
$(".overlay").fadeIn("slow");
$("#modal-inputs").html('<input type="text" placeholder="Title..." class="param-title" name="param-title" /><input type="text" placeholder="Description..." class="param-description" name="param-description" /><input type="submit" class="add-btn" id="insert-title" value="Insert" />');
break;
}
}
$("#add-text").on("click", function() {
showModal("title");
$("#insert-title").on("click", function() {
title = $(".param-title").val();
description = $(".param-description").val();
$('#section-title').append('<div class="grid-1-5"><div class="grid_box">Delete</i><p class="grid-box-title">'+title+'</p><p>'+description+'</p></div></div>');
$(".overlay").fadeOut("slow");
});
});
$(".grid_box").on("click", ".c-grid-box", function() {
alert("foo bar");
});
.overlay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-text">
<i class="fa fa-align-justify" aria-hidden="true"></i>
<p>Add <i class="fa fa-angle-right" aria-hidden="true"></i></p>
</button>
<section class="add-box" id="section-title">
</section>
<div class="overlay">
<div class="modal-box">
<p class="modal-title"><i class="fa fa-cogs" aria-hidden="true"></i>Settings
<i class="fa fa-times" aria-hidden="true"></i>
</p>
<div id="modal-inputs">
</div>
</div>
</div>
I have a tree structure that contains a folder as parent and files as children, but the same folder can also contain another folder as a child. At the first time the only visible items are the folders that can be clicked to see their files.
My problem is that when I click on the parent folder the child folder gets expanded too and I want to only see the files of the clicked folder.
For example (JSFIDDLE) when I click on parent folder I don't want the child folder to be also expanded until I click on it.
This is my code (the code structure must not be changed):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
<div class="folder-group">
<span class="folder-title" ng-click="openFolder=!openFolder">
<i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
folder parent
</span>
<ul ng-show="openFolder">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
<li class="children-folder">
<span class="folder-title" ng-click="openFolder=!openFolder">
<i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
folder children
</span>
<ul ng-show="openFolder">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
</ul>
</li>
</ul>
</div>
</div>
This is the original template:
<span class="folder-title" ng-click="get_menu_items(folder); openFolder =! openFolder;">
<i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
{{ folder.name }}
</span>
<ul ng-show="openFolder">
<li class="item" ng-repeat="file in folder.files">
<label>
<input class='file-list-item' type="checkbox" name="file_map[]" value="{{ file.id }}" ng-model="file_map[file.id]" ng-click="update_selection($event)" />
<i class="fa fa-file-o"></i>
<span>{{ file.name }}</span>
</label>
</li>
<li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>
scope.get_menu_items = function(folder) {
folders_service.get_sub_folders(folder, false, function(folders, files) {
}, function(err, status) {
scope.handle_top_level_errors(err, status);
});
}
Just rename the ng-click for children folder
<li class="children-folder">
<span class="folder-title" ng-click="openFolder2=!openFolder2">
<i class="fa {{openFolder2 ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
folder children
</span>
<ul ng-show="openFolder2">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
</ul>
</li>
EDIT 2:
In your folder function,
You need to add _{{$index+1}} along with the openFolder name along with the loop such the names come up as openFolder_1, openFolder_2.. . I am unable to pin point your function with the above details
This following is just for reference purpose.
<li ng-repeat="name in names">{{openFolder}}_{{$index+1}}</li>
results in
openFolder_1
openFolder_2
I have a table containing next & previous pages. I am able to navigate to next/previous pages using next & previous buttons.
On previous & next page actions on call(controller methods) I am pushing checked ticket ids by pushing in an array $scope.checkedTicketIds
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
HTML code is
<div class="mail-tools tooltip-demo m-t-md">
<div class="btn-group pull-right">
<button ng-click="previousPage()" ng-disabled="previousPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
<button ng-click="nextPage()" ng-disabled="nextPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
</div>
<div class="input-group">
<div class="input-group-btn" dropdown>
<button ng-disabled="ticketsChecked()" class="btn btn-white dropdown-toggle pull-left" dropdown-toggle type="button">{{'ACTIONS' | translate}} <span class="caret"></span></button>
<ul class="dropdown-menu pull-left">
<li ng-repeat="(key, value) in actions"><a ng-click="convertAction(key)">{{key | translate}}</a></li>
</ul>
</div>
</div>
</div>
In controller on clicking previous page button calling method
$scope.previousPage = function() {
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
$scope.ticketsUpdatedQueryCriteria.page = --$scope.page;
Tickets.query($scope.ticketsUpdatedQueryCriteria).then(function(tickets) {
$scope.tickets = tickets.data;
$scope.ticketsPageData = tickets.cursor;
});
};
How to pop/remove id on uncheck & I wanted to maintain checked ticket ids for further bulk actions, like change status of one/more tickets. How can I do this?
I implement an example on jsbin, using an independent checked list.
Please, look at:
http://jsbin.com/rudifa/3/
Hope I help you.