Page 1 of 1

Ajax advice needed - Add item to session, appears on screen

Posted: Wed Jul 23, 2014 5:35 am
by simonmlewis
I'm about to begin writing a page where customers can buy this particular item, but 'build' it entirely to their requirements.

ie. buying a car:
buy shell
select stereo
select steering wheel
select leather color
... and so on.

It will all be in the one screen. I can expanding and contract the levels that appear, but I need to be able to click one item from the list, and it "magically" appear via Ajax (I think?!) on the right. So at the end of the 'run', they see each of their items in a column on the right, taken from the lists on the left.

I'm thinking it would be added to a SESSION. But what I am not sure about is it to make it appear.
If there were say 10 lists of items to pick from, do I need 10 *.php files that run each result from the Ajax query?
If I do, I know how to make AJAX work via "on keyup" such as in a web site's search, but not how to do it it via a hyperlink, or even an onSubmit (if I faked a form button).

So here's lies my question:

Is my theory above a good way to do this?
If yes, how do I do it, specially with some form of onclick to send data to AJAX?

Many thanks.

Re: Ajax advice needed - Add item to session, appears on scr

Posted: Wed Jul 23, 2014 8:43 am
by simonmlewis
Am trying this, but because I am trying to use one Ajax query on essentially multiple forms, it's always posted the first form's data.

I need obviously to have a whole list of products I can post - does that mean I have to have dynamically created function sendRequest scripts too, or can one do all?

I wish this could go thru a <a href> but not sure how to yet.

Code: Select all

<script type="text/javascript" src="/js/ajaxfunction.js"></script>
		<script>
			function sendRequest() {
				new Ajax.Request("/test.php", 
					{ 
					method: 'post', 
					postBody: 'name='+ $F('name'),
					onComplete: showResponse 
					});
				}
			function showResponse(req){
				$('show').innerHTML= req.responseText;
			}
		</script>

	<table width='100%'>
	<tr><td>
	<div class='cat_prodlistbox'><img src='/images/productphotos/small/244045052833517383721template.jpg' /><a href='/product/549/Hardcore-Gaming/493/15Ghz-Machinesz/8/Test-SpecialvSub' title='Look at the Test SpecialvSub'><div class='box_description_preview'>
 <div class='cat_producttitle'>Test SpecialvSub</div>
 <div class='description_preview'>Inside the initmidating cooler Master 431 Plus case lurks a hefty Haswell i5 4670K processor overclocked up to 4.2Ghz for seriously impressive performance. An Nvidia GTX 760 takes on new games with ease at high settings while a solid 8GB of RAM keeps your gaming running ultra-smooth.</div>
  <div class='cat_producttitle'>Read more | Buy<br/></a>
  
  <form id='test8' onsubmit='return false;'>
			<input type='text' name='name' id='name' value='8'>
			<input type='submit' value='Add to Build' onClick="sendRequest()" class='btn_additem'>
		</form><div class='cat_prodlistbox'><img src='/images/productphotos/small/2470117383721template.jpg' /><a href='/product/549/Hardcore-Gaming/493/15Ghz-Machinesz/7/Test-Special' title='Look at the Test Special'><div class='box_description_preview'>
 <div class='cat_producttitle'>Test Special</div>
 <div class='description_preview'>Inside the initmidating cooler Master 431 Plus case lurks a hefty Haswell i5 4670K processor overclocked up to 4.2Ghz for seriously impressive performance. An Nvidia GTX 760 takes on new games with ease at high settings while a solid 8GB of RAM keeps your gaming running ultra-smooth.</div>
  <div class='cat_producttitle'>Read more | Buy<br/></a>
  
  <form id='test7' onsubmit='return false;'>
			<input type='text' name='name' id='name' value='7'>
			<input type='submit' value='Add to Build' onClick="sendRequest()" class='btn_additem'>
		</form></td><td><div id='show'></div></td></tr></table>