Javascript/Ajax issue

Expand Post »

Hi All,

Alright i am developing an application which is using ajax.

First of all there is a select box which is getting populated from db for a category ... now user can select one or more values from first select box ....

and there are four buttons for different categories ..... also i am using four buttons for selecting all, selecting one, removing one and removing all .....

once user selects an entry in select box and clicks the select button that value goes to the first div (using innerHtml) .....

now when user clicks on category second .... the first select box gets populated with values from db corresponding to the value in the first text box .... again user can select from these new values using select button ... which will go to the second div ..... and so on till the fourth category ....

all these values are being sent to next page for further calculations .......
i really don't know if its making any sense .... i hope it is ......

now everything is working fine except that since i am using a div
its not letting me deselect values ..... so i wanted that the values should go to corresponding select boxes instead of div's ......

here's the code for all the files .......

Please help me out ..... or even if someone can point in the right direction !!

page1.php

php Syntax (Toggle Plain Text)
<html>
<head>
<?php
$host = "127.0.0.1";
$user = "root";
$pass = "";
 
$connection = mysql_connect($host,$user,$pass) or die (mysql_errno().": ".mysql_error()."<BR>");
 
$dbname = "testview_flowview";
mysql_select_db($dbname);
 
	$id_facility=$_POST["id_facility"];
	$id_ValueSstream=$_POST["id_ValueSstream"];
	$id_Process=$_POST["id_Process"];
	$id_resource=$_POST["id_resource"];
	$endtime1=$_POST["endtime1"];
	$endtime2=$_POST["endtime2"];
	$entrydate1=$_POST["entrydate1"];
	$entrydate2=$_POST["entrydate2"];
	$starttime1=$_POST["starttime1"];
	$starttime2=$_POST["starttime2"];
	$graphplots=$_POST["checkbox1"];
	if (trim($graphplots)!="")
	{
		$graphplots1=$_POST["ddl_options" . trim($graphplots)];
	}
	$timeseries=$_POST["checkbox2"];
?>
 
 
</head>
<body id="mainbody">
<center>
<form name="form1" method="post" action="">
<input type="hidden" name="processstep" value="1">
<div id="div_Title">Test</div>
<div id="maindiv">
	<div id="page1_listbox1_title" style="position:absolute;top:20px;left:50px;height:20px;width:100px;text-align:left;">Facility</div>
	<div style="position:absolute;top:45px;left:50px;width:100px;">
		<select name="listbox1" size="10" style="width:100px;" multiple="multiple">
		<?php
		$sql = "select * from facility";
		$query = mysql_query($sql);
 
		while ($row = mysql_fetch_array($query))
		{
			echo "<option value='".$row['facility_id']."'>".$row['facility_name']."</option>";
		}
 
		?>
		</select>
	</div>
	<div style="position:absolute;top:45px;left:150px;width:100px;">
		<!--<input type=button name="selectall" value=" >> " style="width:50px;"><br>-->
		<input type="button" name="selectall" value=" >> " style="width:50px;" title="Select All" onClick="return onSelectallclick();"><br><br>
		<input type="button" name="selectone" value=" > " style="width:50px;" title="Select One" onClick="return onSelectclick();"><br><br>
		<input type="button" name="removeall" value=" << " style="width:50px;" title="Remove All" onClick="return onRemoveallclick();"><br>
		<!--<input type=button name="removeall" value=" << " style="width:50px;"><br>-->
	</div>
 
	<script language="javascript" type="text/javascript">
	function onRemoveallclick()
	{
   		if (form1.processstep.value=="1")
  		{
			obj=document.getElementById("txt_Facility");
			obj.innerHTML="";
			form1.id_facility.value="";
		}
 
   		if (form1.processstep.value=="2")
  		{
			obj=document.getElementById("txt_ValueStream");
			obj.innerHTML="";
			form1.id_ValueSstream.value="";
		}
   		if (form1.processstep.value=="3")
  		{
			obj=document.getElementById("txt_Process");
			obj.innerHTML="";
			form1.id_Process.value="";
		}
   		if (form1.processstep.value=="4")
  		{
			obj=document.getElementById("txt_Resource");
			obj.innerHTML="";
			form1.id_resource.value="";
		}
	}
 
	function onSelectallclick()
	{
		var i;
		var s,s1;
		s="";
		s1="";
 
		for (i=0;i<=form1.listbox1.options.length-1;i++)
		{
   			if (s!="")
   				s=s + ",";
   			s=s+form1.listbox1.options[i].text;
 
   			if (s1!="")
   				s1=s1 + ",";
   			s1=s1+form1.listbox1.options[i].value;
    	}
 
   		if (form1.processstep.value=="1")
  		{
			obj=document.getElementById("txt_Facility");
			obj.innerHTML=s;
			form1.id_facility.value=s1;
		}
 
   		if (form1.processstep.value=="2")
  		{
			obj=document.getElementById("txt_ValueStream");
			obj.innerHTML=s;
			form1.id_ValueSstream.value=s1;
		}
   		if (form1.processstep.value=="3")
  		{
			obj=document.getElementById("txt_Process");
			obj.innerHTML=s;
			form1.id_Process.value=s1;
		}
   		if (form1.processstep.value=="4")
  		{
			obj=document.getElementById("txt_Resource");
			obj.innerHTML=s;
			form1.id_resource.value=s1;
		}
	}
 
	function onSelectclick()
	{
		var i;
		var s,s1;
		s="";
		s1="";
 
		for (i=0;i<=form1.listbox1.options.length-1;i++)
		{
    	   if (form1.listbox1.options[i].selected)
    	   {
   	   			if (s!="")
   	   				s=s + ",";
   	   			s=s+form1.listbox1.options[i].text;
 
   	   			if (s1!="")
   	   				s1=s1 + ",";
   	   			s1=s1+form1.listbox1.options[i].value;
    	   }
    	}
 
   		if (form1.processstep.value=="1")
  		{
			obj=document.getElementById("txt_Facility");
			obj.innerHTML=s;
			form1.id_facility.value=s1;
		}
   		if (form1.processstep.value=="2")
  		{
			obj=document.getElementById("txt_ValueStream");
			obj.innerHTML=s;
			form1.id_ValueSstream.value=s1;
		}
   		if (form1.processstep.value=="3")
  		{
			obj=document.getElementById("txt_Process");
			obj.innerHTML=s;
			form1.id_Process.value=s1;
		}
   		if (form1.processstep.value=="4")
  		{
			obj=document.getElementById("txt_Resource");
			obj.innerHTML=s;
			form1.id_resource.value=s1;
		}
 
	}
 
	function btnFacilityclick()
	{
		document.form1.processstep.value="1";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Facility";
		ajaxFunction("1");
	}
 
	function btnValuestreamclick()
	{
		if (form1.id_facility.value=="")
		{
			alert("Please select facility");
			return false;
		}
		document.form1.processstep.value="2";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Value Stream";
		ajaxFunction("2");
	}
 
	function btnProcessclick()
	{
		if (form1.id_ValueSstream.value=="")
		{
			alert("Please select Value stream");
			return false;
		}
		document.form1.processstep.value="3";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Process";
		ajaxFunction("3");
	}
 
	function btnResourceclick()
	{
		if (form1.id_Process.value=="")
		{
			alert("Please select Process");
			return false;
		}
		document.form1.processstep.value="4";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Resource";
		ajaxFunction("4");
	}
	</script>
 
<?php
 
	$name_facility="";
	if (trim($id_facility)!="")
	{
		$sql="select * from facility where facility_id in (" .  $id_facility . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_facility)<>"")
				$name_facility=$name_facility . ";";
			$name_facility=$name_facility . $row['facility_name'] . " ";
		}
 
	}
 
	$name_ValueSstream="";
	if (trim($id_ValueSstream)!="")
	{
		$sql="select * from facility_stream where stream_id in (" . $id_ValueSstream . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_ValueSstream)<>"")
				$name_ValueSstream=$name_ValueSstream. ";";
			$name_ValueSstream=$name_ValueSstream . $row['stream_name'] . " ";
		}
	}
 
	$name_Process="";
	if (trim($id_Process)!="")
	{
		$sql="select * from facility_process where process_id in (" . $id_Process . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_Process)<>"")
				$name_Process=$name_Process . ";";
			$name_Process=$name_Process . $row['process_name'] . " ";
		}
	}
 
	$name_resource="";
	if (trim($id_resource)!="")
	{
		$sql="select * from facility_resource where resource_id in (" . $id_resource . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_resource)<>"")
				$name_resource=$name_resource . ";";
			$name_resource=$name_resource . $row['resource_name'] . " ";
		}
	}
 
?>
	<div style="position:absolute;left:300px;top:45px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_facility" value="Facility" title="Click To Select Facility" style="position:ablolute;left:0px;top:0px;width:200px;height:50px;" onClick="return btnFacilityclick();">
		</div>
		<div id="txt_Facility" style="position:absolute;left:230px;top:0px;width:250px;height:50px;border:solid 1px #000000;">
		<?php echo $name_facility;  ?></div>
		<input type="hidden" name="id_facility" value="<?php echo $id_facility; ?>">
	</div>
 
	<div style="position:absolute;left:300px;top:100px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_ValueStream" value="Value Stream" title="Click To Select Value Stream" style="position:absolute;left:0px;top:0px;width:200px;height:50px;" onClick="return btnValuestreamclick();">
		</div>
		<div id="txt_ValueStream" style="position:absolute;left:230px;top:0px;width:250px;height:50px;border:solid 1px #000000;"><?php echo $name_ValueSstream; ?></div>
		<input name="id_ValueSstream" value="<?php echo $id_ValueSstream; ?>" type=hidden>
	</div>
 
	<div style="position:absolute;left:300px;top:160px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_Process" value="Process" title="Click To Select Process" style="position:ablolute;left:0px;top:0px;width:200px;height:50px;" onClick="return btnProcessclick();">
		</div>
		<div id="txt_Process" style="position:absolute; width:250px;height:50px;border:solid 1px;top:0px;left:230px;"><?php echo $name_Process; ?></div>
		<input name="id_Process" value="<?php echo $id_Process; ?>" type="hidden">
	</div>
 
	<div style="position:absolute;left:300px;top:220px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_Resource" value="Resource" title="Click To Select Resource" style="width:200px;height:50px;" onClick="return btnResourceclick();">
		</div>
		<div id="txt_Resource" style="position:absolute; width:250px;height:50px;border:solid 1px;top:0px;left:230px;" onClick="return btnResourceclick();"><?php echo $name_resource; ?></div>
		<input name="id_resource" value="<?php echo $id_resource; ?>" type="hidden">
	</div>
 
	<div style="position:absolute;left:300px;top:350px;width:300px;height:30px;text-align:left;">
		<font size=2><strong>Start:</strong>&nbsp;&nbsp;</font>
		<script language="javascript">cal1.writeControl(); cal1.dateFormat="yyyy-MM-dd";</script>&nbsp;&nbsp;&nbsp;
		<input type="text" name="starttime1" size=2 value="<?php echo $starttime2; ?>" maxlength="2"><b>:</b><input type="text" name="starttime2" size=2 value="00" maxlength="2">
	</div>
	<div style="position:absolute;left:307px;top:380px;width:300px;height:30px;text-align:left;">
		<font size=2><strong>End:</strong>&nbsp;&nbsp;</font><script language="javascript">cal2.writeControl(); cal2.dateFormat="yyyy-MM-dd";</script>&nbsp;&nbsp;&nbsp;
		<input type="text" name="endtime1" size=2 value="<?php echo $endtime2; ?>" maxlength="2"><b>:</b><input type="text" name="endtime2" size=2 value="00" maxlength="2">
	</div>
 
	<div style="position:absolute;left:300px;top:450px;width:200px;height:50px;border:solid 0px;">
		<input type="button" name="btn_option" value="Option" style="width:200px;height:50px;" onClick="return btnOptionClick();">
	</div>
	<div style="position:absolute;left:500px;top:450px;width:200px;height:50px;border:solid 0px;">
		<input type="button" name="btn_ok" value="Generate Report" style="width:200px;height:50px;" onClick="return btnOKClick();" <?php if ((trim($graphplots)=="") && (trim($timeseries)=="")) echo "disabled"; ?>>
	</div>
	<div style="position:absolute;left:500px;top:510px;width:200px;height:50px;border:solid 0px;">
		<input type="button" name="btn_cancel" value="Cancel" style="width:200px;height:50px;">
	</div>
