Reputation: 860
I'm trying to make a table where I can add a new row with a button click and then send the table to the server so it remembers the information on page refresh. Below is a button which successfully adds a row to a table with the current time. However, when I send the table to the server via the "Send to Server" button it does not echo back the updated table, only the original. It would be such a relief to get this figured out.
HTML:
<input type = "button" id = "send" value = "Send to Server" />
<input type = "button" id = "add" value = "Add Row" />
<table class="table table-striped">
<tr>
<td><h2>In</h2></td>
<td><h2>Out</h2></td>
<td><h2>Total</h2></td>
</tr>
<tr>
<td>InData</td>
<td>OutData</td>
<td>TotalData</td>
</tr>
</table>
JS:
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$("#add").click(function(){
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time
$('table > tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>'); //add row to table with current time
});
$(function(){
var dataArr = [];
$("table").each(function(){
dataArr.push($(this).html());
});
$('#send').click(function(){
$.ajax({
type : "POST",
url : 'timesheet.php',
data : "content="+dataArr,
success: function(data) {
alert(data);// alert the data from the server
},
error : function() {
}
});
});
});
</script
PHP (timesheet.php):
<?php
echo $_REQUEST['content'];
?>
Upvotes: 1
Views: 3590
Reputation: 16963
when I send the table to the server via the "Send to Server" button it does not echo back the updated table, only the original.
Solution
Use .on()
instead of .click()
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).on('click', '#add', function(){
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time
$('table > tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>'); //add row to table with current time
});
$(document).on('click', '#send', function(){
var dataArr = [];
$("table").each(function(){
dataArr.push($(this).html());
});
$('#send').click(function(){
$.ajax({
type : "POST",
url : 'timesheet.php',
data : "content="+dataArr,
success: function(data) {
alert(data);// alert the data from the server
},
error : function() {
}
});
});
});
</script>
Edited:
The click()
binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on()
.
From the documentation of .on()
:
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
Upvotes: 2