Cold Fusion Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingCold Fusion Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old March 31st, 2008, 06:16 AM
pbaylis pbaylis is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Mar 2008
Posts: 1 pbaylis User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 31 m 43 sec
Reputation Power: 0
Access js array for manipulation in cold fusion

I'm struggling to adapt an existing javascript to my CF app. The app in its simplest form can be seen at http://code.iamcal.com/js/jscommerce/demo.htm

Basically, it generates a table completely in javascript and inserts data into the newly created table according to which product is clicked. If you click the "checkout" button, it displays the selected data in a textarea. But, I don't want it in a textarea. I need to access the individual fields and <cfset> them somewhere for further manipulation, e.g. for inserting into a db. But, it's so freakin' complicated, I can't reverse engineer it and figure out what's going on.

I'm tugging my hair out over this. I'm hoping we have a javascript guru in the house.

The code that packs up the variables for display in the textarea on the checkout page looks like this:

Code:
function get_order_copy(){

	var sub_total = 0;
	var items = 0;
	var buffer = '';

	// update product rows
	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];

		var guid = product[0];
		var name = product[1];
		var price = product[2];
		var qty = get_qty(guid);
		items += qty;

		var total = price*qty;
		sub_total += total;

		if (qty > 0){
			buffer += name+" ("+guid+") x"+qty+" @ "+format_price(price)+" = "+format_price(total)+"\n";
		}
	}
	buffer += "\nTotal: ("+items+" items) "+format_price(sub_total)+"\n";

	return buffer;
}


The checkout page looks like this:

Code:
<html>
<head>
<title>My Shop - Checkout</title>
<script src="basket.js"></script>
<script src="products.js"></script>
</head>
<body onLoad="document.getElementById('order_text').value = get_order_copy();">

<div style="background-color: #cccccc; padding: 3px; text-align: right;">
	<a href="products.htm">Continue Shopping</a>
</div>

<br>

This is as far as my demo goes, but the next step is pretty easy :)<br>
<br>

<form>
Order:<br>
<textarea name="order_text" id="order_text" wrap="virtual" cols="60" rows="10"></textarea>
</form>

</body>
</html>


Somebody please lift me out of my agony, please.

If you need more info, I'll gladly provide it. I'll PAY someone to help me. I have paypal.

For anyone whose a glutton for punishment, the entire JS file that builds the table and manipulates it is below:

Code:
/////////////////////////////////////////////////////////////////////////////
//
// cookie stuff
//

function save_cookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000))
		var expires = "; expires="+date.toGMTString()
	}
	else expires = ""
	document.cookie = name+"="+value+expires+"; path=/"
}

function read_cookie(name) {
	var nameEQ = name + "="
	var ca = document.cookie.split(';')
	for(var i=0;i<ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length)
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length)
	}
	return null
}

function delete_cookie(name) {
	save_cookie(name, "", -1);
}

/////////////////////////////////////////////////////////////////////////////
//
// product stuff
//

var g_currency = '$';
var g_decimal = '.';
var g_thousand = ',';
var g_cookiedays = 365;
var g_havebasket = 0;
var g_products = new Array();

function add_product(guid, name, price){
	var item = new Array(guid, name, price); // Each lineitem stored in array 'item'
	g_products[g_products.length] = item; // Array 'g_products' is a collection of 'item' arrays.
}

function get_qty(guid){
	var cookie = read_cookie(guid+'_qty');
	if ((cookie != null) && (cookie != '')){
		return parseInt(cookie);
	}else{
		return 0;
	}
}

function set_qty(guid, qty){
	if (qty < 0) qty = 0;
	if (!qty){
		delete_cookie(guid+'_qty');
	}else{
		save_cookie(guid+'_qty', parseInt(qty), g_cookiedays);
	}
}

function add_item(guid, qty){
	set_qty(guid, get_qty(guid) + parseInt(qty));
	update_basket();
}

function remove_item(guid){
	set_qty(guid, 0);
	update_basket();
}

function empty_basket(){
	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];
		var guid = product[0];
		remove_item(guid);
	}
}

/////////////////////////////////////////////////////////////////////////////
//
// basket stuff
//

function build_basket(container_id, checkout_url){
	var cell, row;
	var elm_parent = document.getElementById(container_id);

	var elm_table = create_element(elm_parent, 'TABLE');
	elm_table.setAttribute('border', '1');
	elm_table.setAttribute('cellPadding', '4');
	elm_table.setAttribute('cellSpacing', '0');

	// we have to have a tbody for some reason
	var elm_tbody = create_element(elm_table, 'TBODY');

	// add header row
	row = create_element(elm_tbody, 'TR');
	cell = create_element_filled(row, 'TH', 'Product');
	cell = create_element_filled(row, 'TH', 'Price');
	cell = create_element_filled(row, 'TH', 'Quantity');
	cell = create_element_filled(row, 'TH', 'Delete');
	cell = create_element_filled(row, 'TH', 'Total');

	var sub_total = 0;

	// add product rows from array we created in 'add_product'
	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];

		var guid = product[0];
		var name = product[1];
		var price = product[2];
		var qty = get_qty(guid);

		var total = price*qty;
		sub_total += total;

		row = create_element(elm_tbody, 'TR');
		row.style.display = 'none';
		row.id = 'basket_row_'+guid;

		cell = create_element_filled(row, 'TD', name);

		cell = create_element_filled(row, 'TD', format_price(price));
		cell.setAttribute('align', 'right');

		cell = create_element_filled(row, 'TD', 'QTY');
		cell.setAttribute('align', 'right');

		var input = document.createElement('INPUT');
		input.id = 'basket_input_'+guid;
		input.value = qty;
		input.size = 10;
		input.style.textAlign = 'right';
		input.onblur = update_qty;
		replace_contents(cell, input);

		cell = create_element(row, 'TD');
		var link = create_element_filled(cell, 'A', 'Remove');
		link.href = "javascript:remove_item('"+guid+"');";

		cell = create_element_filled(row, 'TD', 'TOTAL');
		cell.setAttribute('align', 'right');
	}

	// add "empty" row
	row = create_element(elm_tbody, 'TR');
	row.style.display = 'none';
	row.id = 'basket_empty_row';
	cell = create_element(row, 'TD');
	cell.setAttribute('colSpan', '5');
	cell.setAttribute('align', 'center');
	create_element_filled(cell, 'I', 'Your invoice is empty');

	// show totals
	row = create_element(elm_tbody, 'TR');

	cell = create_element_filled(row, 'TH', 'Total:');
	cell.setAttribute('colSpan', '4');
	cell.setAttribute('align', 'left');

	cell = create_element_filled(row, 'TD', format_price(sub_total));
	cell.setAttribute('align', 'right');
	cell.id = 'basket_subtotal';

	// checkout button
	row = create_element(elm_tbody, 'TR');
	row.id = 'basket_checkout';
	row.style.display = 'none';

	cell = create_element(row, 'TD');
	cell.setAttribute('colSpan', '5');
	cell.setAttribute('align', 'right');

	link = create_element_filled(cell, 'A', 'Checkout »');
	link.href = checkout_url;

	g_havebasket = 1;
	update_basket();
}

function update_basket(){
	if (!g_havebasket) return;

	var sub_total = 0;

	// update product rows.
	for(var i=0; i<g_products.length; i++){ //loop number of line items in g_products array
		var product = g_products[i]; // product = the particular line item looped through.

		var guid = product[0]; // guid is in the first position of this looped line item
		var name = product[1]; // name is in the second position of this looped line item
		var price = product[2]; // price is in the third position of this looped line item
		var qty = get_qty(guid); // qty of this looped line item has been calculated in a separate function

		var total = price*qty;
		sub_total += total;

		var row = document.getElementById('basket_row_'+guid);
		row.style.display = (qty > 0)?'':'none';

		// update qty
		var input = document.getElementById('basket_input_'+guid);
		input.value = qty;		

		// update total
		replace_contents(row.childNodes[4], document.createTextNode(format_price(total)));

	}

	var row = document.getElementById('basket_empty_row');
	row.style.display = (sub_total > 0)?'none':'';

	var cell = document.getElementById('basket_subtotal');
	replace_contents(cell, document.createTextNode(format_price(sub_total)));  

	var row = document.getElementById('basket_checkout');
	row.style.display = (sub_total > 0)?'':'none';
}

