Jump to content

Ajax Shopping Cart Script


chibineku

Recommended Posts

I am trying to learn some AJAX techniques and have copied a script from the AJAX Bible. You have an item, labelled DVD Player, and another labelled Shopping Cart. You drag the DVD Player onto the Cart and the script fetches a message from a text file using XMLHttpRequest. When I try to click on the DVD Player, it scoots out of the way, although sometimes the page works, at least in part - often failing to let go of the DVD Player on mouseup. I haven't managed to get any error consoles to help me out, since none of them registers any errors.Here is the link:AJAX Cart ExampleAnd here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><title>Drag 'n' Drop AJAX Cart</title><style type="text/css">#dvdplayer {position: absolute;z-index: 200;background: #0;color: #00F;}#cart {position: absolute;background: #0F0;color: #000;}</style><script type="text/javascript">var offsetX, offsetY;function processMouseDown(e) {var e = new MouseEvent(e);addListener("mousemove",processMouseMove);addListener("mouseup",processMouseUp);offsetX = e.x - parseInt(e.target.style.left);offsetY = e.x - parseInt(e.target.style.top);document.getElementById("targetDiv").innerHTML = "";}function processMouseMove(e) {var e = new MouseEvent(e);var x = e.x - offsetX;e.target.style.left = x + "px";var y = e.y - offsetY;e.target.style.top = y + "px";}function processMouseUp(e) {var e = new MouseEvent(e);removeListener("mousemove",processMouseMove);removeListener("mouseup",processMouseUp);var cart = document.getElementById("cart");var x = parseInt(cart.style.left);var y = parseInt(cart.style.top);var width = parseInt(cart.style.width);var height = parseInt(cart.style.height);if (e.x > x && e.x < (x + width) && e.y > y && e.y < (y + height)) {var XMLHttpRequestObject = false;if (window.XMLHttpRequest) {XMLHttpRequestObject = new XMLHttpRequest();} else if (window.ActiveXObject) {XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}if (XMLHttpRequestObject) {XMLHttpRequestObject.open("GET", "buy.txt");XMLHttpRequestObject.onreadystatechange = function() {if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {document.getElementById("targetDiv").innerHTML = XMLHttpRequestObject.responseText;delete XMLHttpRequestObject;XMLHttpRequestObject = null;}}XMLHttpRequestObject.send(null);}}}function removeListener(type, callback) {if (document.removeListener) {document.removeListener(type,callback,false);} else if (document.detachEvent) {document.detachEvent(type,callback,false);}}function addListener(type, callback) {if (document.addEventListener) {document.addEventListener(type,callback,false);} else if (document.attachEvent) {document.attachEvent("on" + type,callback,false);}}function MouseEvent(e) {if (e) {this.e = e;} else {this.e = window.event;}if (e.pageX) {this.x = e.pageX;} else {this.x = e.clientX;}if (e.pageY) {this.y = e.pageY;} else {this.y = e.clientY;}if (e.target) {this.target = e.target;} else {this.target = e.srcElement;}}</script></head><body><h1>Buy a DVD player - drag it into the cart.</h1><div id="targetDiv"></div><div id="dvdplayer" style="left:180px; top:150px; width:80px; height:60px;" onmousedown="processMouseDown(event);">DVD Player</div><div id="cart" style="left:350px; top:250px; width:200px; height:100px;">Shopping Cart</div></body></html>
Link to comment
Share on other sites

There are so many things I dislike about that document . . . . Normally, you drag a page element by attaching a mousemove listener to the element, not to the document itself (if I'm reading this correctly). This part alone is a deal breaker for me.And getting the position of a page element with e.target.style.left is a non-starter. Until e.target.style.left has been set in javascript, it will return an empty string, which probably explains your "scooting" motion. e.target.offsetLeft is more reliable.And the whole MouseEvent() function, though a neat idea, is so wasteful! Every statement can be wrapped up in something like this: this.e = e || window.event; (making it a 4-line function, total). Except that e itself needs redefining, because the next three if statements assume that it has a value to begin with, which is especially silly when the first if statement knows that it might not. Is that verbatim from the AJAX Bible?I suggest you look for another drag'n'drop model.

Link to comment
Share on other sites

It is verbatim, except that I think I've made a typo or something somewhere, because you can DL the file from the wiley website and it works better, but still not brilliantly.I think part of the problem is that the book assumes almost no JS knowledge, so he's probably using whatever methods seem the most self-explanatory. I am beginning to think that it's not the best book. I mean, the guy spends 30 pages describing how to use a handful of AJAX frameworks, which means learning things like what variables to pass to someone else's functions, when he has already told you how to create them using GET or POST and the XMLHttpRequest / Object. So far, much of the actual workings of the scripts is basic JavaScript and adding on php or external files seems a waste of time and energy. There are still 400 pages to go and he promises a chat room and games by the end. We shall see.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...