Need help finding best way to do the following...

dc_jt · February 7, 2008

Firstly, this may sound like an Ajax question and I understand there is an Ajax forum, however there is never anyone in there, plus I dont actually want to know any Ajax.

I am doing a drag and drop cart, however Im not sure what the best way to do it is. I know how to drag and drop etc so Im not asking how you do this or for any code, just simply whats the best way to go about updating the cart etc.

The way Ive got it is:

One div here which contains 12 images. (first div)

Another div here where each image is dragged too. (second div)

However, Im not sure how to go about updating each.

At the moment I have the 12 cookies in the first div then when its updated using ajax, I add the image Id that was dragged to a session. I then do if statements around each cookie so if the cookie id is in the session show it in the second div. However this doesnt work!!

Does anyone have an idea what the best way to go about it is please?

Thanks

ratcateme · February 7, 2008

it sounds to me like you don't no much about ajax so i would suggest using XAJAX it inter grades into php easily and could properly help you

http://www.xajaxproject.org/

Scott.

dc_jt · February 7, 2008

No I dont know too much but I know a little.

I just want to know what the best procedure is though. How do these drag and drop carts normally work?

Once an image has been dropped do you store this in a session and only show this image in the basket if it is within the session and only show in the place where you dragged it from if its not in the session?

Or do you not use sessions at all?

I just want an idea of the best way to go about this?

Thanks

aschk · February 7, 2008

I like it, it's a novel idea, but you're sort of shooting yourself in the foot.

1) Javascript might be turned off, thus making ANY drag drop features unusable. Bear in mind any browser incompatibility issues that may arise as a result of using JScript also.

2) From a usability perspective you're requiring that the user make more effort that just clicking to get the item they want into their basket.

Just think about these points, and if it's a client request, make them understand the implications here. Both from a technical and user point-of-view.

Unfortunately this may sound like criticism, however I want to assure you that it's not, i just wish to make some issue prevalent during your development period.

Any persistance amongst your shopping basket MUST be kept in the session, thus every time a product is dropped into the basket an Ajax request needs to be fired to the server to update the SESSION basket with a new product id. Drop any ideas about holding information in cookies because I suspect using javascript to update cookies on the client machine as your shopping basket is going to cause additional technical complications. Think about it this way, every Ajax request to the server is like a page call, only you don't actually call a page... hope the info helps.

dc_jt · February 7, 2008

Thanks for your reply. I think Im getting somewhere now though! However, now I want to be able to drag from the basket. So when Ive dragged it into the basket it echos out the cookies in cookies.scr.php but I cant drag.

Please see my code below and see what you think?

Ive stripped out all irrelevant html and I know it could be tidier!

Main Page

<?php
session_start();
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="../assets/css/main.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../assets/js/RollOver.js" type="text/javascript"></script>
<script language="JavaScript" src="../assets/js/menu.js" type="text/javascript"></script>

<script type="text/javascript" src="/assets/js/prototype.js"></script>
<script type="text/javascript" src="/assets/js/scriptaculous.js"></script>
<script type="text/javascript" src="/assets/js/image.js"></script>

</head>
<style type="text/css">

#cookie_box {
	margin: 15px;
	width:210px;
	height:293px;

}

#cookie_box.hoverclass {
	background: #FOO;
}

