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:
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
I suspect your problem arises because you are dynamically creating the table. When you dynamically add elements to the DOM they will not have click handlers applied. For example.
$('div').click( dosomething );
$('body').append('<div>'); //click wont do anything because it was appended post event binding
There are two ways to handle this. One is to just rebind the function once the elements are added.
$('div').click( dosomething );
$('body').append('<div class="new">');
$('div.new').click( dosomething ); //rebind to apply to new elements
The other is to use something called delegate in jQuery 1.4.2+ or on in 1.7+. These essentially watch at a higher level and capture events as they bubble up. If you wanted to watch your entire page you could use:
$('body').on('click', 'div', function() { dosomething });
These are great features because they prevent you from having to bind events over and over again. In your example I would bind to either your table or the container for the table. This reduces the number of bound events and also limits the amount of bubbling that they need to do.
Okay, here is an example based on the fiddle you posted. This version does NOT work. Select a user from the dropdown and then tick the checkbox. No alert is triggered.
This version does work. Instead of binding a click event to every checkbox, we instead bind to the table containing the checkboxes. Then wait for event to bubble up. This way dynamically added elements continue to work.