Well I know ajax does just that, it changes page data or whatever without making a new request to the server.

So with that said, I went back to the original example he gave me, changed the action.cfm to my builderAction.cfm and ran the script from there. Works just fine like that. It "adds" the list items like it should and "loads" my builderAction.cfm without a page refresh.

So, why then couldnt I take the code...jquery/ajax...out of that page, paste it into my template, using the same builderAction.cfm "action" within the ajax function, and display it that way.

lol no I wasn't trying to sound like you were trying to sound like I didnt know what ajax was for...lol

Sorry .. I'm brain dead today. Not sure what you mean by template. ie Are you talking about having everything (jquery and action) on the same page? That should work as long as you structure it correctly.

I think maybe therein lies the problem. My form submit button.

let me post the relavant parts of my template.cfm page. I guess when I said template, that was confusing. I should probably change that name.

Here is how I thought this would work with my CURRENT page and action page.

Here is the jQuery code. Notice the ajax function and the action page file its calling.

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

here is the form code on the same page template.cfm:

<form method="POST">
		<div id="items">
			<fieldset class="product-grouping">
				<legend>Item 1</legend>
											
				<div class="vendor" style="padding-left: 30px;">
					<span>Vendor: </span>
					<input type="text" class="vendor-input" name="vendor" />
					<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" name="product" />
							<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>

Now one thing I will mention is that I have other form elements on this page. Therefore, I think as you suggested, if I am trying to submit SOME form input elements as a regular form action post, and I have this ajax function that gets the data and displays it via a javascript button, I guess thats going to be in conflict.

Then finally here is my cfloop displaying the data on builderAction.cfm:

<cfoutput>
          <cfset results = deserializeJSON(url.data)>
          <!--- <cfdump var="#results#"> --->
          <cfloop collection="#results#" item="itemName">
            <cfset item = results[itemName]>
            <cfdump var="#item#" label="Item Name #itemName#">
            <cfloop collection="#item.vendors#" item="vendorName">
              <ul>
                <li>
                  <h2>#vendorName#</h2>
                </li>
                <cfset productArray = item.vendors[vendorName]>
                <!--- <cfdump var="#productArray#" label="Products for vendor: #vendorName#"> --->
                <cfloop array="#productArray#" index="productName">
                  <li>#productName#</li>
                </cfloop>
              </ul>
            </cfloop>
          </cfloop>
        </cfoutput>

Again, this whole thing works as long as I dont try to do it the old way as you said. When I use the original two files he gave me....objectTest.cfm and action.cfm....then it works.

Well I tried that.,...I think...lol. I clicked the ajax function button which outputted the "list" as needed, but then when I click my page submit button, I still got a data undefined error.

What I did though was I have this code/form inside my old form. That might make the difference. Still though, if my action page is looking for a vaque for the element of data, not sure that would work either. Gonna try anyway.

Nope....same error..lol

Pretty much the whole page is a form to submit cfinputs and pass the form values to my action page. I closed the cfform right before this jQuery form for the lists. So then I go down, populate my dynamic list, click submit, the values are displayed, then I lcick my page submit button.

hmmm...both submits action is to the builderAction.cfm. Maybe I need another "go between" action page?

No scratch that. The jQuery form action is the original action.cfm which just displays the results without a refresh. Then the page form action os to builderAction.cfm. I guess I need to somehow capture the values of the list, which I just thought would be straight html.

I really do appreciate how much you've helped me! lol I guess what I know in my head of how I want something to work....how I want one thing to work with another thing...here two different pieces and types of code, is one thing. Translating it to a forum like this so that someone would understand perfectly is another thing.

Ajax sends a complex structure -> URL.data[ItemName].vendorName ...etc...Your <form> sends simple strings -> FORM.vendor, FORM.product, etc..

Yes that makes sense and now that you explained it, I do understand the difference. I'll keep working on it for now. I may not know alot of code like this, but one thing I have learned is that almost nothing is impossible in coding of one form or another...lol There has to be a way.

Thanks again for all your patience and help!

lol will do. I actually went to houseoffusion.com and posted a thread with link to the application. I have a reply, but I hadnt uploaded my newest files, so did that and waiting to see what they say..lol

lol well if they are smarter than you and you are smarter than me...guess that makes me fairly dumb...hahaha

Yeah the guy that replied is actually a friend of a friend of mine....who was both our instructor at our local community college.

Ok I like the sound of that much better...lol

Ahh well maybe one day I can be somewhere in the middle...lol I dont set unreachable goals!

yes, the thread was marked solved. I didnt post my final code since it has sensitive material in it.