SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    england
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drag &drop shopping list problem

    Hi i have a drag and drop shopping list you drag an image with description and price into shopping basket and it adds the items to your shopping list.
    but what i want to do is to be able to change the price then drag it to the shopping basket. i have tried to add a textfield where <p>Price:£0.33</input></p> is but it does not work any idea's
    here is the code i have.

    html
    HTML Code:
     <p class="datagrid-row-selected">Fresh Produce
    </p>
    <ul class="products">
      <li>
    		  <a class="item">
    				<img src="images/iconproducts/apple.png" width="50" height="50"/>
    				<div>
    				  <p>Apples</p>
                      <p>Price:£0.33</input></p>
    				</div>
    			</a>
    		</li>
    		<li>
    and here is the j query script

    Code:
     <script>
    		var data = {"total":0,"rows":[]};
    		var totalCost = 0;
    		
    		$(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 name = $(source).find('p:eq(0)').html();
    					var price = $(source).find('p:eq(1)').html();
    					addProduct(name, parseFloat(price.split('£')[1]));
    				}
    			});
    		});
    		
    		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
    				});
    			}
    			add();
    			totalCost += price;
    			$('#cartcontent').datagrid('loadData', data);
    			$('div.cart .total').html('Total: £'+totalCost);
    		}
    	</script>

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by pwesthead View Post
    i have tried to add a textfield where <p>Price:£0.33</input></p> is but it does not work any idea's
    I don't know if it is a typo or not, but your mark-up is malformed.

    It should be:

    HTML Code:
    <p>
      <label for="price">Price:</label>
      <input id="price" type="text" />
    </p>
    Does that help?

    If not could you maybe post a link to a page where we can see this problem?

  3. #3
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    england
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the reply here is the link so you can see what i am trying to do.
    http://easynet4u.com/comparelocal/freshproduce.php

    what i want to do is to be able to change the price then drag it accross to the shopping cart, and may be click a link to add another text feild.

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Okay, well it looks like you have a more immediate problem.
    When you drag one of the items to your cart, something is going wrong with the addition and the updated price is being displayed as "NaN" (Not A Number).

    Could you make a simple demo page with just two items and the cart area (to drag the items onto) and we can work from there.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    england
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi
    if you just drag the apple it will work, the others wont work because i have't changed the $ to a £ thats why,
    i need to be able to change the price before i drag into the cart or after, any idea's.

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Just tried that, unfortunately the apples don't work either.

    It would help if you could make a simple demo page that we could use as a basis for this (it just cuts out the amount of unrelated code one has to look at).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •