Ajax Question

[ukndoit]

I am working on our Shopping cart, still...
I am wondering how the best way to do this is:

There are upto 20 different products that will be displayed in our shopping cart, so I create up to 20 different forms, all of them in their own table,
the form 'name' is in this format: insert$prod->{productid}form
where the product id is all numbers, and all unique.

So, how could I use the getElementByName("") function, if their are many different names of forms?
What I am working on doing is have it load a function like this:

<input type="submit" value="Add" onclick="javascript:addProd('insert$in{pcode}form','f$_itemNSName');">

Where f$_itemNSName is the id of the form so I can have ajax replace that form with an update form.

then in addProd I do this:

function addProd(formName,formId) {

	request = createRequest();
	if(request == null) {
 		alert("Unable to Create Request"); return;
 	}
  var nocache = new Date();//fix for IE who keeps the requested file in cache
  var pcode = document.formName.pcode.value;
  var qty = document.formName.qty.value;
  var url = "index.cgi?pg=product_line_ajaxv&view=addProd&productid=" + pcode + "&qty=" + qty + "&finame=" + formId + '&stopIEcache=' + nocache;
	request.open("GET",url,true);
	request.onreadystatechange = rebuildProduct(formId);
	request.send(null);
}

I am not done writing all the code, am I on the right track?
or is there a way with multiple forms to use getElementByName? or even a better way?

thank you,
Richard

[Kor]

There are upto 20 different products that will be displayed in our shopping cart, so I create up to 20 different forms, all of them in their own table

I doubt this is the right approach. Wouldn't have been a single form enough?

[ukndoit]

Well, each product has a different amount that the member is allowed to buy, we limit the products because of fraud, we have over 50k members, and we do not have a large enough profit margin to get past huge fraudulent orders, so we limit some products to no more than 12, some no more than 6 some no more than 3, some no more than 1. One of them is a Global Cash Card, which we limit them to one at a time and no more than 5, so by having them load one item at a time to the shopping cart, I validate they can have it and so forth, much easier.

I have had a lot of members ask me if we can make a way for the cart to be more seemless, a few have requested 1 form with quantities they can type in, I supposed I could make it to where each quantity used the drop down I make for each unique form and product.

I am almost done with the form, and will test it to see if it works.
If I have any errors I'll see if I can fix them, if not, I'll see if anyone on here can point me why the error happened.
Thank you again.
Richard

[ukndoit]

Ok, it is not working... here is one of my forms:

<form method="post" action="javascript:void();" enctype="multipart/form-data" onsubmit="return false;" name="updateProdsku1form">
<input type="hidden" name="pg" value="product_line_ajaxv"  />
<input type="hidden" name="view" value="addProd"  />
<input type="hidden" name="pcode" value="WDS502"  />
					<td align="center" class="non_label_cell_center" width="100&#37;" style="padding: 6px;">
						<select name="qty"  class="formfield">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select> <span id="fWithandWithOutDoubleEnzymePackage"><input type="submit" name="choice" value="Add" style="font-size: 8px;" onclick="javascript:addProd(document.updateProdsku1form,'fWithandWithOutDoubleEnzymePackage','WDS502','document.updateProdsku1form.qty.value');" class="submit" /></span>
					</td></form>

Here is my javascript code:

function createRequest() {
	try {
		request = new XMLHttpRequest();
	} catch (tryMS) {
		try {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (otherMS) {
			try {
				request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
				request = null;
			}
		}
	}
	return request;
}


function addProd(formName,buttonId,pcode,qty) {
	request = createRequest();
	if(request == null) {
 		alert("Unable to Create Request");
 		return;
 	}
  var nocache = new Date();//fix for IE who keeps the requested file in cache
  var url = "index.cgi?pg=product_line_ajaxv&view=addProd&pcode=" + pcode + "&qty=" + qty + "&finame=" + buttonId + '&stopIEcache=' + nocache;
	request.open("GET",url,true);
	request.onreadystatechange = rebuildProduct(buttonId);
	request.send(null);
}

function rebuildProduct(buttonId) {
	if(request.readyState == 4) {
		if(request.status == 200) {
			detailDiv = document.getElementById(buttonId);
			detailDiv.innerHTML = request.responseText;
		}
	}
}

Here is the error my page gets when I click the Add button:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3)
Timestamp: Wed, 18 Nov 2009 17:14:06 UTC


Message: Not implemented

Line: 186
Char: 2
Code: 0
URI: https://www.domainnamehidden.com/ind...uct_line_ajaxv

can someone help me figure out what I'm doing wrong here?
Thank you,
Richard

[ukndoit]

Ok, it appears to be in the last function, I put some alerts in there to see where it gets before it prints an error...

function addProd(fnm,buttonId,pcode,qty1) {
	request = createRequest();
	if(request == null) {
 		alert("Unable to Create Request");
 		return;
 	}
 	var formn = document.getElementById(fnm);
	alert('made it to line: 155; req: ' + request);
  var nocache = new Date();//fix for IE who keeps the requested file in cache
																																				 	alert('made it to line: 157');
  var url = "index.cgi?pg=product_line_ajaxv&view=addProd&pcode=" + pcode + "&qty=" + qty1 + "&finame=" + buttonId + "&stopIEcache=" + nocache;
alert('made it to line: 159; urlis: ' + url);
	request.open("GET",url,true);
 										alert('made it to line: 161');
	request.onreadystatechange = rebuildProduct(buttonId);
									 	alert('made it to line: 163');
	request.send(null);
}

function rebuildProduct(buttonId) {
 	alert('made it to line: 168; ' + request.readyState + "; ButtonIdPassed: " + buttonId);
	if(request.readyState == 4) {
	 	alert('made it to line: 170');
		if(request.status == 200) {
 			alert('made it to line: 172');
			detailDiv = document.getElementById(buttonId);
 			alert('made it to line: 174');
			detailDiv.innerHTML = request.responseText;
 			alert('made it to line: 176' + request.responseText);
		}
	}
}

It makes it all the way to the "made it to line: 168", but it does not go inside there.
and I get that Not Implemented error.

Anyone know what causes that?

Thanks,
Richard

[n0xx]

I seem to remember having an issue similar to this. I solved it by changing this:

 										alert('made it to line: 161');
	request.onreadystatechange = rebuildProduct(buttonId);
									 	alert('made it to line: 163');

to this:

 										alert('made it to line: 161');
	request.onreadystatechange = rebuildProduct;
									 	alert('made it to line: 163');

I'm not sure why, someone else can probably clarify better, but onreadystatechange cannot have parenthesis at the end of the function assigned to it. You'll need to find another way to pass your 'buttonId' variable.

[ukndoit]

I sort of thought so, however, the buttonId is the name of the span tag to replace the button with that the index.cgi script will rebuild, so if it does not pass the buttonId, then it would not update the submit button from 'Add' to 'Update'.

How could I pass it, if not the way I tried?

Anyone have any idea?
Thanks,
Richard

I seem to remember having an issue similar to this. I solved it by changing this:

 										alert('made it to line: 161');
	request.onreadystatechange = rebuildProduct(buttonId);
									 	alert('made it to line: 163');

to this:

 										alert('made it to line: 161');
	request.onreadystatechange = rebuildProduct;
									 	alert('made it to line: 163');

I'm not sure why, someone else can probably clarify better, but onreadystatechange cannot have parenthesis at the end of the function assigned to it. You'll need to find another way to pass your 'buttonId' variable.

[ukndoit]

I got it.... I just had the onclick change the value from Add to Added then to Update.

That works now... Fantastic.

thank you much.
Richard