</div>
 
<script language="javascript" type="text/javascript">
function btnOptionClick()
{
	form1.action="page3.php";
	form1.submit();
}
 
function btnOKClick()
{
	if (form1.id_Process.value=="")
	{
		alert("Please select Process");
		return;
	}
	if (form1.entrydate1.value=="")
	{
		alert("Please select date");
		return;
	}
	if (form1.entrydate2.value=="")
	{
		alert("Please select data");
		return;
	}
 
	form1.action="page2.php";
	form1.submit();
}
 
		function ajaxFunction(t)
		{
			  var xmlHttp;
			  try
			  {    // Firefox, Opera 8.0+, Safari
			  	   xmlHttp=new XMLHttpRequest();
			  }
			  catch (e)
			  {    // Internet Explorer
			  	  try
			  	  {
			  	  	 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			  	  }
	    	      catch (e)
			      {
	        	     try
	           		 {
           	   			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	           		 }
	           		 catch (e)
	           		 {
	           	  		alert("Your browser does not support AJAX!");
             	  		return false;
	           		 }
	          	  }
	    	  }
 
 
       		while (form1.listbox1.options.length>0)
    		   form1.listbox1.options[0]=null;
			  var u;
			  if(t=="1")
			     u="getparams.php?mode=1";
			  else if(t=="2")
			  	 u="getparams.php?mode=2&param1="+form1.id_facility.value;
			  else if(t=="3")
			  	 u="getparams.php?mode=3&param1="+form1.id_ValueSstream.value;
			  else if(t=="4")
			  	 u="getparams.php?mode=4&param1="+form1.id_Process.value;
 
 
			  if(u!="")
			  {
			      xmlHttp.open("GET",u,true);
 
			  }
 
			 xmlHttp.onreadystatechange=function()
	    	  {
	         		//if(xmlHttp.readyState==4)
	         		var b=false
	         		try
	         		{
	         			if (xmlHttp.status==200)
	         				b=true;
	         		}
	         		catch(e)
	         		{
	         			try
	         			{
	         				if (xmlHttp.readyState==4)
	         				   b=true
	         			}
	         			catch(e)
	         			{
 
	         			}
	         		}
 
	         		if (b==true)
	         		{
	         		    var s;
             			var arr=new Array();
	             		s=xmlHttp.responseText;
 
	             		//s=s.replace(/^\s+|\s+$/g, '') ;
 
               			if (s=="") return;
 
 
	           			arr=s.split("|");
 
		         		while (form1.listbox1.options.length>0)
			     		   form1.listbox1.options[0]=null;
 
              			j=0;
		               	for (i=arr.length-2;i>=0;i--)
		                {
		                  	 s=arr[i];
							 arr1=s.split("-");
							 o=new Option(arr1[1],arr1[0]);
							 form1.listbox1.options[j]=o;
							 j++;
		                }
			        }
			  }
 
			   xmlHttp.send(null); 
		}
 
		</script>
 
</form>
</center>
</body>
</html>
<html>
<head>
<?php
$host = "127.0.0.1";
$user = "root";
$pass = "";

$connection = mysql_connect($host,$user,$pass) or die (mysql_errno().": ".mysql_error()."<BR>");

$dbname = "testview_flowview";
mysql_select_db($dbname);

	$id_facility=$_POST["id_facility"];
	$id_ValueSstream=$_POST["id_ValueSstream"];
	$id_Process=$_POST["id_Process"];
	$id_resource=$_POST["id_resource"];
	$endtime1=$_POST["endtime1"];
	$endtime2=$_POST["endtime2"];
	$entrydate1=$_POST["entrydate1"];
	$entrydate2=$_POST["entrydate2"];
	$starttime1=$_POST["starttime1"];
	$starttime2=$_POST["starttime2"];
	$graphplots=$_POST["checkbox1"];
	if (trim($graphplots)!="")
	{
		$graphplots1=$_POST["ddl_options" . trim($graphplots)];
	}
	$timeseries=$_POST["checkbox2"];
?>


</head>
<body id="mainbody">
<center>
<form name="form1" method="post" action="">
<input type="hidden" name="processstep" value="1">
<div id="div_Title">Test</div>
<div id="maindiv">
	<div id="page1_listbox1_title" style="position:absolute;top:20px;left:50px;height:20px;width:100px;text-align:left;">Facility</div>
	<div style="position:absolute;top:45px;left:50px;width:100px;">
		<select name="listbox1" size="10" style="width:100px;" multiple="multiple">
		<?php
		$sql = "select * from facility";
		$query = mysql_query($sql);

		while ($row = mysql_fetch_array($query))
		{
			echo "<option value='".$row['facility_id']."'>".$row['facility_name']."</option>";
		}

		?>
		</select>
	</div>
	<div style="position:absolute;top:45px;left:150px;width:100px;">
		<!--<input type=button name="selectall" value=" >> " style="width:50px;"><br>-->
		<input type="button" name="selectall" value=" >> " style="width:50px;" title="Select All" onClick="return onSelectallclick();"><br><br>
		<input type="button" name="selectone" value=" > " style="width:50px;" title="Select One" onClick="return onSelectclick();"><br><br>
		<input type="button" name="removeall" value=" << " style="width:50px;" title="Remove All" onClick="return onRemoveallclick();"><br>
		<!--<input type=button name="removeall" value=" << " style="width:50px;"><br>-->
	</div>

	<script language="javascript" type="text/javascript">
	function onRemoveallclick()
	{
   		if (form1.processstep.value=="1")
  		{
			obj=document.getElementById("txt_Facility");
			obj.innerHTML="";
			form1.id_facility.value="";
		}

   		if (form1.processstep.value=="2")
  		{
			obj=document.getElementById("txt_ValueStream");
			obj.innerHTML="";
			form1.id_ValueSstream.value="";
		}
   		if (form1.processstep.value=="3")
  		{
			obj=document.getElementById("txt_Process");
			obj.innerHTML="";
			form1.id_Process.value="";
		}
   		if (form1.processstep.value=="4")
  		{
			obj=document.getElementById("txt_Resource");
			obj.innerHTML="";
			form1.id_resource.value="";
		}
	}

	function onSelectallclick()
	{
		var i;
		var s,s1;
		s="";
		s1="";

		for (i=0;i<=form1.listbox1.options.length-1;i++)
		{
   			if (s!="")
   				s=s + ",";
   			s=s+form1.listbox1.options[i].text;

   			if (s1!="")
   				s1=s1 + ",";
   			s1=s1+form1.listbox1.options[i].value;
    	}

   		if (form1.processstep.value=="1")
  		{
			obj=document.getElementById("txt_Facility");
			obj.innerHTML=s;
			form1.id_facility.value=s1;
		}

   		if (form1.processstep.value=="2")
  		{
			obj=document.getElementById("txt_ValueStream");
			obj.innerHTML=s;
			form1.id_ValueSstream.value=s1;
		}
   		if (form1.processstep.value=="3")
  		{
			obj=document.getElementById("txt_Process");
			obj.innerHTML=s;
			form1.id_Process.value=s1;
		}
   		if (form1.processstep.value=="4")
  		{
			obj=document.getElementById("txt_Resource");
			obj.innerHTML=s;
			form1.id_resource.value=s1;
		}
	}

	function onSelectclick()
	{
		var i;
		var s,s1;
		s="";
		s1="";

		for (i=0;i<=form1.listbox1.options.length-1;i++)
		{
    	   if (form1.listbox1.options[i].selected)
    	   {
   	   			if (s!="")
   	   				s=s + ",";
   	   			s=s+form1.listbox1.options[i].text;

   	   			if (s1!="")
   	   				s1=s1 + ",";
   	   			s1=s1+form1.listbox1.options[i].value;
    	   }
    	}

   		if (form1.processstep.value=="1")
  		{
			obj=document.getElementById("txt_Facility");
			obj.innerHTML=s;
			form1.id_facility.value=s1;
		}
   		if (form1.processstep.value=="2")
  		{
			obj=document.getElementById("txt_ValueStream");
			obj.innerHTML=s;
			form1.id_ValueSstream.value=s1;
		}
   		if (form1.processstep.value=="3")
  		{
			obj=document.getElementById("txt_Process");
			obj.innerHTML=s;
			form1.id_Process.value=s1;
		}
   		if (form1.processstep.value=="4")
  		{
			obj=document.getElementById("txt_Resource");
			obj.innerHTML=s;
			form1.id_resource.value=s1;
		}

	}

	function btnFacilityclick()
	{
		document.form1.processstep.value="1";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Facility";
		ajaxFunction("1");
	}

	function btnValuestreamclick()
	{
		if (form1.id_facility.value=="")
		{
			alert("Please select facility");
			return false;
		}
		document.form1.processstep.value="2";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Value Stream";
		ajaxFunction("2");
	}

	function btnProcessclick()
	{
		if (form1.id_ValueSstream.value=="")
		{
			alert("Please select Value stream");
			return false;
		}
		document.form1.processstep.value="3";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Process";
		ajaxFunction("3");
	}

	function btnResourceclick()
	{
		if (form1.id_Process.value=="")
		{
			alert("Please select Process");
			return false;
		}
		document.form1.processstep.value="4";
		var obj;
		obj=document.getElementById("page1_listbox1_title");
		obj.innerHTML="Resource";
		ajaxFunction("4");
	}
	</script>

