www.webdeveloper.com
Results 1 to 8 of 8

Thread: Ajax Question

  1. #1
    Join Date
    Feb 2004
    Posts
    92

    Ajax Question

    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:
    HTML Code:
    <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:

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

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by ukndoit View Post
    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?

  3. #3
    Join Date
    Feb 2004
    Posts
    92

    not sure

    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
    thx,
    Richard

  4. #4
    Join Date
    Feb 2004
    Posts
    92
    Ok, it is not working... here is one of my forms:

    HTML Code:
    <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:
    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
    thx,
    Richard

  5. #5
    Join Date
    Feb 2004
    Posts
    92
    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...

    Code:
    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
    thx,
    Richard

  6. #6
    Join Date
    Oct 2009
    Posts
    4
    I seem to remember having an issue similar to this. I solved it by changing this:

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

    Code:
     										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.

  7. #7
    Join Date
    Feb 2004
    Posts
    92
    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

    Quote Originally Posted by n0xx View Post
    I seem to remember having an issue similar to this. I solved it by changing this:

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

    Code:
     										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.
    thx,
    Richard

  8. #8
    Join Date
    Feb 2004
    Posts
    92
    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
    thx,
    Richard

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles