尝试过类似但却无法理解的答案。 我测试了下面的代码[www.mangocleaning.com/testing/pg1.php] [1],直接在自己的页面上使用它可以正常工作。但是,当我通过ajax load()加载它作为当前页面中的内容时,它将停止工作。有人可以帮忙吗?我复制并粘贴很多并且理解有限,所以请尽量让我理解,因为你可以。非常感谢
<script>
function showEdit(editableObj){$(editableObj).css("background","#FFF");}
function saveToDatabase(editableObj,column,id) {
$(editableObj).css("background","#CCC url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "pg3.php",
type: "POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
success: function(data){
$(editableObj).css("background","#CCC");
}
});
}
</script>
</head>
<form name='userForm' id='userForm'>
<div><input type='text' name='company_name' placeholder='Company Name' /></div>
<div><input type='text' name='contact' placeholder='Contact' /></div>
<div><input type='text' name='priority' placeholder='Priority' /></div>
<div><input type='text' name='email_to' placeholder='Email to' /></div>
<div><input type='text' name='email_from' placeholder='Email from' /></div>
<div><input type='text' name='begin_message' placeholder='Dear / Hi / Hello' /></div>
<div><input type='text' name='message_text' placeholder='Message content' /></div>
<div><input type='text' name='end_message' placeholder='Many thanks / Kind regards' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<div class="table_outer">
<table class="table1" id="table1">
<thead>
<th>id</th>
<th>Company</th>
<th>Person</th>
<th>Email to</th>
<th>Email from</th>
<th>Begin message</th>
<th>Text</th>
<th>End message</th>
<th>Delete</th>
</thead>
<?php
require_once("pg5.php");
$db_handle = new DBController();
$sql = "SELECT * from InvoiceEmailData";
$data = $db_handle->runQuery($sql);
foreach($data as $data_variable=>$dsdjgskjghkjfh) {
?>
<tr>
<td contenteditable="false" onBlur="saveToDatabase(this,'id','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["id"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'Company','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Company"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'Person','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Person"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'EmailTo','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailTo"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'EmailFrom','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailFrom"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'BeginMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["BeginMessage"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'Text','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Text"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'EndMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EndMessage"]; ?></td>
<td> <input type="submit" id='<?php echo $data[$data_variable]["id"] ?>' value='Delete' class="delete-button" /> </td>
</tr>
<?php
}
?>
</table>
JQUERY/AJAX TO SEND AND THEN RECEIVE BACK FORM DATA TO/FROM PG2 TO ADD TO TABLE ABOVE - ALSO DELETE ROWS USING DELETE QUERY FROM PG3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
delete_task(); // Call the delete_task function
$(document).ready(function(){
$('#userForm').submit(function(){
$.ajax({
type: 'POST',
url: 'pg2.php',
data: $(this).serialize()
})
.done(function( data ) {$(data).appendTo('#table1').hide().fadeIn(2000);delete_task();
})
.fail(function() { alert( "Posting failed." ); });
return false;
});
});
function delete_task() {
$('.delete-button').click(function(){
var current_element = $(this);
var id = $(this).attr('id');
$.post('pg4.php', { list_entry_id: id }, function() {
current_element.parent().fadeOut(300, function() { $(this).closest('tr').remove(); });
});
});
}
答案 0 :(得分:0)
我在最后添加了额外的代码并且它有效: 你需要添加e.preventDefault();防止默认浏览器提交 并在示例代码的末尾让javascript工作
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
function showEdit(editableObj){$(editableObj).css("background","#FFF");}
function saveToDatabase(editableObj,column,id) {
$(editableObj).css("background","#CCC url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "pg3.php",
type: "POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
success: function(data){ $(editableObj).css("background","#CCC");
}
});
}
</script>
</head>
<form name='userForm' id="userForm">
<div><input type='text' name='company_name' placeholder='Company Name' /></div>
<div><input type='text' name='contact' placeholder='Contact' /></div>
<div><input type='text' name='priority' placeholder='Priority' /></div>
<div><input type='text' name='email_to' placeholder='Email to' /></div>
<div><input type='text' name='email_from' placeholder='Email from' /></div>
<div><input type='text' name='begin_message' placeholder='Dear / Hi / Hello' /></div>
<div><input type='text' name='message_text' placeholder='Message content' /></div>
<div><input type='text' name='end_message' placeholder='Many thanks / Kind regards' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<div class="table_outer">
<table class="table1" id="table1">
<thead>
<th>id</th>
<th>Company</th>
<th>Person</th>
<th>Email to</th>
<th>Email from</th>
<th>Begin message</th>
<th>Text</th>
<th>End message</th>
<th>Delete</th>
</thead>
<?php
require_once("pg5.php");
$db_handle = new DBController();
$sql = "SELECT * from InvoiceEmailData";
$data = $db_handle->runQuery($sql);
foreach($data as $data_variable=>$dsdjgskjghkjfh) {
?>
<tr>
<td contenteditable="false" onBlur="saveToDatabase(this,'id','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["id"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'Company','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Company"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'Person','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Person"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'EmailTo','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailTo"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'EmailFrom','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailFrom"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'BeginMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["BeginMessage"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'Text','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Text"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'EndMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EndMessage"]; ?></td>
<td> <input type="submit" id='<?php echo $data[$data_variable]["id"] ?>' value='Delete' class="delete-button" /> </td>
</tr>
<?php
}
?>
</table>
JQUERY/AJAX TO SEND AND THEN RECEIVE BACK FORM DATA TO/FROM PG2 TO ADD TO TABLE ABOVE - ALSO DELETE ROWS USING DELETE QUERY FROM PG3
<script>
//delete_task(); // Call the delete_task function
$(document).ready(function(){
$('#userForm').submit(function(e){
e.preventDefault();
$.ajax({
method: 'POST',
url: 'pg2.php',
data: $(this).serialize()
})
.done(function( data ) {$(data).appendTo('#table1').hide().fadeIn(2000);delete_task();
})
.fail(function() { alert( "Posting failed." ); });
return false;
});
});
function delete_task() {
$('.delete-button').click(function(){
var current_element = $(this);
var id = $(this).attr('id');
$.post('pg4.php', { list_entry_id: id }, function() {
current_element.parent().fadeOut(300, function() { $(this).closest('tr').remove(); });
});
});
}
</script>
</html>