...

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



teedoff
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">
<html>
<head>

<title>Dynamic Lists Demo</title>

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

google.setOnLoadCallback(function(){
$(document).ready(function(){
$('.add-product').live('click', function(){
var productContainer = $(this).parents('.product');
var newProduct = $(productContainer).clone();
$(newProduct).find('.product-input').val('');

var vendorProductContainer = $(productContainer).parents('.vendor-products');
$(vendorProductContainer).append(newProduct);
$(productContainer).find('.add-product').hide();

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

//remove all but the first products
$(newVendor).find('.product:gt(0)').remove();

$(vendorContainer).after(newVendor);
$(newVendor).find('.add-product').show();
$(vendorContainer).find('.add-vendor').hide();
return false;
});

$('#submit').click(function(){
$('#results').html('Loading...');

var items = {};

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

$(ve).find('.product-input').each(function(pi,pe){
products.push($(pe).val());
});
items[title]['vendors'][v] = products;
});

});

$.ajax({
type: 'GET',
url: 'pageBuilder/builderAction.cfm?data=' + JSON.stringify(items),
dataType: 'html',
complete: function(data){
$('#results').html(data.responseText);
}
});

});

$('#add-item').click(function(){
var item = $('.product-grouping:last').clone();
$(item).find('.vendor:gt(0)').remove();
$(item).find('.product:gt(0)').remove();
$(item).find(':input').val('');
$(item).find('.add-product').show();
$(item).find('.add-vendor').show();
var itemIdx = $('.product-grouping').size() + 1;
$(item).find('legend').html('Item ' + itemIdx);
$('#items').append(item);
});

});
});
</script>
<style>
div{
padding: 10px;
}
</style>
</head>









<body>

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


</select>
</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>
</div>
</div>
</div>

</fieldset>
</div>

<input type="button" id="add-item" value="add item" />
<input type="button" id="submit" value="submit" />
</form>
<h1>Results:</h1>
<div id="results"></div>
</body>

</html>

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

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

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:


<ul>
<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>



</ul>
<ul>
<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>



</ul>

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum