Hi,
I have webpage that I used jquery for autocomplete of process_name field and I used Ajax for getting the compound type and reject type based on process_id.
here is my index.php
<?php
session_start();
ob_start();
date_default_timezone_set("Asia/Singapore");
error_reporting(0);
include('connection.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Operator's Shift Report </title>
<head>
<link rel="stylesheet" type="text/css" href="op_report.css" />
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">
//----auto complete process name---//
$().ready(function() {
$("#process_name").autocomplete("get_process_list.php", {
width: 205,
matchContains: true,
mustMatch: true,
selectFirst: false
});
$("#process_name").result(function(event, data, formatted) {
$("#process_id").val(data[1]);
});
});
//------AJAX-----//
function AJAX(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
//-----get reject---//
function getmat()
{
divid = "op_output_fieldset";
var url = "get_process_reject_list.php";
var str = "id=" + document.getElementById("process_name").value;
var xmlHttp = AJAX();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
// document.getElementById(divid).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var jsonart = xmlHttp.responseText;
document.getElementById(divid).innerHTML = jsonart;
}
}
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", str.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(str);
}
</script>
</head>
<body onload=document.getElementById("process_name").focus();>
<form name="operator_report" action="" method="post" autocomplete="off">
<!--Tab List -->
<div id="ddcolortabs">
<ul>
<li id="current"> <a href="index.php" title="Operator's Shift Report"><span>Operator's Shift Report</span></a></li>
</ul>
</div>
<div id="operators_report">
<fieldset>
<legend><h1>Operator's Shift Report</h1></legend>
<table>
<tr>
<td>Process:</td>
<td><input type="text" name="process_name" id="process_name" value="" size="30" onkeyup="getmat();"></td>
</tr>
</table>
</fieldset>
</div>
<input type="hidden" name="process_id" id="process_id" value="" />
<div id="op_output_fieldset">
</div>
</form>
</body>
</html>
and here is my get_project_reject_list.php
<?php
ob_start();
include "connection.php";
if($_POST["id"])
{
$sql = "select r.reject_acro from process_list AS p LEFT JOIN reject_list AS r ON
p.reject_id = r.reject_process_id
where p.process_name LIKE '" . ($_POST["id"]) . "'";
$rsd = mysql_query($sql);
echo "<table>";
while($rs = mysql_fetch_assoc($rsd)) {
$reject[] = $rs['reject_acro'];
}
echo "<tr>";
if(empty($reject))
{
echo"";
}
else
{
echo "<th>Compound</th>";
echo "<th>Output</th>";
foreach ($reject as $reject)
{
echo "<th>$reject</th>";
}
echo "<tr>";
$sql_comp = "SELECT compound_id, compound_type FROM compound_list ORDER BY compound_type ASC";
$res = mysql_query($sql_comp);
while($comp = mysql_fetch_assoc($res)){
$compound_type = $comp['compound_type'];
echo "<td>$compound_type</td>";
echo "<td><input type='text' name='output' id='output' value=''></td>";
echo "<td><input type='text' name='reject' id='reject' value=''></td>";
}
echo "</tr>";
echo "</tr>";
}
echo "</table>";
}
?>
I felt difficulty in my table layout.
I want is like this:
Compound|Output|HS|B|D|C|E
P35-------textbox-tb-tb-tb-tb-tb
P45-------textbox-tb-tb-tb-tb-tb
P46-------textbox-tb-tb-tb-tb-tb
P47-------textbox-tb-tb-tb-tb-tb
P48-------textbox-tb-tb-tb-tb-tb
I hope somebody can help me.
Thank you so much.