function update_qty(){
	if (!g_havebasket) return;

	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];

		var guid = product[0];

		var row = document.getElementById('basket_row_'+guid);
		var cell = row.childNodes[2];
		var input = cell.childNodes[0];

		set_qty(guid, input.value);
	}

	update_basket();
}

function insert_basket_contents(node_name){
	var qty = 0;
	var node = document.getElementById(node_name);

	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];
		var guid = product[0];
		qty += get_qty(guid);
	}

	if (qty){
		if (qty == 1){
			s = "Your basket contains 1 item.";
		}else{
			s = "Your basket contains "+qty+" items.";
		}
	}else{
		s = "Your basket is empty.";
	}

	replace_contents(node, document.createTextNode(s));
}

function get_order_copy(){

	var sub_total = 0;
	var items = 0;
	var buffer = '';

	// update product rows
	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];

		var guid = product[0];
		var name = product[1];
		var price = product[2];
		var qty = get_qty(guid);
		items += qty;

		var total = price*qty;
		sub_total += total;

		if (qty > 0){
			buffer += name+" ("+guid+") x"+qty+" @ "+format_price(price)+" = "+format_price(total)+"\n";
		}
	}
	buffer += "\nTotal: ("+items+" items) "+format_price(sub_total)+"\n";

	return buffer;
}

function setFormVariables(){

	var sub_total = 0;
	var items = 0;
	var buffer = '';

	// update product rows
	for(var i=0; i<g_products.length; i++){
		var product = g_products[i];

		var guid = product[0];
		var name = product[1];
		var price = product[2];
		var qty = get_qty(guid);
		items += qty;

		var total = price*qty;
		sub_total += total;

		if (qty > 0){
			buffer += name+" ("+guid+") x"+qty+" @ "+format_price(price)+" = "+format_price(total)+"\n";
		}
	}
	buffer += "\nTotal: ("+items+" items) "+format_price(sub_total)+"\n";

	return buffer;
}

/////////////////////////////////////////////////////////////////////////////
//
// DOM helper stuff
//

function create_element(parent, type){
	var elm = document.createElement(type);
	parent.appendChild(elm);
	return elm;
}

function create_element_filled(parent, type, contents){
	var elm = document.createElement(type);
	parent.appendChild(elm);
	elm.appendChild(document.createTextNode(contents))  ;
	return elm;
}

function replace_contents(node, newnode){
	if (node.childNodes.length > 0){
		node.replaceChild(newnode, node.childNodes[0]);
	}else{
		node.appendChild(newnode);
	}
}

/////////////////////////////////////////////////////////////////////////////
//
// format stuff
//

function format_price(price){
	var s = new String(Math.round(price*100));
	var pence = s.substr(s.length-2);
	var pounds = s.substr(0, s.length-2);
	pounds = commaify(pounds);

	if (pence.length == 0) pence = '00';
	if (pence.length == 1) pence = '0'+pence;
	if (pounds.length == 0) pounds = '0';

	return g_currency + pounds + g_decimal + pence;
}

function commaify(s){
	if (s.length <= 3) return s;
	var out = s.substr(s.length-3);
	s = s.substr(0, s.length-3);
	while(s.length > 0){
		out = s.substr(s.length-3) + g_thousand + out;
		if (s.length > 3){
			s = s.substr(0, s.length-3);
		}else{
			s = '';
		}
	}
	return out;
}

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingCold Fusion Development > Access js array for manipulation in cold fusion


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap