There is a table created dynamically using the values of a specific drop down box, once the table is generated, i should be able to click a checkbox of a table row, and that should update a value in the database and hide from the table dynamically.
example:
I have a table names assignment with the following columns
id | assigned_to | assignment_name | assigned_by | status|
id -> used to identify the row assigned_to and assigned_by are names of to people assignment_name is the name of the assignment and status is either pending or complete.
now what i want is on selecting a user from the drop down box, i should be able to see all the assignments assigned to that specific person which are in pending status.
once the assignments are displayed i should be able to click on the check box and when i do so it should hide it from there and change the status to complete. Dynamically without leaving the page.
I've tried a lot on this.. when i work on them separately, they are working, i.e.; when i want to display all the assignments of a specific user dynamically, i'am able to do it, and if i try to hide a row from a table which is not dynamically created , that also is working perfect, but the prom that i'm facing is when i combine both the functionality's.
Here is the code that i have
Main page
<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" method="POST">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a USER:</option>
<?php
include("dbconfig.php");
$query4="select * from users";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
?>
<option value="<?php echo $row['username']; ?>"><?php echo $row['username']; ?>/option>
<?php
}
?>
</select>
</form>
<br />
<div id="txtHint">
<div id="main">
<table>
<?php
include("dbconfig.php");
$query4="select * from assignment where status='pending'";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
?>
<tr class="record">
<TD width="28"><input type="checkbox" name="id" id="<?php echo $row['id']; ?>"class="updatebutton"></TD>
<td width="150"><?php echo $row["assigned_to"]; ?></td>
<td width="150"><?php echo $row["assignment_name"]; ?></td>
<td width="150"><?php echo $row["assigned_by"]; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".updatebutton").click(function(){
var element = $(this);
var update_id = element.attr("id");
var info = 'id=' + update_id;
$.ajax({
type: "GET",
url: "update.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
</script>
</div>
</body>
</html>
update.php
<?php
$id=$_GET['id'];
include("dbconfig.php");
$sql = "update assignment set status='complete' where id='$id'";
mysql_query( $sql);
?>
get.php
<html>
<body>
<table>
<?php
$q=$_GET["q"];
include("dbconfig.php");
$query4="select * from assignment where status='pending' and assigned_to='$q'";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
?>
<tr class="record">
<TD width="28"><input type="checkbox" name="id" id="<?php echo $row['id']; ?>" class="updatebutton"></TD>
<td width="150"><?php echo $row["assigned_to"]; ?></td>
<td width="150"><?php echo $row["assignment_name"]; ?></td>
<td width="150"><?php echo $row["assigned_by"]; ?></td>
</tr>
<?php
}
?>
</table>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".updatebutton").click(function(){
var element = $(this);
var update_id = element.attr("id");
var info = 'id=' + update_id;
$.ajax({
type: "GET",
url: "update.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
</script>
</body>
</html>
Please help me regarding this. it's been past few day's m working on it and m unable to figure this out ..
Thanking you in advance
