I have a drag and drop shopping cart, and I've got a problem in updating the total price once I removed one item. and whenever I remove the item the table is still remain.
Here's my addtocart PHP
<?php
define('INCLUDE_CHECK',1);
require "../connect.php";
if(!$_POST['img']) die("There is no such product!");
$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM products WHERE img='".$img."'"));
echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\
\
<table width="260" id="table_'.$row['id'].'">\
<tr>\
<td width="60%" style="display:none;"><input type="text" name="id[]" value="'.$row['id'].'" style="width: 30px; border-width: 0px;"></td>\
<td width="60%"><input type="text" name="roomname[]" value="'.$row['name'].'" style="width: 95px; border-width: 0px;"></td>\
<td width="10%"><input type="text" name="price[]" value="'.$row['price'].'" style="width: 40px; border-width: 0px;"></td>\
<td width="15%"><select name="qty[]" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');" style="width: 30px;">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option>\
</slect>\
\
</td>\
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>\
</tr>\
</table>\'}';
?>
My javascript.
var purchased=new Array();
var totalprice=0;
$(document).ready(function(){
$('.product').simpletip({
offset:[40,0],
content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
onShow: function(){
var param = this.getParent().find('img').attr('src');
if($.browser.msie && $.browser.version=='6.0')
{
param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}
this.load('ajax/tips.php',{img:param});
}
});
$(".product img").draggable({
containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100
});
$("div.content.drop-here").droppable({
drop:
function(e, ui)
{
var param = $(ui.draggable).attr('src');
if($.browser.msie && $.browser.version=='6.0')
{
param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}
addlist(param);
}
});
});
function addlist(param)
{
$.ajax({
type: "POST",
url: "ajax/addtocart.php",
data: 'img='+encodeURIComponent(param),
dataType: 'json',
beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
success: function(msg){
$('#ajax-loader').css('visibility','hidden');
if(parseInt(msg.status)!=1)
{
return false;
}
else
{
var check=false;
var cnt = false;
for(var i=0; i<purchased.length;i++)
{
if(purchased[i].id==msg.id)
{
check=true;
cnt=purchased[i].cnt;
break;
}
}
if(!cnt)
$('#item-list').append(msg.txt);
if(!check)
{
purchased.push({id:msg.id,cnt:1,price:msg.price});
}
else
{
if(cnt>=3) return false;
purchased[i].cnt++;
$('#'+msg.id+'_cnt').val(purchased[i].cnt);
}
totalprice+=msg.price;
update_total();
}
$('.tooltip').hide();
}
});
}
function findpos(id)
{
for(var i=0; i<purchased.length;i++)
{
if(purchased[i].id==id)
return i;
}
return false;
}
function remove(id)
{
var i=findpos(id);
totalprice-=purchased[i].price*purchased[i].cnt;
purchased[i].cnt = 0;
$('#table_'+id).remove();
update_total();
}
function change(id)
{
var i=findpos(id);
totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;
purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
update_total();
}
function update_total()
{
if(totalprice)
{
$('#total').html('total: $'+totalprice);
$('a.button').css('display','block');
}
else
{
$('#total').html('');
$('a.button').hide();
}
}