Source code for /src/jsp/price.jsp
//======================================================================//
// Author: Mark Qian <markqian@hotmail.com> //
// WWW: http://www.coolshare.com //
// Copyright (c) 2006, Mark Qian //
// //
// You must contact Mark Qian to get a permission of use //
// in case you want to make any use of the codes except viewing it //
// on Mark's site. //
//======================================================================//
<%@ include file="/WEB-INF/jsp/include.jsp" %>
<%@ page import="com.coolshare.springapp.Constant" %>
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)">
<html>
<head><title><fmt:message key="title"/></title>
<script language="javascript" src="/springapp/js/ajax.js"></script>
<script language="javascript" src="/springapp/js/cross_browser.js"></script>
<script language="javascript" src="/springapp/js/expand.js"></script>
<script language="javascript" src="/springapp/js/jsonrpc.js"></script>
<script src='/springapp/dwr/interface/updateQuantity2DWR.js'></script>
<script src='/springapp/dwr/engine.js'></script>
<script>
var jsonrpc;
var sMax = <%=request.getSession().getMaxInactiveInterval()%>*1000+20000;
var sCount;
var modified = 0;
var ppv = new Array();
var pv = new Array();
function doOnLoad()
{
jsonrpc = new JSONRpcClient("<%=response.encodeUrl("/springapp/updateQuantity2JSON.htm")%>");
resetCount();
setSessionTimeout(sMax);
}
function resetCount() {
sCount = new Date().getTime();
}
function setSessionTimeout(m) {
//setTimeout("checkSessionTimeout[document.getElementById('a').value]()]", sMax);
setTimeout("checkSessionTimeout['mvc']()", m);
}
var checkSessionTimeout = new Array();
checkSessionTimeout['mvc'] = function() {
var curTime = new Date().getTime();
var dt = curTime-sCount;
if (dt<sMax) {
setSessionTimeout(sMax - dt);
return;
}
send("<%=response.encodeUrl("/springapp/checkSessionTimeout.htm")%>", "sid=<%=request.getSession().getId()%>", function() {
if(shttp.readyState == 4){
if (modified==0) {
} else {
modified = 0;
var timeout = shttp.responseText.trim();
if (timeout=="true") {
alert("Session is timeout. \nAll the itmes in your cart will be returned to shelves.\nPlease reselect your items.");
window.location.reload();
} else {
resetCount();
setSessionTimeout(sMax);
}
}
}
});
}
var fss = ["1.3em", "0.7em"];
var count = 0;
var state = 0;
function attentionField(id, n, s) {
var c = document.getElementById(id)
var fs = c.style.fontSize;
//debugger
c.style.fontSize = fss[s];
if (n>0)
setTimeout("attentionField('"+id+"', "+(n-1)+", "+(1-s)+")", 500);
else
c.style.fontSize = "1.0em";
}
function handleCheck(c, id) {
var q = document.getElementById(id);
if (c.checked) {
var order = q.value.trim();
if (order=="")
q.value = "1";
} else {
q.value = "";
}
updateQuantity2(document.getElementById(id));
}
String.prototype.trim = function() {
return (this.replace(/^[\s\xA0]+/, "").replace(/[\s\xA0]+$/, ""));
}
var http;
var approaches = new Array();
function updateQuantity2(c) {
http = createRequestObject();
var vv = c.value;
if (!vv || vv=="")
vv = "0";
else if (isNaN(vv)) {
alert("Please enter a number");
recoverField(c);
setTimeout("document.getElementById('"+c.id+"').focus();document.getElementById('"+c.id+"').select()", 1);
return;
} else
vv = vv.trim();
var dq = parseInt(vv) - pv[c.id];
modified+=dq;
approaches[document.getElementById("a").value](c, "<%= response.encodeUrl("/springapp/updateQuantity2.htm")%>", c.id, dq);
}
function recoverField(c) {
var vvv = "";
if (pv[c.id]>0)
vvv = ""+pv[c.id];
c.value = ""+vvv;
}
approaches['mvc'] = function(c, url, id, dq) {
var para = "id="+id+"&dq="+dq;
http.onreadystatechange = function (){
if(http.readyState == 4){
var dq = parseInt(http.responseText);
updateField(c, dq);
}
};
http.open('POST', url, true);
http.setRequestHeader("Content-length", para.length);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Connection", "close");
http.send(para);
}
approaches['json'] = function(c, url, id, dq) {
var o = jsonrpc.Quantity2Updator.update(id, dq);
updateField(c, o);
}
approaches['dwr'] = function(c, url, id, dq) {
debugger
updateQuantity2DWR.update(id, dq, function(data) {
debugger
updateField(c, data);
});
}
var shttp;
function send(url, para, cb) {
if (!para)
para = "";
shttp = createRequestObject();
shttp.onreadystatechange = cb;
shttp.open('POST', url, true);
shttp.setRequestHeader("Content-length", para.length);
shttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
shttp.setRequestHeader("Connection", "close");
shttp.send(para);
}
function insertPara(url, para) {
var i = url.indexOf(";");
if (i<0)
return url+"?"+para;
return url.substring(0, i)+"?"+para+url.substring(i);
}
function updateField(c, dq) {
if (dq<0) {
alert("Sorry, the shelves has no enough items to satisfy your request.");
recoverField(c);
c.focus();
c.select();
return;
}
var tf = document.getElementById("d"+c.id);
tf.innerHTML = dq;
pv[c.id] = c.value==""?0:parseInt(c.value);
attentionField(tf.id, 13, 1);
}
function getChildren(p) {
if (p.children)
return p.children;
return p.childNodes;
}
var http2;
function resetQuantity2(){
http2 = createRequestObject();
http2.onreadystatechange = function (){
if(http2.readyState == 4){
window.location.reload();
}
};
http2.open('GET', "<%=response.encodeUrl("/springapp/resetQuantity2.htm")%>", true);
http2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http2.setRequestHeader("Connection", "close");
http2.send(null);
}
</script>
</head>
<body onload="doOnLoad()" background = "/RemoteScriptGuru/html/coolshare/html/images/rulebk2.jpg">
<pre>
<h2>Bamboo Price List</h2>
<Font size=4><b>A. <a id="Aa1" href="#" onclick="divExpand(this);return false;" onMouseover="showtip()" onMouseout="hidetip()" style="text-decoration:none">Case Introduction: <span style="width:120px;height:20px;background-color:lightgrey;text-align:center;text-valign:middle;border:2px buttonhighlight outset;cursor:hand;font-size:9pt;font-weight:bold">Show details</span></a></b></Font>
<div id="d_Aa1" style="display:none;background-color:#CCFFFF;border-style: inset;width:1200"><pre>
In some case, you need to update other fields when some fields are changed. In the following example,
a bamboo shopping page, the blue numbers in the "Available Quantity in shelvs" field indicate "number of
items still on the shelves". So the "number of items still on the shelves" will vary when you pick some items
into shopping cart. This may be a useful feature when the shop is really clouded:
one of major differences between a real shop and a virtual shop is that none can place it into their cart after
you place an item into your cart while it happens commonly in a virtual shop. It didn't become a real problem
since virtual shops are not that clouded. But it is really bad when it happened: you are told that the items
are "out of stock" when you check out but it did allow you "pick" it off the shelf and placed into your cart
when you shopped. Then you were so angry and rushed back to the page your picked it up and found it was really
out then (in those non-frequently-update site you may even still see they are available!).
The feature in the following bamboo shop solves the problem.
You may want to try following in the bamboo shop:
<ul><ul><ul>
<li>click at the checkbox at a row to see the change at the blue number</li>
<li>enter or modify a reasonable (less than blue) number in the "Quantity in Cart" column to see the </li>
change at the blue number
<li>enter a non-reasonable number (larger than blue) in the "Quantity in Cart" column to </li>
see the change at the blue number
<li>I set the session timeout to a very short period (2 minutes). So select some </li>
items and wait for about two minutes to see what will happen
<li> open two browsers (A and B) to see what happen when session timeout:</li>
open A (make some selection and then stop making selection) and then open
B one a muniute later and make some selection in both. When time out,
after A is reloaded, look at A to see if the item B checked out still out of shelves.
<li> select a different item in field "Access using"</li>
</ul></ul></ul>
<b>Note</b>: you need to switch away from the modified field in order to see the change of the blue number.
The "Reset In Shelves" simply "pull" all them items in all the carts back to shelves without notice.
So you will see something inconsistent when someone click the button.
</pre></div>
<br><br>
<Font size=4><b>B. <a id="Aa2" href="#" onclick="divExpand(this);return false;" onMouseover="showtip()" onMouseout="hidetip()" style="text-decoration:none">Techical Introduction (issues/solutions/source codes): <span style="width:120px;height:20px;background-color:lightgrey;text-align:center;text-valign:middle;border:2px buttonhighlight outset;cursor:hand;font-size:9pt;font-weight:bold">Show details</span></a></b></Font>
<div id="d_Aa2" style="display:none;background-color:#CCFFFF;border-style: inset;width:1200"><pre>
<ul>
<h3><a href="/springapp/accessPage.htm">Techical Details</a></h3>
</ul>
</pre></div>
<br><br>
<table><tr><td>
<h3><fmt:message key="booheading"/></h3></td><td style="width:200"></td><td>Access using</td><td><select id=a><option value="mvc">Spring MVC/JDBC standard call</option><option value="json">JSON RPC/JDBC</option></select></td><td><button onclick="resetQuantity2()">Reset In Shelves</button></td></tr></table>
</pre>
<table border="1" id="boo">
<tr><th style="width:2">In Cart</th><th style="width:2">Quantity in Cart</th><th>Plant Name</th><th>Price</th><th style="width:5">Size</th><th style="width:15">Available Quantity</th><th style="width:15">Available Quantity in shelvs</th><th>Max. height</th><th>Running
or Clumping</th><th>Sun light</th></tr>
<%
Object m = request.getAttribute("model");
System.err.println("model===="+m);
m = request.getSession().getAttribute("model");
System.err.println("model===="+m);
%>
<c:forEach items="${model.bamboo}" var="boo">
<tr>
<td style="width:2"><input type=checkbox onclick="handleCheck(this, '<c:out value="${boo.id}"/>')"></td>
<td style="width:2"><input type=input id="<c:out value="${boo.id}"/>" onchange="updateQuantity2(this)"></td>
<td><c:out value="${boo.name}"/></td>
<td>$<c:out value="${boo.price}"/></td>
<td><c:out value="${boo.size}"/></td>
<td nowrap><c:out value="${boo.quantity}"/></td>
<td nowrap><font color="blue"><div id="d<c:out value="${boo.id}"/>" style="font-size:1.0em"><c:out value="${boo.quantity2}"/></div></font></td>
<td><c:out value="${boo.height}"/></td>
<td style="width:30"><c:out value="${boo.type}"/></td>
<td><c:out value="${boo.light}"/></td>
</tr>
</c:forEach>
</table>
<script>
<c:forEach items="${model.bamboo}" var="boo">
ppv['<c:out value="${boo.id}"/>'] = <c:out value="${boo.quantity}"/>;
pv['<c:out value="${boo.id}"/>'] = 0;
</c:forEach>
</script>
<script language="javascript" src="/RemoteScriptGuru/html/coolshare/html/js/cross_browser.js"></script>
<script language="javascript" src="/RemoteScriptGuru/html/coolshare/html/js/include_ajax.js"></script>
<script id="__include__">
include.load("/RemoteScriptGuru/html/coolshare/html/common/contact.htm");
</script>
</body>
</html>