[英]How can I update my Database using AJAX after the user has entered text?
I have created a table which has a column for notes, the notes are from a MySQL table and displayed.我创建了一个表,其中有一列用于注释,注释来自 MySQL 表并显示。 When the user clicks on the notes it'll convert to an input box and allow them to edit the text.
当用户单击注释时,它会转换为输入框并允许他们编辑文本。 How would I then update my table with the new data that's been entered, so when the user clicks off of the input box they've just entered text in, it'll update the notes column using the correct row ID
然后我将如何使用输入的新数据更新我的表格,因此当用户单击他们刚刚输入文本的输入框时,它将使用正确的行 ID 更新备注列
Here is my code at the moment...这是我目前的代码......
Javascript 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 HTML
<td data-editable contenteditable="true" id="note_text_db_column:<?php $note['notes_id']; ?>"><?= $note['notes_text']; ?></td>
PHP 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";
}
}
}
?>
Lets me modify your code further with an alternative js and updated html in order to capture:让我使用替代 js 和更新的 html 进一步修改您的代码以捕获:
- unique ID of your content.
您的内容的唯一 ID 。 assuming each record has to have a unique id column for easy update
假设每条记录都必须有一个唯一的 id 列以便于更新
- the content being edited
正在编辑的内容
Here is a sample HTML这是一个示例 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>
Here is the JavaScript that will pass the two variables to your PHP page to update on db这是将两个变量传递给您的 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>
and now Your PHP sample page to update your data现在你的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.