Javascript/Ajax issue

Question

jyotiu 0 Light Poster

15 Years Ago

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

<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
$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,

javascript

2 Contributors
1 Reply
165 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by essential

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

essential 84 Posting Shark Featured Poster · Answer 1 · 2009-06-10T13:31:41+00:00

Try this demo:

<?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...