<?php

	$name_facility="";
	if (trim($id_facility)!="")
	{
		$sql="select * from facility where facility_id in (" .  $id_facility . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_facility)<>"")
				$name_facility=$name_facility . ";";
			$name_facility=$name_facility . $row['facility_name'] . " ";
		}

	}

	$name_ValueSstream="";
	if (trim($id_ValueSstream)!="")
	{
		$sql="select * from facility_stream where stream_id in (" . $id_ValueSstream . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_ValueSstream)<>"")
				$name_ValueSstream=$name_ValueSstream. ";";
			$name_ValueSstream=$name_ValueSstream . $row['stream_name'] . " ";
		}
	}

	$name_Process="";
	if (trim($id_Process)!="")
	{
		$sql="select * from facility_process where process_id in (" . $id_Process . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_Process)<>"")
				$name_Process=$name_Process . ";";
			$name_Process=$name_Process . $row['process_name'] . " ";
		}
	}

	$name_resource="";
	if (trim($id_resource)!="")
	{
		$sql="select * from facility_resource where resource_id in (" . $id_resource . ")";
		$query = mysql_query($sql);
		while ($row = mysql_fetch_array($query))
		{
			if (trim($name_resource)<>"")
				$name_resource=$name_resource . ";";
			$name_resource=$name_resource . $row['resource_name'] . " ";
		}
	}

?>
	<div style="position:absolute;left:300px;top:45px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_facility" value="Facility" title="Click To Select Facility" style="position:ablolute;left:0px;top:0px;width:200px;height:50px;" onClick="return btnFacilityclick();">
		</div>
		<div id="txt_Facility" style="position:absolute;left:230px;top:0px;width:250px;height:50px;border:solid 1px #000000;">
		<?php echo $name_facility;  ?></div>
		<input type="hidden" name="id_facility" value="<?php echo $id_facility; ?>">
	</div>

	<div style="position:absolute;left:300px;top:100px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_ValueStream" value="Value Stream" title="Click To Select Value Stream" style="position:absolute;left:0px;top:0px;width:200px;height:50px;" onClick="return btnValuestreamclick();">
		</div>
		<div id="txt_ValueStream" style="position:absolute;left:230px;top:0px;width:250px;height:50px;border:solid 1px #000000;"><?php echo $name_ValueSstream; ?></div>
		<input name="id_ValueSstream" value="<?php echo $id_ValueSstream; ?>" type=hidden>
	</div>

	<div style="position:absolute;left:300px;top:160px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_Process" value="Process" title="Click To Select Process" style="position:ablolute;left:0px;top:0px;width:200px;height:50px;" onClick="return btnProcessclick();">
		</div>
		<div id="txt_Process" style="position:absolute; width:250px;height:50px;border:solid 1px;top:0px;left:230px;"><?php echo $name_Process; ?></div>
		<input name="id_Process" value="<?php echo $id_Process; ?>" type="hidden">
	</div>

	<div style="position:absolute;left:300px;top:220px;width:500px;height:50px;text-align:left;">
		<div>
		<input type="button" name="btn_Resource" value="Resource" title="Click To Select Resource" style="width:200px;height:50px;" onClick="return btnResourceclick();">
		</div>
		<div id="txt_Resource" style="position:absolute; width:250px;height:50px;border:solid 1px;top:0px;left:230px;" onClick="return btnResourceclick();"><?php echo $name_resource; ?></div>
		<input name="id_resource" value="<?php echo $id_resource; ?>" type="hidden">
	</div>

	<div style="position:absolute;left:300px;top:350px;width:300px;height:30px;text-align:left;">
		<font size=2><strong>Start:</strong>&nbsp;&nbsp;</font>
		<script language="javascript">cal1.writeControl(); cal1.dateFormat="yyyy-MM-dd";</script>&nbsp;&nbsp;&nbsp;
		<input type="text" name="starttime1" size=2 value="<?php echo $starttime2; ?>" maxlength="2"><b>:</b><input type="text" name="starttime2" size=2 value="00" maxlength="2">
	</div>
	<div style="position:absolute;left:307px;top:380px;width:300px;height:30px;text-align:left;">
		<font size=2><strong>End:</strong>&nbsp;&nbsp;</font><script language="javascript">cal2.writeControl(); cal2.dateFormat="yyyy-MM-dd";</script>&nbsp;&nbsp;&nbsp;
		<input type="text" name="endtime1" size=2 value="<?php echo $endtime2; ?>" maxlength="2"><b>:</b><input type="text" name="endtime2" size=2 value="00" maxlength="2">
	</div>

	<div style="position:absolute;left:300px;top:450px;width:200px;height:50px;border:solid 0px;">
		<input type="button" name="btn_option" value="Option" style="width:200px;height:50px;" onClick="return btnOptionClick();">
	</div>
	<div style="position:absolute;left:500px;top:450px;width:200px;height:50px;border:solid 0px;">
		<input type="button" name="btn_ok" value="Generate Report" style="width:200px;height:50px;" onClick="return btnOKClick();" <?php if ((trim($graphplots)=="") && (trim($timeseries)=="")) echo "disabled"; ?>>
	</div>
	<div style="position:absolute;left:500px;top:510px;width:200px;height:50px;border:solid 0px;">
		<input type="button" name="btn_cancel" value="Cancel" style="width:200px;height:50px;">
	</div>