</style>
<body>
         
                    <div id="order-box-one">
                    <ul>
                    <div id="box-one">
                    	<li class="box-size-active">
                    	
                    	<a href="#" onClick="new Ajax.Updater('box-one', '/scripts/treatbox_size.scr.php?iSize=1')"><img src="../assets/images/shop/box-size-13.gif" border="0" alt="13" />
                    	</a>
                    	</li>
                 
                        <li class="box-size-inactive">
                        
                        <a href="#" onClick="new Ajax.Updater('box-one', '/scripts/treatbox_size.scr.php?iSize=2')"><img src="../assets/images/shop/box-size-18.gif" border="0" alt="18" />
                        </a>
                        </li>
                   </div>
                   </ul>
                   </div>
                  				<!-- WHERE COOKIES GET DRAGGED TO! - IF STATEMENTS FOR WHEN YOU REFRESH THE PAGE, THE COOKIES REMAIN IN THE BASKET -->
                                <div id="cookie_box">
							<?php if($_SESSION['cookieid1'] == '1'){?>
								<img id="1" class="items"  src="../assets/images/cookie.gif" />
								<script type="text/javascript">
								//<![CDATA[
								new Draggable("1", {revert:'true'})
								//]]>
								</script>
								<?php }?>
								<?php if($_SESSION['cookieid2'] == '1'){?>
								<img id="2" class="items"  src="../assets/images/cookie.gif" />
								<script type="text/javascript">
								//<![CDATA[
								new Draggable("2", {revert:'true'})
								//]]>
								</script>
								<?php }?>
								<?php if($_SESSION['cookieid3'] == '1'){?>
								<img id="3" class="items"  src="../assets/images/cookie.gif" />
								<script type="text/javascript">
								//<![CDATA[
								new Draggable("3", {revert:'true'})
								//]]>
								</script>
								<?php }?>
                                </div> <!-- cookie_box -->
                                <div class="treatbox-drop-area">
                                <!--<img src="../assets/images/cookies2.gif" />-->
                                </div>
                                 
                                <script type="text/javascript">
                               
	//<![CDATA[
	Droppables.add("cookie_box",{accept:'items', hoverclass:'hoverclass',onDrop:function(element)
	{new Ajax.Updater('cookie-start-tray', '/scripts/cookies.scr.php',{asynchronous:true,evalScripts:true,method:'post',parameters:'id=' + encodeURIComponent(element.id)}),get_image_by_id('cookie_box', element.id)}
	} )
	//]]>
</script>

<!-- BOX OF COOKIES! -->
                    <h1>Choose your Cookies</h1>
                    <div id="cookie-start-tray" class="cookie-start-tray">
                    <?php if($_SESSION['cookieid1'] != '1'){?>
                    <img id="1" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("1", {revert:'true'})
				//]]>
				</script>
				<?php }?>
				<?php if($_SESSION['cookieid2'] != '1'){?>
                    <img id="2" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("2", {revert:'true'})
				//]]>
				</script>
				<?php }?>
				<?php if($_SESSION['cookieid3'] != '1'){?>
                    <img id="3" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("3", {revert:'true'})
				//]]>
				</script>
				<?php }?>

cookies.scr.php

<?php $_POST['quantity'] = '1';

$aCookies = array();

if ((isset($_POST['id']))) {
	session_start();
	$iCookieId = 'cookieid'.$_POST['id'];
	$_SESSION[$iCookieId] = 1;
}

?>

                    <!--<img src="../assets/images/cookies.gif" />-->
                    <?php if($_SESSION['cookieid1'] != '1'){
                echo "<img id=\"1\" class=\"items\"  src=\"../assets/images/cookie.gif\" />\n";
				echo "<script type=\"text/javascript\">\n";
				echo "//<![CDATA[\n";
				echo "new Draggable(\"1\", {revert:'true'})\n";
				echo "//]]>\n";
				echo "</script>\n";
				}

				if($_SESSION['cookieid2'] != '1'){
                echo "<img id=\"2\" class=\"items\"  src=\"../assets/images/cookie.gif\" />\n";
				echo "<script type=\"text/javascript\">\n";
				echo "//<![CDATA[\n";
				echo "new Draggable(\"2\", {revert:'true'})\n";
				echo "//]]>\n";
				echo "</script>\n";
				}

				if($_SESSION['cookieid3'] != '1'){
                echo "<img id=\"3\" class=\"items\"  src=\"../assets/images/cookie.gif\" />\n";
				echo "<script type=\"text/javascript\">\n";
				echo "//<![CDATA[\n";
				echo "new Draggable(\"3\", {revert:'true'})\n";
				echo "//]]>\n";
				echo "</script>\n";
				}

Hope someone can help.

dc_jt · February 7, 2008

Anyone???

By the way, just realised this doesnt work in IE!! Any reason why this might be???

Thanks

Sign In

Need help finding best way to do the following...

Recommended Posts

dc_jt

Link to comment

Share on other sites

ratcateme

Link to comment

Share on other sites

dc_jt

Link to comment

Share on other sites

aschk

Link to comment

Share on other sites

dc_jt

Link to comment

Share on other sites

dc_jt

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information