Как я могу обновить свою базу данных, используя AJAX после того, как пользователь ввел текст?

Question

Я создал таблицу, в которой есть столбец для заметок, заметки из таблицы MySQL и отображаются. Когда пользователь нажимает на заметки, он преобразуется в поле ввода и позволяет им редактировать текст. Как тогда я обновлю свою таблицу новыми введенными данными, поэтому, когда пользователь щелкает поле ввода, в которое он только что ввел текст, он обновляет столбец примечаний, используя правильный идентификатор строки

Вот мой код на данный момент ...

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";
        }
    }
} 
?>

Answer 1

Позвольте мне изменить ваш код далее с помощью альтернативного js и обновленного html, чтобы захватить:

1. уникальный идентификатор вашего контента. при условии, что каждая запись должна иметь уникальный столбец идентификатора для легкого обновления
2. содержимое , которое редактируется

Вот пример 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> 

Вот JavaScript, который передаст две переменные на вашу страницу PHP для обновления на БД

<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";
}
?>