</div>

<script language="javascript" type="text/javascript">
function btnOptionClick()
{
	form1.action="page3.php";
	form1.submit();
}

function btnOKClick()
{
	if (form1.id_Process.value=="")
	{
		alert("Please select Process");
		return;
	}
	if (form1.entrydate1.value=="")
	{
		alert("Please select date");
		return;
	}
	if (form1.entrydate2.value=="")
	{
		alert("Please select data");
		return;
	}

	form1.action="page2.php";
	form1.submit();
}

		function ajaxFunction(t)
		{
			  var xmlHttp;
			  try
			  {    // Firefox, Opera 8.0+, Safari
			  	   xmlHttp=new XMLHttpRequest();
			  }
			  catch (e)
			  {    // Internet Explorer
			  	  try
			  	  {
			  	  	 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			  	  }
	    	      catch (e)
			      {
	        	     try
	           		 {
           	   			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	           		 }
	           		 catch (e)
	           		 {
	           	  		alert("Your browser does not support AJAX!");
             	  		return false;
	           		 }
	          	  }
	    	  }

	    	  
       		while (form1.listbox1.options.length>0)
    		   form1.listbox1.options[0]=null;
			  var u;
			  if(t=="1")
			     u="getparams.php?mode=1";
			  else if(t=="2")
			  	 u="getparams.php?mode=2&param1="+form1.id_facility.value;
			  else if(t=="3")
			  	 u="getparams.php?mode=3&param1="+form1.id_ValueSstream.value;
			  else if(t=="4")
			  	 u="getparams.php?mode=4&param1="+form1.id_Process.value;


			  if(u!="")
			  {
			      xmlHttp.open("GET",u,true);
			     
			  }
			  
			 xmlHttp.onreadystatechange=function()
	    	  {
	         		//if(xmlHttp.readyState==4)
	         		var b=false
	         		try
	         		{
	         			if (xmlHttp.status==200)
	         				b=true;
	         		}
	         		catch(e)
	         		{
	         			try
	         			{
	         				if (xmlHttp.readyState==4)
	         				   b=true
	         			}
	         			catch(e)
	         			{

	         			}
	         		}

	         		if (b==true)
	         		{
	         		    var s;
             			var arr=new Array();
	             		s=xmlHttp.responseText;

	             		//s=s.replace(/^\s+|\s+$/g, '') ;

               			if (s=="") return;


	           			arr=s.split("|");

		         		while (form1.listbox1.options.length>0)
			     		   form1.listbox1.options[0]=null;

              			j=0;
		               	for (i=arr.length-2;i>=0;i--)
		                {
		                  	 s=arr[i];
							 arr1=s.split("-");
							 o=new Option(arr1[1],arr1[0]);
							 form1.listbox1.options[j]=o;
							 j++;
		                }
			        }
			  }
			  
			   xmlHttp.send(null); 
		}

		</script>

</form>
</center>
</body>
</html>

getparams.php :::

php Syntax (Toggle Plain Text)
<?php
$host = "127.0.0.1";
$user = "root";
$pass = "";
 
 
$connection = mysql_connect($host,$user,$pass) or die (mysql_errno().": ".mysql_error()."<BR>");
 
$dbname = "testview_flowview";
mysql_select_db($dbname);
 
$mode=$_GET["mode"];
$param1=$_GET["param1"];
 
if ($mode=="1")
{
	$sql = "select * from facility";
	$query = mysql_query($sql);
 
	while ($row = mysql_fetch_array($query))
	{
		echo $row['facility_id']."-".$row['facility_name']."|";
	}
 
}
 
