![](/img/trans.png)
[英]How can I make my calendar value update to my database with my ajax POST method ?
[英]How can I update my Database using AJAX after the user has entered text?
我创建了一个表,其中有一列用于注释,注释来自 MySQL 表并显示。 当用户单击注释时,它会转换为输入框并允许他们编辑文本。 然后我将如何使用输入的新数据更新我的表格,因此当用户单击他们刚刚输入文本的输入框时,它将使用正确的行 ID 更新备注列
这是我目前的代码......
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$(function(){
$("#loading").hide();
//acknowledgement message
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_id = $(this).attr("id") ;
var value = $(this).text() ;
$.post('scripts/update-jobdiary-notes.php' , field_id + "=" + value, function(data){ //change this to your liveupdatingpage.php
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},1000);
}
});
});
});
});
</script>
HTML
<td data-editable contenteditable="true" id="note_text_db_column:<?php $note['notes_id']; ?>"><?= $note['notes_text']; ?></td>
PHP
//DATABASE CONNECTION
if(!empty($_POST))
{
//database settings
foreach($_POST as $field_name => $val)
{
//clean post values
$field_id = strip_tags(trim($field_name));
//from the fieldname:user_id we need to get user_id
$split_data = explode(':', $field_id);
$data_id = $split_data[1];
$field_name = $split_data[0];
if(!empty($data_id) && !empty($field_name) && !empty($val))
{
$stmt = $pdo->prepare("UPDATE ser_diarynotes SET notes_text = ? WHERE notes_id = ?"); //here just change name of your table and name of your unique_column
$stmt->bind_param("si", $val, $data_id);
$stmt->execute();
$stmt->close();
echo "Updated";
} else {
echo "Invalid Requests";
}
}
}
?>
让我使用替代 js 和更新的 html 进一步修改您的代码以捕获:
- 您的内容的唯一 ID 。 假设每条记录都必须有一个唯一的 id 列以便于更新
- 正在编辑的内容
这是一个示例 HTML
<style>
#status { padding:10px; position:fixed; top:10px; border-radius:5px; z-index:10000000; background:#88C4FF; color:#000; font-weight:bold; font-size:12px; margin-bottom:10px; display:none; width:100%; }
#loading { padding:10px; position:absolute; top:10px; border-radius:5px; z-index:10000000; background:#F99; color:#000; font-weight:bold; font-size:12px; margin-bottom:10px; display:none; width:100%; }
</style>
<div id="status"> </div>
<div id="loading"></div>
<table id="tableID">
<tbody>
<tr>
<!--Edit below by specifying notes_text column and notes_unique_id-->
<td data-editable contenteditable="true" id="note_text_db_column:<?php echo $note['notes_unique_id']; ?>"><?php echo $note['notes_text']; ?></td>
</tr>
</tbody>
</table>
这是将两个变量传递给您的 PHP 页面以在 db 上更新的 JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$(function(){
$("#loading").hide();
//acknowledgement message
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_id = $(this).attr("id") ;
var value = $(this).text() ;
$.post('liveupdatingpage.php' , field_id + "=" + value, function(data){ //change this to your liveupdatingpage.php
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},1000);
}
});
});
});
});
</script>
现在你的PHP示例页面来更新你的数据
<?php
//Your connection
$conn = new mysqli( 'localhost', 'db_user', 'user_password', 'your_db');
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $con->connect_error);
}
if(!empty($_POST))
{
//database settings
foreach($_POST as $field_name => $val)
{
//clean post values
$field_id = strip_tags(trim($field_name));
//from the fieldname:user_id we need to get user_id
$split_data = explode(':', $field_id);
$data_id = $split_data[1];
$field_name = $split_data[0];
if(!empty($data_id) && !empty($field_name) && !empty($val))
{
$stmt = $conn->prepare("UPDATE your_table SET $field_name = ? WHERE column_id = ?"); //here just change name of your table and name of your unique_column
$stmt->bind_param("si", $val, $data_id);
$stmt->execute();
$stmt->close();
echo "Updated";
} else {
echo "Invalid Requests";
}
}
}
else {
echo "Invalid Requests";
}
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.