I am trying to pass table id, div id and nested class names into a generic function that's used across the programme code.
The tricky part is, this function calls another function which is wrapped within an anchor tag's onclick event. Before adding the two additional parameters, the function removeItem worked and now no longer fires. These two parameters are required in order to make the function reusable.
The jsfiddle of the expected programme.
Both ids (the parameters) are passed as strings quoted,
var tableid = "'#tble1200'"
var otherid = "'div.class1 .total'"
function AddProduct(elment, event, tableid, otherid)
{
//do something
//the hyperlink is remove
remove: '<a href="#" class="remove"
onclick="removeProduct(this, event,tableid,otherid)">X</a>'
}
function removeProduct(element, event, tblid, othid)
{
//do something
$(tblid).datagrid('loadData', data);
$(othid).html('Total: $'+subTotal);
}
I am trying out the code from this post's jsfiddle here. : The original code.
function addProduct(name,price){
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price,
remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
}
For multiple carts to work independently you have to store cart data in and array with index. And pass the index to addProduct and removeProduct functions. And for cart content use class instead of id
Updated code is as below:
HTML
<!doctype html>
<html>
<head>
<title>Multiple Carts</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<ul class="products">
<li>
<a href="#" class="item">
<img src="images/shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt3.gif"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt4.gif"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt5.gif"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt6.gif"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
<div class="cart">
<h1>Shopping Cart 1</h1>
<div style="background:#fff">
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
<div class="cart">
<h1>Shopping Cart 2</h1>
<div style="background:#fff">
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
</body>
</html>
CSS
.products{
list-style:none;
margin-right:300px;
padding:0px;
height:100%;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:fixed;
top: 0;
right:0;
width:300px;
height:50%;
background:#ccc;
padding:0px 10px;
}
.cart:nth-child(odd){
top:50% !important;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
JS
var data = [];
$(function () {
$('.cartcontent').datagrid({
singleSelect: true
});
$('.item').draggable({
revert: true,
proxy: 'clone',
onStartDrag: function () {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
},
onStopDrag: function () {
$(this).draggable('options').cursor = 'move';
}
});
$('.cart').droppable({
onDragEnter: function (e, source) {
$(source).draggable('options').cursor = 'auto';
},
onDragLeave: function (e, source) {
$(source).draggable('options').cursor = 'not-allowed';
},
onDrop: function (e, source) {
var $source = $(source);
var name = $source.find('p:eq(0)').text();
var price = $source.find('p:eq(1)').text();
addProduct($('.cart').index($(e.currentTarget)), name, parseFloat(price.split('$')[1]));
}
});
});
function loadData(cartIndex, event) {
var $cart = $('.cart:eq(' + cartIndex + ')');
$cart.find('.cartcontent').datagrid('loadData', data[cartIndex]);
$cart.find('.total').text('Total: $' + data[cartIndex].total);
}
function addProduct(cartIndex, name, price) {
function add() {
if (!data[cartIndex]) {
data[cartIndex] = {
length: 0,
total: 0,
rows: []
};
}
for (var i=0; i < data[cartIndex].length; i++) {
var row = data[cartIndex].rows[i];
if (row.name === name) {
row.quantity += 1;
return;
}
}
data[cartIndex].length++;
data[cartIndex].rows.push({
name: name,
quantity: 1,
price: price,
remove: '<a href="#" class="remove" onclick="removeProduct(' + cartIndex + ', this)">X</a>'
});
}
add();
data[cartIndex].total += price;
loadData(cartIndex);
}
function removeProduct(cartIndex, el) {
var tr = $(el).closest('tr');
var name = tr.find('td[field=name]').text();
var price = tr.find('td[field=price]').text();
var quantity = tr.find('td[field=quantity]').text();
for(var i = 0; i < data[cartIndex].length; i++){
var row = data[cartIndex].rows[i];
if (row.name == name) {
data[cartIndex].rows.splice(i, 1);
data[cartIndex].length--;
break;
}
}
data[cartIndex].total -= price * quantity;
loadData(cartIndex);
}
JS Fiddle
functoin AddProduct(elment, event, tableid, otherid)
functoin is spelled incorrectly, it should be function.
Here is a solution that will work:
remove: '<a href="#" id="item-' + unique_nr + '" class="remove">X</a>'
// later
$("#item-" + unique_nr).click(function (event) {
removeProduct(this, event, table_id, cart_id);
});
Using the id you can fetch the item later and bind a scope listener.
See: http://jsfiddle.net/Vwu37/135/
Right now I'm passing table_id and cart_id, you could consider passing the actual table and cart, ie. $("#cartcontent") and $(".cart")
Keep in mind that ".cart" is not unique, so if you want to have two lists you will need to make it unique.