if (($mode=="2") && ($param1 !=""))
{
	$sql = "select * from facility_stream where facility_id in (" . $param1  . ") ";
	$query = mysql_query($sql);
 
	while ($row = mysql_fetch_array($query))
	{
		echo $row['stream_id']."-".$row['stream_name']."|";
	}
 
}
 
if (($mode=="3") && ($param1 !=""))
{
	$sql = "select a.* from facility_process a left join facility_stream_process b on (a.process_id=b.process_id) where b.stream_id in (" . $param1  . ") ";
	$query = mysql_query($sql);
 
	while ($row = mysql_fetch_array($query))
	{
		echo $row['process_id']."-".$row['process_name']."|";
	}
 
}
 
if (($mode=="4") && ($param1 !=""))
{
	$sql = "select distinct a.resource_id,c.resource_name from facility_stream_process_resource a left join facility_stream_process b on (a.stream_process_id =b.stream_process_id ) left join facility_resource c on (c.resource_id =a.resource_id)  where b.process_id  in (" . $param1  . ") ";
 
	$query = mysql_query($sql);
 
	while ($row = mysql_fetch_array($query))
	{
		echo $row['resource_id']."-".$row['resource_name']."|";
	}
 
}
?>
<?php
$host = "127.0.0.1";
$user = "root";
$pass = "";


$connection = mysql_connect($host,$user,$pass) or die (mysql_errno().": ".mysql_error()."<BR>");

$dbname = "testview_flowview";
mysql_select_db($dbname);

$mode=$_GET["mode"];
$param1=$_GET["param1"];

if ($mode=="1")
{
	$sql = "select * from facility";
	$query = mysql_query($sql);

	while ($row = mysql_fetch_array($query))
	{
		echo $row['facility_id']."-".$row['facility_name']."|";
	}

}

if (($mode=="2") && ($param1 !=""))
{
	$sql = "select * from facility_stream where facility_id in (" . $param1  . ") ";
	$query = mysql_query($sql);

	while ($row = mysql_fetch_array($query))
	{
		echo $row['stream_id']."-".$row['stream_name']."|";
	}

}

if (($mode=="3") && ($param1 !=""))
{
	$sql = "select a.* from facility_process a left join facility_stream_process b on (a.process_id=b.process_id) where b.stream_id in (" . $param1  . ") ";
	$query = mysql_query($sql);

	while ($row = mysql_fetch_array($query))
	{
		echo $row['process_id']."-".$row['process_name']."|";
	}

}

if (($mode=="4") && ($param1 !=""))
{
	$sql = "select distinct a.resource_id,c.resource_name from facility_stream_process_resource a left join facility_stream_process b on (a.stream_process_id =b.stream_process_id ) left join facility_resource c on (c.resource_id =a.resource_id)  where b.process_id  in (" . $param1  . ") ";

	$query = mysql_query($sql);

	while ($row = mysql_fetch_array($query))
	{
		echo $row['resource_id']."-".$row['resource_name']."|";
	}

}
?>

Please help me out !!! As Always ..... Thanks a million in advance !!

Warm Regards,

Similar Threads

AJAX in JavaScript / DHTML / AJAX
Is it possible to transfer value javascript to ajax?? in JavaScript / DHTML / AJAX
FF vs IE dhtml/javascript/forms issue in JavaScript / DHTML / AJAX
javascript / ajax tutorials in JavaScript / DHTML / AJAX

jyotiu

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

33 posts
since Sep 2008

Permalink

Jun 10th, 2009

Re: Javascript/Ajax issue

Try this demo:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#ccs21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */
 
div#main {
  clear : both;
  letter-spacing : 1px;
  margin : 0 auto;
  width : auto;
  vertical-align : baseline; }
 
select {
  display : block;
  margin : 0 auto;
  width : 100%; }
 
caption {
  color : #778899;
  margin-bottom : 1%;
  text-align : left; }
 
table {
   border : none;
  border-collapse : collapse; }
 
th {
  background-color : #fff;
  vertical-align : middle;
  border-top : 1px solid #ddd;
  border-bottom : 1px solid #ddd;
  border-right : 1px solid #ddd;
  font-weight : normal;
  width : 30%; }
 
td {
  border : 1px solid #ddd;
  background-color : #fff; 
  width : auto;
  padding : 1% 0 1% 0; }
 
div.tube {
  background-color : #FFF;
  color : #888;
  padding : 2%; } 
 
div#show {
  margin-top : 1em;  }
.show { display : block; }
.hide { display : none; }
/* ]]> */
</style>
<script id="script15" type="text/javascript">
// <![CDATA[
 
var handleRequest = function( ids, index ) {
   div = (( document.getElementById ) ? document.getElementById("show") : document.all.show );
   sel = (( document.getElementById ) ? document.getElementById("cats1") : document.all.cats1 );
 
   response = xmlHttp.responseText;
   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
      // if ( xmlHttp.status === 200 ) { 
         div.className = div.id;         sel.remove( index );
         sel.add( new Option( ids.options[ index ].text, index ), index ); sel.options[index].selected = true;                 
      // }
      }
   };
var update = function() {
    (( sel.options.length === 1 ) ? div.className = "hide" : div );
    sel.remove( sel.selectedIndex );
 
}
 
var sendRequest = function( ids ) {
   ids = (( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ] );
   index = ids.selectedIndex;
   url = ids.options[ index ].value;
   xmlHttp = null;
   method = "GET";
   try {
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( e1 ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( e2 ) {
   (( window.createRequest ) ? xmlHttp = window.createRequest() : xmlHttp = null );
   }
   (( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   if ( xmlHttp !== null ) {  
           xmlHttp.onreadystatechange = function() {
      handleRequest( ids, index );
   }; xmlHttp.open( method, "test.txt", true );
   (( xmlHttp.setRequestHeader && method === "POST" ) ?  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : xmlHttp ); 
   xmlHttp.send( null );
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
   }
};
 
 
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<form id="testform" action="#" onsubmit="return false;">
<table width="100%"  id="testtable" frame="void" rules="none" summary="AJAX Powered Demo">
<caption>Product Line:</caption>
<tr>
<th><label for="cats">Performance Upgrade</label></th>
<td><select id="cats" name="cats" size="4" onchange="sendRequest( this.id, this.selectedIndex );">
<optgroup label=" - Product Brands - ">
<option value="./hks.txt">HKS High-Performance Parts</option>
<option value="greddy">GREDDY Intercooler Kits</option>
<option value="brembo">Brembo Braking System</option>
</optgroup>
</select>
<div id="show" class="hide">
<p style="padding-left : 1em;">Here are the following lists of items selected from the brand categories.<br />
Click items to deselect.</p>
 
<select id="cats1" name="cats1" size="4" multiple="multiple" onchange="update();">
<option value="">No Parts Selected</option>
</select></div>
</td>
</tr>
</table>
</form>
</div>
</div> 
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#ccs21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */

div#main {
  clear : both;
  letter-spacing : 1px;
  margin : 0 auto;
  width : auto;
  vertical-align : baseline; }

select {
  display : block;
  margin : 0 auto;
  width : 100%; }

caption {
  color : #778899;
  margin-bottom : 1%;
  text-align : left; }

table {
   border : none;
  border-collapse : collapse; }

th {
  background-color : #fff;
  vertical-align : middle;
  border-top : 1px solid #ddd;
  border-bottom : 1px solid #ddd;
  border-right : 1px solid #ddd;
  font-weight : normal;
  width : 30%; }

td {
  border : 1px solid #ddd;
  background-color : #fff; 
  width : auto;
  padding : 1% 0 1% 0; }

div.tube {
  background-color : #FFF;
  color : #888;
  padding : 2%; } 

div#show {
  margin-top : 1em;  }
.show { display : block; }
.hide { display : none; }
/* ]]> */
</style>
<script id="script15" type="text/javascript">
// <![CDATA[

var handleRequest = function( ids, index ) {
   div = (( document.getElementById ) ? document.getElementById("show") : document.all.show );
   sel = (( document.getElementById ) ? document.getElementById("cats1") : document.all.cats1 );

   response = xmlHttp.responseText;
   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
      // if ( xmlHttp.status === 200 ) { 
         div.className = div.id;         sel.remove( index );
         sel.add( new Option( ids.options[ index ].text, index ), index ); sel.options[index].selected = true;                 
      // }
      }
   };
var update = function() {
    (( sel.options.length === 1 ) ? div.className = "hide" : div );
    sel.remove( sel.selectedIndex );

}

var sendRequest = function( ids ) {
   ids = (( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ] );
   index = ids.selectedIndex;
   url = ids.options[ index ].value;
   xmlHttp = null;
   method = "GET";
   try {
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( e1 ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( e2 ) {
   (( window.createRequest ) ? xmlHttp = window.createRequest() : xmlHttp = null );
   }
   (( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   if ( xmlHttp !== null ) {  
           xmlHttp.onreadystatechange = function() {
      handleRequest( ids, index );
   }; xmlHttp.open( method, "test.txt", true );
   (( xmlHttp.setRequestHeader && method === "POST" ) ?  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : xmlHttp ); 
   xmlHttp.send( null );
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
   }
};


// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<form id="testform" action="#" onsubmit="return false;">
<table width="100%"  id="testtable" frame="void" rules="none" summary="AJAX Powered Demo">
<caption>Product Line:</caption>
<tr>
<th><label for="cats">Performance Upgrade</label></th>
<td><select id="cats" name="cats" size="4" onchange="sendRequest( this.id, this.selectedIndex );">
<optgroup label=" - Product Brands - ">
<option value="./hks.txt">HKS High-Performance Parts</option>
<option value="greddy">GREDDY Intercooler Kits</option>
<option value="brembo">Brembo Braking System</option>
</optgroup>
</select>
<div id="show" class="hide">
<p style="padding-left : 1em;">Here are the following lists of items selected from the brand categories.<br />
Click items to deselect.</p>

<select id="cats1" name="cats1" size="4" multiple="multiple" onchange="update();">
<option value="">No Parts Selected</option>
</select></div>
</td>
</tr>
</table>
</form>
</div>
</div> 
</body>
</html>

- you must replace the ajax path, to your own text file...

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Need help with getDOCTYPE() function

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Anybody know of any solutions for converting Excel Calculators into HTML

DaniWeb Message

Cancel Changes

User Name
Password