a programing sequence logic by using AJAX, PHP

Hello

i want to implement an action sequence logic in  a program by using php and mysql.

The action order will be:

action1:
user choose a "month" from a drop down list ( Jan. Feb...).
say once Feb. is selected, then another drop down list will show up or be actived. it's a list of dates that AVAILABLE  for Feb, for example : 01, 05, 10, 12, 15...

action 2
user choose a "date" from drop down list. say the date is: 15
once "15" is selected,  then another drop down list will show up or be actived. it's a list of time that AVAILABLE for the date 15, for example : 2:00, 3:00, 3:15...

action 3
user choose a "time" from drop down list. say the date is: 2:00
once "2:00" is selected,  user can submit the form.

-----------------------------
My question is: the last two steps will do query from the database.
How many php files will be used for this sequence of  the 3 actions?
How the "date" drop down list and "time" drop down list should be used? disable first ? or another way ?

Someone suggest AJAX is a choice. well, i have never used it before.

Any suggestion or example is highly appreciated!

lilyyan
lilyyanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
You can use one file for everything, but it will easier to maintain if you put the "initial" interface on one file and the database logic on a separate file.
Here's a good AJAX tutorial:
http://www.w3schools.com/ajax/ajax_intro.asp

specifically, look at the portion where the DB backend is queried.
http://www.w3schools.com/ajax/ajax_xmlfile.asp

it has both ASP and PHP backend examples.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lilyyanAuthor Commented:
Hi, thanks very much for your reply.

I could use three php files for each action right? in that way, I don't need use AJAX, right?
since i'm new to ajax
0
hieloCommented:
Yes, you could, but if you choose this route, on every step you would submit data to the server and keep track of the previous step/state so you know where you are. If you go the AJAX route, the user's browser will not be "refreshing" unnecessarily. You will "refresh" the content "silently" on the background.
You can still do this the way you want, but I think it will be more complicated. I'll work on something and post it later.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

lilyyanAuthor Commented:
GREAT! Thanks very much! :D
0
hieloCommented:
Create a new folder and store the three files below. Then load lilyyan.html. I only coded the second option of each dropdown. You would need to fill in the rest in lilyyan.php. Ultimately, the user would submit the form to process.php where you can do whatever you want with the data.
//process.php
<?php
echo("Data Received:");
foreach( $_POST as $k => $v)
{
	echo($k."==".$_POST[$k] . "<br/>");
}
?>
 
 
//lilyyan.php
<?php
if( isset($_REQUEST["action"]) )
{
	switch( strval($_REQUEST["action"]) )
	{
		case "step1":
			processStep1();
			break;
 
		case "step2"://Show data based on selected month from previous step
			processStep2();
			break;
 
		case "step3"://show time based on Date from previous step
			processStep3();
			break;
	}
}
 
function processStep1()
{
			print "Select a Month:
				<select name='action1' id='action1' onchange='fetchData(\"lilyyan.php?action=step2&selection=\"+this.value,\"step2\")'>
					<option value='1'>Jan</option>
					<option value='2'>Feb</option>
					<option value='3'>Mar</option>
					<option value='4'>Apr</option>
					<option value='5'>May</option>
					<option value='6'>Jun</option>
					<option value='7'>Jul</option>
					<option value='8'>Aug</option>
					<option value='9'>Sep</option>
					<option value='10'>Oct</option>
					<option value='11'>Nov</option>
					<option value='12'>Dec</option>
				</select>
			";
 
}
 
function processStep2()
{
			switch( strval($_REQUEST['selection']) )
			{
				case "1"://what to do when user selects 'Jan'
					break;
				case "2"://what to do when user selects 'Feb'
					print "Select a Date:
					<select name='action2' onchange='fetchData(\"lilyyan.php?action=step3&selection=\"+this.value,\"step3\")'>
						<option value='01'>01</option>
						<option value='05'>05</option>
						<option value='10'>10</option>
						<option value='12'>12</option>
						<option value='15'>15</option>
					</select>
					";
					break;
 
				case "3"://what to do when user selects 'Mar'
					break;
			}
 
}
 
function processStep3()
{
			switch( strval($_REQUEST['selection']) )
			{
				case "01"://what to do when user selects 'Jan'
					break;
				case "05"://what to do when user selects 'Feb'
					print "Select a Time:
					<select name='action3' onchange='fetchData(\"lilyyan.php?action=step3&selection=\"+this.value,\"step3\")'>
						<option value='8'>08:00 am</option>
						<option value='14'>02:00pm</option>
					</select>
					";
					break;
 
				case "10"://what to do when user selects 'Mar'
					break;
			}
}
?>
 
 
 
lilyyan.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"><!--
var xmlHttp=null;
 
function fetchData(url,targetElem)
{
 
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Your browser does not support AJAX!");
	return false;
	}
	//add random number to avoid cached data
	if( -1==url.indexOf("?") )
		url += "?sid="+Math.random();
	else
		url=url+"&sid="+Math.random();
		
	xmlHttp.onreadystatechange=function(){stateChanged(targetElem);};
	xmlHttp.open("GET",url,true);
	xmlHttp.send('');
}
 
