View Full Version : new to ajax and js..need help with dynamic list code

01-04-2011, 09:40 PM
Hi not sure if this is the right forum, as I'm not altogether sure what kind of code it is. I think its jQuery with some ajax components. lol

Anyway, this code was given to me by someone else and as is works great! It simple allows a user to "add" elements as needed to populate the form.
here is the code then I will explain my issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Dynamic Lists Demo</title>

<script src="http://www.google.com/jsapi"></script>
// Load jQuery
google.load("jquery", "1.4.2");

$('.add-product').live('click', function(){
var productContainer = $(this).parents('.product');
var newProduct = $(productContainer).clone();

var vendorProductContainer = $(productContainer).parents('.vendor-products');

return false;
$('.add-vendor').live('click', function(){
var vendorContainer = $(this).parents('.vendor');
//clone the vendor
var newVendor = $(vendorContainer).clone();

//remove all but the first products

return false;


var items = {};

var title = $(e).find('legend').html();
items[title] = {};
items[title]['category'] = $(e).find('.category').val();
items[title]['vendors'] = {};
var products = [];
var v = $(ve).find('.vendor-input').val() || 'vendor ' + (vi+1);

items[title]['vendors'][v] = products;


type: 'GET',
url: 'pageBuilder/builderAction.cfm?data=' + JSON.stringify(items),
dataType: 'html',
complete: function(data){


var item = $('.product-grouping:last').clone();
var itemIdx = $('.product-grouping').size() + 1;
$(item).find('legend').html('Item ' + itemIdx);

padding: 10px;


<form method="POST">
<div id="items">
<fieldset class="product-grouping">
<legend>Item 1</legend>
<!--- <div class="category-grouping">
<span>Category: </span>
<select class="category">

<option value="Books">Books</option>

<option value="Electronics">Electronics</option>

<option value="Music">Music</option>

<option value="Art">Art</option>

<option value="Clothing">Clothing</option>

</div> --->
<div class="vendor" style="padding-left: 30px;">
<span>Vendor: </span>
<input type="text" class="vendor-input" />
<a href="#" class="add-vendor">add vendor</a>

<div class="vendor-products" style="padding-left: 60px;">
<div class="product">
<span>Product: </span>
<input type="text" class="product-input" />
<a href="#" class="add-product">add product</a>


<input type="button" id="add-item" value="add item" />
<input type="button" id="submit" value="submit" />
<div id="results"></div>


here is the action:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<cfsetting showdebugoutput="false" />
<cfdump var="#deserializeJSON(url.data)#" />

As it is now, the results of the input fields just display on the page as a struct. What I want is for the values of the vendor and product input fields to display in another page already done, in an unordered list.

The vendor input values would be in a heading tag, then the product values would complete the list. A new item could then start a totally new list with vendor again being in a heading tag within the list, then the products finishing the rest of the list again. Here is an example of the list Im talking about:

<li><h2>vendor-input variable here</h2></li>
<li>product-input variable here</li>
<li>product-input variable here</li>
<li>product-input variable here</li>

<li><h2>Second vendor-input variable here</h2></li>
<li>Second product-input variable here</li>
<li>Second product-input variable here</li>
<li>Second product-input variable here</li>


The problem is I dont know how to pass jQuery variables to another page and then display them in html tags lol. I have never worked with client side scripting before. Whatever the variables of vendor input form and the product input form needs to be in the lists. I hope this makes sense. Sorry for being such a newb! lol Thanks for any help!