<html><head>
<script type="text/javascript">
function addFunction(id)
{
cnt=parseInt(id.substr(7));
var row=document.getElementById('driverDetails').insertRow(cnt+1);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
}
</script>
</head><body>
<table>
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
when i click Add New button
can we change the content of 3rd cell of previous row
Here you go ...
<html><head>
<script type="text/javascript">
function addFunction(id)
{
cnt=parseInt(id.substr(7));
var row=document.getElementById('driverDetails').insertRow(cnt);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
document.getElementById('driverDetails').rows[cnt-1].deleteCell(2);
}
</script>
</head><body>
<table id="driverDetails">
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
Here's a function that does what you want, I think.
function addFunction(id) {
var table = document.getElementById('driverDetails');
var tr = document.createElement("TR");
table.tBodies[0].appendChild(tr);
var rowCount = table.tBodies[0].rows.length;
var colCount = table.tBodies[0].rows[0].cells.length;
tr.innerHTML =
"<td>Row "+(rowCount)+", Col "+colCount+" 1</td>"+
"<td>Row "+(rowCount)+", Col "+colCount+" 2</td>"
}
This way, you don't have to add a third cell and delete it every time you make a new row. It will just append a row every time you click the same button.
(If you want to prepend the new row, check out the insertBefore() method in the javascript DOM).
Or with jQuery:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function addFunction(id) {
var count = $('#box').find('tr').size()+1;
$('#box').append('<tr><td>row'+count+
' colum1</td><td>row'+count+' colum2</td></tr>');
}
</script>
</head>
<body>
<table id="box">
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
</tr>
</table>
<input type="button" value="Add New" onclick="addFunction()"/>
</body>
</html>
<html><head><script type="text/javascript">
function addFunction(id)
{ cnt=parseInt(id.substr(7));
document.getElementById('driverDetails').rows[cnt].deleteCell(2);
var row=document.getElementById('driverDetails').insertRow(cnt+1);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
}
</script>
</head>
<body>
<table>
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
thanks Ronan Dejhero i change your code like this so i got answer
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I want your help with the following issue:
I've tried to submit a form without reloading my page, but without success.
I've read other relative questions but i can't do it.
I want the following:
When a user clicks on the button, then the data should be sent to server without displaying an OK messsage.
Can you help me?
Here is my code:
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p align="center">Example</p>
<table align="center" width="730" border="0">
<tr>
<td align="center">
<div>
<table class="blueTable" style="float: left">
<thead>
<tr>
<th colspan="1"><u>Menu</u></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
<tr>
<td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
<tr>
<td><form name="SaveGame" id="SaveGame" method="post" action="http://127.0.0.1/PHP/mine2.php" enctype="multipart/form-data">
<input type="submit" value="Save" id="save" onclick="save3()" class="button"/>
</form>
</body>
</html>
mine2.php
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("127.0.0.1", "root", "", "mysql3");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt insert query execution
$sql = "INSERT INTO components (user_id, book_id, game_id, site_id) VALUES ('6', '6', '6', '6')";
if(mysqli_query($link, $sql)){
} else{
}
// Close connection
mysqli_close($link);
?>
Change your html file, like this:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p align="center">Example</p>
<table align="center" width="730" border="0">
<tr>
<td align="center">
<div>
<table class="blueTable" style="float: left">
<thead>
<tr>
<th colspan="1"><u>Menu</u></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
<tr>
<td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
<button id="save" onclick="save3()" class="button">Save</button><!--This button will perform action-->
<script>
function save3(){
var value = 123;//dummy variable to show you its functionality
$.ajax({
type: "POST",
url: "http://127.0.0.1/PHP/mine2.php",
data: {value: value}, //that value comes from above which I have initialized
success: function(data)
{
console.log(data); //it will show response from php file in your console
}
});
}
</script>
</body>
</html>
While in php file mine2.php this is how you can access value which is coming from ajax request
<?php
if(isset($_POST['value']))
{
$value = $_POST['value'];
}
?>
Change your html file, like this:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p align="center">Example</p>
<table align="center" width="730" border="0">
<tr>
<td align="center">
<div>
<table class="blueTable" style="float: left">
<thead>
<tr>
<th colspan="1"><u>Menu</u></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
<tr>
<td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
<tr>
<td><form name="SaveGame" id="SaveGame" method="post" action="http://127.0.0.1/PHP/mine2.php" enctype="multipart/form-data">
<input type="submit" value="Save" id="save" onclick="save3()" class="button"/>
</form>
<script>
$("#SaveGame").submit(function(e) {
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
</body>
</html>
If u add some inputs u can get their values with $_POST, in your php script.
I am trying to pull checkbox values of only checked-checkboxes in a form, using array as name. N then I am using jquery - $.post(), to submit it to action.php file, but its doing nothing then refreshing page. Any guesses, where i am wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("button#ffruits_submit").click(function () {
var fresorts = $('input[name^="ffruits[]"]').map(function(){return $(this).val();}).get();
$.post("action.php", {fresorts1: fresorts}, function (data) {
});
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
</script>
</head>
<body>
<form name="ffruits_form" id="ffruits_form" method="post" style="padding:0 0 15px 0px;">
<table class="sm" border="1px solid #CCCCCC">
<?php
$sql = "SELECT * FROM `fruitstable` WHERE(fldReadyfordisplay=1 AND fldProductDelete=0) ORDER BY
resort";
$result = mysqli_query($db_conx, $sql);
while($data=mysqli_fetch_assoc($result)){
print('
<tr>
<td style="padding: 15px;">
<input type="checkbox" name="ffruits[]" value="'.$data['id'].'">
</td>
<td style="padding: 15px;">
'.$data['fruit'].'
</td>
</tr>
');
} // while-ends
?>
</table>
<table style="margin-top: 45px;">
<tr>
<td style="padding: 0 15px;text-align: center">
<button class="myButton" id="ffruits_submit">UPDATE</button>
</td>
</tr>
</table>
</form>
</body>
</html>
Replace this code
<button class="myButton" id="ffruits_submit">UPDATE</button>
with
<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>
Add type="button"..its assuming submit button thatswhy refreshing the page.Hope this work.
The issue is because you are hooking the event to the click event of the submit button and you're not preventing the default action of the event.
To fix this, hook to the submit event of the form and call preventDefault() on the provided event. Try this:
$(document).ready(function() {
$("#ffruits_form").submit(function (e) {
e.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function(){
return $(this).val();
}).get();
$.post("action.php", { fresorts1: fresorts }, function(data) {
// do something here or remove the function
});
});
});
Use this lines in your form.php
<div>
<input type="checkbox" name="ac_type[]" value="Checkbox1"/> Checkbox1
<input type="checkbox" name="ac_type[]" value="Checkbox2"/> Checkbox2
</div>
And in action.php
<?php $checkboxtype = $_POST['ac_type'];
$check_type="";
foreach($checkboxtype as $checkbox)
{
$check_type .= $checkbox.",";
}?>
I hope this would help.
<?php
if( isset($_POST['fresorts1']) ) {
print_r($_POST['fresorts1']);
die();
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#ffruits_submit").click(function () {
event.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () { if ($(this).is(':checked')) { return $(this).val(); } }).get(); //#Noman
$.post(window.location.href, {fresorts1: fresorts}, function (data) {
alert("Response: "+data);
});
});
});
</script>
<input type="checkbox" name="ffruits[]" value="1">
<input type="checkbox" name="ffruits[]" value="2">
<input type="checkbox" name="ffruits[]" value="3">
<button class="myButton" id="ffruits_submit">UPDATE</button>
add event.preventDefault(); and see the console log for result
I have updated the code ... put this code in a php file and test
$(document).ready(function () {
$("button#ffruits_submit").click(function (e) {
e.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () {
if ($(this).is(':checked')) {
return $(this).val();
}
}).get();
console.log(fresorts);
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<form name="ffruits_form" id="ffruits_form" method="post">
<table class="sm" border="1px solid #CCCCCC">
<tr>
<td style="padding: 15px;">
<input data-label="checkbox 1" type="checkbox" name="ffruits[]" value="1">
<input data-label="checkbox 2" type="checkbox" name="ffruits[]" value="2">
<input data-label="checkbox 3" type="checkbox" name="ffruits[]" value="3">
<input data-label="checkbox 4" type="checkbox" name="ffruits[]" value="4">
<input data-label="checkbox 5" type="checkbox" name="ffruits[]" value="5">
</td>
</tr>
</table>
<table style="margin-top: 45px;">
<tr>
<td><span id="respose"></span></td>
<td style="padding: 0 15px;text-align: center">
<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>
</td>
</tr>
</table>
</form>
</body>
</html>
you need some changing in your code
when click on button use event.preventDefault();
when use .map set if ($(this).is(':checked')) { condition
Check below JS:
$(document).ready(function () {
$("button#ffruits_submit").click(function (event) { // clicked event pass by function to prevent redirection of your form submition
event.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () {
if ($(this).is(':checked')) {
return $(this).val();
}
}).get();
console.log(fresorts);
$.post("action.php", {fresorts1: fresorts}, function (data) {
});
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
Can somebody please explain why this code does not allow my imploded variable separated by commas does not work when I surround it in a table or many div format.
The code works when I remove it from within the table. I also tested it with elements of the form within other divs and that failed to. It only works when its a HTML form on its own.
Summary: I want engineers output like. john,derek,peter et al.... At the moment it only gives my the top line
<?php
$eng = array();
$test = $_POST['test'];
$eng = implode(',',$_POST['engineers']);
?>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="engineers[]"><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
</head>
<body>
<?php echo $eng; ?>
<div class="form_table">
<table>
<form method="post">
<tr><th><label for="engineers">Engineers</label></th><td>
<button type="button" id="add">Add Another Engineer</button>
<div id="items">
<div><input type="text" name="engineers[]"></div>
</div>
</td></tr>
<tr><th colspan="2"><input type="submit" name="" value="Add Job" class="submit" /></th></tr>
</form></table>
</body>
</html>
One thing to point out is that always process form input when the form is submitted.
And your markup is a little bit wrong, its the other way around. The table must be inside the form.
<?php
// handle form inputs when the form is submitted
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$eng = implode(',', array_filter($_POST['engineers']));
echo $eng;
}
?>
<div class="form_table">
<!-- form must wrap the table -->
<form method="POST">
<table>
<tr>
<th><label for="engineers">Engineers</label></th>
<td>
<button type="button" id="add">Add Another Engineer</button>
<div id="items">
<div><input type="text" name="engineers[]" /></div>
</div>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" name="" value="Add Job" class="submit" />
</th>
</tr>
</table>
</form>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="engineers[]"> <button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
Sample Output
put your form outside the table becase table tag can include tr tags not form tag
Ex:
<?php
$eng = array();
$test = $_POST['test'];
$eng = implode(',',$_POST['engineers']);
?>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script> $(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="engineers[]">
<button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
</head>
<body><?php
echo $eng;
?>
<div class="form_table">
<form method="post">
<table>
<tr><th><label for="engineers">Engineers</label></th><td>
<button type="button" id="add">Add Another Engineer</button>
<div id="items">
<div><input type="text" name="engineers[]"></div>
</div>
</td></tr>
<tr><th colspan="2"><input type="submit" name="" value="Add Job" class="submit" /></th></tr>
</table>
</form>
this code is to create dynamic number of fields and to send data.. this is doing it's work...
but then i try to back.php(where form sends the data ) i don't know hoe to get the exact number of rows... id = 0_1 .... 3_1 there are many options.. but what is the exact number to counting to make a loop...
please help me on this asap ...
<html>
<head>
<title>Infinite Form Rows</title>
<script
type="text/javascript"
src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js">
</script>
<script type="text/javascript">
$(function(){
var newRowNum = 0;
$('#addnew').click(function(){
newRowNum += 1;
var addRow = $(this).parent().parent();
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html(newRowNum);
$('input', newRow).each(function(i){
var newID = newRowNum + '_' + i;
$(this).attr('id',newID).attr('name',newID);
});
addRow.before(newRow);
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
return false;
});
return false;
});
});
</script>
</head>
<body>
<form action="back.php" method="get" >
<table id="tabdata">
<thead>
<tr>
<th>Row</th>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a id="addnew" href="">Add</a></td>
<td><input id="n0_1" name="n0_1" type="text" /></td>
<td><input id="n0_2" name="n0_2" type="text" /></td>
<td><input id="n0_3" name="n0_3" type="text" /></td>
<td></td>
</tr>
<tr>
</tr>
</tbody>
</table>
<input id="go" name="go" type="submit" value=" Save " />
</form>
</body>
</html>
You can maintain a hidden input that contains the current number of rows. Set the value on the click event handler for #go.
$('#go').click(function() {
var numRows =$('#tabdata tbody tr').length;
$('#myHiddenInput').val(numRows);
});
I am trying to update the database using jquery and ajax. A pop up window is opened for updating the fields. My problem is : the database is udapted fine but the values are not reflected on the web page without refreshing the page. I am using jquery .html() method to update the contents.
Please help me with the problem.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src="js/jquery-1.5.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.8.13.custom.min.js"></script>
<link rel='stylesheet' href="js/jquery-ui-1.8.13.custom.css" />
<script type='text/javascript'>
$(document).ready(function() {
$update_dialog = $("#update_dialog").dialog({
autoOpen:false,
title:"Update Sub Sub Section",
width: '600px',
modal:true,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }},
]
});
$("#update_dialog form").submit(function() {
var form = $(this);
alert($(this).serialize());
$.post($(this).attr('action'), $(this).serialize(),function(data) {
var getbook = $('#book_'+data.id);
$('.description',getbook).empty().html(data.description);
$("#update_dialog").dialog('close');
},'json');
return false;
});
function edit3_link_action() {
var getbook = $(this).closest('.book');
//get id from div
var id = getbook.attr('id').split('_');
id = id[id.length-1];
$('#update_dialog input[name="id"]').val(id);
$('#update_dialog textarea[name="description"]').val($('.description',getbook).html());
$update_dialog.dialog('open');
return false;
}
$(".edit3").click(edit3_link_action);
});
</script>
</head>
<body>
<div align="center">
<form name="userform" method="post">
<?php
$proposalid='P09-001';
$res=mysql_query("Select * from tblproposaldocsections where ProposalID='$proposalid' order by SortOrder;");
for($i=0;$i<mysql_num_rows($res);$i++)
{
$row=mysql_fetch_row($res);
if($row[1]!=$row[2])
{
$result=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row[1]' order by SortOrder;");
for($k=0;$k<mysql_num_rows($result);$k++)
{
$row1=mysql_fetch_row($result);
$exp=explode('.',$row1[2]);
$alter=$row[2].'.'.$exp[1].'.'.$exp[2];
$result1=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[2]' order by OrderID;");
$lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[1]';")or die(mysql_error());
$rr = mysql_fetch_row($lastsortorder);
$lastsortorder = $rr[0];
if(mysql_num_rows($result1)>0)
{
?>
<br>
<?php
for($j=0;$j<mysql_num_rows($result1);$j++)
{
$row2=mysql_fetch_row($result1);
$exp=explode('.',$row2[2]);
$alter=$row[2].'.'.$exp[1].'.'.$exp[2].'.'.$exp[3];
$lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row2[1]';")or die(mysql_error());
$rr = mysql_fetch_row($lastsortorder);
$lastsortorder = $rr[0];
?>
<div class='book' id='book_<?php echo $row2[2];?>'>
<h3 class="title"><?php echo $alter;?> subsubsection_<?php echo $row2[2];?></h3>
<p class='description'><?php echo $row2[3];?></p>
<a class="edit3" href="#">Edit</a>
</div>
<br>
<?php
}
?>
<br>
<?php
}
}
}
echo('<br>');
}
?>
</table>
</form>
</div>
<div id='update_dialog'>
<form action='edit.php' method='post'>
<table>
<tr>
<td align="left">Description:</td>
<td>
<textarea name='description' cols='60' rows='5'></textarea>
</td>
</tr>
</table>
<input type='hidden' name='id' />
<input type='hidden' name='proposalid' value="<?php echo $proposalid;?>" />
</form>
</div>
</body>
</html>
EDIT by blasteralfred
I used FireBug for debugging and the problem was the same as expected. DOM object is unable to read updated data. Is this declaration for getting the DOM element correct? This is the only problem !
var getbook = $('#book_'+data.id);
This is how the tag is declared:
<div class='book' id='book_<?php echo $row2[2];?>'>
<table width="80%" align="left">
<tr>
<td width="10%"><?php echo $alter;?></td>
<td width="70%" class="description"><?php echo $row2[3];?></td>
<td width="10%" align="center"><a class="edit" href="#">Edit</a></td>
</tr>
</table>
</div>
If your .html() isn't working, its either because the element you're using it on isn't there or the value you're trying to set isn't defined.
You can figure out what's up by checking if the given element and the value are defined prior to the .html() call. I'd recommend FireBug for debugging, but this can also be done simply by alert()ing the element and the value..