Access js array for manipulation in cold fusion

Dev Articles Community Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

March 31st, 2008, 05:16 AM

pbaylis

Registered User

Join Date: Mar 2008

Posts: 1

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;
}

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

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	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

Free IT White Papers!

Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.

Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.

Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.

Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.

Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.

More Free IT White Papers!