如何使用jquery在购物车中显示有关放置物品的袋子的字段

Question

I am very new to jQuery . I am presently working on a project. In this project there are 3 types of items and three bags such that the user should select anyone of the bags and try dropping items into it. If the user selects bag 1 then he can drop item1, item2, item3 if he selects bag 2 he can drop item2, item3 if he selects bag3 he can drop item3 only.

Now the problem is I have added an additional field bag to display the type of bag in which the item was dropped (example "bag1" or "bag2" or "bag3").

But the problem is I am unable to display the bag field. Do anyone out there let me know what I can do. I am struggling a lot for this.

Example on jsfiddle: http://jsfiddle.net/Vwu37/48/

HTML:

<tr>
    <th field="name" width=140>Name</th>
    <th field="bag" width=60>Bag</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>

Javascript:

var data = {
    "total": 0,
    "rows": []
};
var totalCost = 0;
$(function () {
    $('#cartcontent1').datagrid({
        singleSelect: true
    });

    $('.bag').droppable({
        onDrop: function (e, source) {
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
            $(source.draggable).remove();
            //$('.bag').droppable('enable');
            $(this).droppable('enable');
        }
    });


    $('.item').each(function (index, div) {
        var scope = $(this).attr('data-scope');
        //debugger;
        $(div).draggable({
            revert: true,
            proxy: 'clone',
            onStartDrag: function () {
                $('.bag').droppable('enable');
                $('.bag:not(.selected)').droppable('disable');
                $('.bag:not(.bag[data-scope*=' + scope + '])').droppable('disable');

                $(this).draggable('options').cursor = 'not-allowed';
                $(this).draggable('proxy').css('z-index', 10);
            },
            onStopDrag: function () {
                //$('.bag').droppable('enable');
                $(this).draggable('options').cursor = 'move';
            }
        });
    });



    $('.bag').click(function () {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

});


function addProduct(name, price) {
    var totalQuantity = sumQuantity(data);

    if (totalQuantity < 10) {
        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;
        $('#cartcontent1').datagrid('loadData', data);
        $('div.cart .total').html('Total: $' + totalCost);
    } else {
        alert('cannot have more than 10 items');
    }
}

function removeProduct(el, event) {
    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.total; i++) {
        var row = data.rows[i];
        if (row.name == name) {
            data.rows.splice(i, 1);
            data.total--;
            break;
        }
    }
    totalCost -= price * quantity;
    $('#cartcontent1').datagrid('loadData', data);
    $('div.cart .total').html('Total: $' + totalCost);
}

function sumQuantity(data) {
    var sum = 0;
    for (var i = 0; i < data.total; i++) {
        sum += data.rows[i].quantity;
    }
    return sum;
}

Answer 1

I updated the bag html to include a bag id. In the onDrop function i added e.target.id to get the id of the bag.

$('.bag').droppable({
    onDrop: function (e, source) {
        var name = $(source).find('p:eq(0)').html();
        var price = $(source).find('p:eq(1)').html();
        var bag = e.target.id;
        addProduct(name, parseFloat(price.split('$')[1]), bag);
        $(source.draggable).remove();
        //$('.bag').droppable('enable');
        $(this).droppable('enable');
    }
});

Pass this bag id to the addProduct function. Se the example in http://jsfiddle.net/Vwu37/55/ Is this what you had in mind?

Edit: It looks like there is a problem when you add the same item to two different bags. I am not sure if you want to be able to add the same item to different bags. If you want to do this you can change your addProduct function with if (row.name == name && row.bag == bag)

  function addProduct(name, price, bag) {
      var totalQuantity = sumQuantity(data);

      if (totalQuantity < 10) {
          function add() {
              for (var i = 0; i < data.total; i++) {
                  var row = data.rows[i];
                  if (row.name == name && row.bag == bag) {
                      row.quantity += 1;
                      return;
                  }
              }
              data.total += 1;
              data.rows.push({
                  name: name,
                  bag: bag,
                  quantity: 1,
                  price: price,
                  remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
              });
          }
          add();
          totalCost += price;
          $('#cartcontent1').datagrid('loadData', data);
          $('div.cart .total').html('Total: $' + totalCost);
      } else {
          alert('cannot have more than 10 items');
      }
  }