function stateChanged(containerElem) 
{ 
	if (xmlHttp.readyState==4)
	{
		switch(containerElem)
		{
			case "step1": 
				document.getElementById(containerElem).innerHTML = (xmlHttp.status==200) ? xmlHttp.responseText : "Request Status: " + xmlHttp.status ;
				break;
			case "step2": 
				document.getElementById(containerElem).innerHTML = (xmlHttp.status==200) ? xmlHttp.responseText : "Request Status: " + xmlHttp.status ;
				break;
			case "step3": 
				document.getElementById(containerElem).innerHTML = (xmlHttp.status==200) ? xmlHttp.responseText : "Request Status: " + xmlHttp.status ;
				document.getElementById("buttons").innerHTML="<input type='submit' name='action' value='Send'/>";
				break;
		}
		xmlHttp=null;
	}
}
function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
return xmlHttp;
}
 
window.onload = init;
function init()
{
	fetchData("lilyyan.php?action=step1","step1")
}
//--></script>
</head>
<body>
<form action='process.php' method='post'>
	<div id="step1"></div>
	<div id="step2"></div>
	<div id="step3"></div>
	<div id="buttons"></div>
</form>
</body>
</html>

Open in new window

0
lilyyanAuthor Commented:
Hi hielo:

SO COOL !! I will study the code today : ) Thanks !!
0
hieloCommented:
>> I will study the code today
It will be a lot easier if you use firefox with the Firebug extension installed. The firebug extension let's you see what data that goes back and forth due to the AJAX requests.
0
lilyyanAuthor Commented:
Thanks so much !! i am trying to practice and de-code your program, so that i can understand more...
0
hieloCommented:
Well, here is my recommendation. Install the Firebug  extension. It allows you to see the AJAX requests, meaning, you will notice what data is being sent to the server and what data the server sends back to the browser for every AJAX request. But to give you a heads up here is what it is doing:
1. User loads "empty" HTML file. meaning, no dropdown list
2. As soon as the HTML finishes loading, and AJAX request is made to the server to retrieve first selct list
3. The server sees the request, determines which list to send based on the value of the "action" parameter. The response contains the full HTML code for the select list, which also contains the "onchange" attribute so that when the browser receives that <select> list and appends it to the original HTML file, it will be set up to take react to the differect option selection.
4. The client receives the server response and updates the pertaining div with the <select> list.
5. The process basically is the same as user begins selecting from the lists.
0
lilyyanAuthor Commented:
Hi, appreciate your response!

i found i need step by step to undersatnd the code and got severl questions ...

in the html form file, in the js code
-------------------------
Q1:
window.onload = init;  
function init(){ ...}  // these two lines will be executed automatically ? i'm wondering how step1 was
                             //triggered

Q2:
<select name='action1' id='action1' onchange='fetchData(\"lilyyan.php?action=step2&selection=\"+this.value,\"step2\")'>    //in this line, it seems there is a double quotation mark
                                                                                 //missing after this.value ?

Q3:
in the process.php file
foreach( $_POST as $k => $v)  // may you explain $k=>$v a little bit?

Q4:
XMLHttp.status==200  // means ?

Thank you so much for your reply!  Wish you a great weekend !








0
hieloCommented:
>>Q1...
I defined a function named "init", but you could have named your function whatever you want. As soon as the browser finishes loading all the necessary content it will call the function that window.onload is "pointing" to. That's why I assign it afunctin reference:
window.onload = init;  
basically I am sayinig "window.onload points to init". Notice that I am not "calling" init.
window.onload = init();//WRONG! This is a function call! What you need to do is a assign a referenct to the function to window.onload so that when the window finishes loading the init function will be called.
So, to answer your question init will be the first two begin the action, but it will happen as soon as all the content is loaded on the window

>>Q2. //in this line, it seems there is a double quotation mark missing after this.value ?
NO. Basically, this is what the browser is receiving:
... onchange='fetchData("lilyyan.php?action=step2&selection="+this.value,"step2") ...
The first argument of the fetchData function should be a string similar to:
lilyyan.php?action=step2&selection=3
but since the selection will vary, I am only supplying:
lilyyan.php?action=step2&selection=
and then use the following javascript snippet:
+ this.value
to "retrieve the value of the selected option", to basically "complete the url". So if the user selects Dec, the url passed to the function will be:
lilyyan.php?action=step2&selection=12

>>Q3: may you explain $k=>$v a little bit?
Since there are various ways in which you can use the foreach, I think you should consult the manual. It does an excellent at explaining it, plus there are lots of examples:
http://us3.php.net/foreach

>>Q4. XMLHttp.status==200  // means ?
After the server sends the file to the remote system that asked for the file, the user browser will send a "status code". 200 means the file was found and sent to the requestor with no problems. To clarify matters, let's say you mistyped the the url of the page that will provide the data to your ajax application with the name of a file that does not exist on the server. When that is the case, the server will typically respond with a "File not found" message AND a status code of 404. If you see 404, then that means that you (the ajax programmer)  did not provide the correct url to retrieve the data from. The various status codes are here:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

If nothing else, at least read through the 400 and 500 error code families.
0
lilyyanAuthor Commented:
hello, thank you so much for your instruction !! i am on the way using ajax, php, plsql for a db application... will post questions in another thread.

appreciate  again!
0
lilyyanAuthor Commented:
GREAT !!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.