CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Ben Smith
Ben Smith

Reputation: 27

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. 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

Here is my code at the moment...

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

Upvotes: 2

Views: 95

Answers (1)

Omari Victor Omosa
Omari Victor Omosa

Reputation: 2879

Lets me modify your code further with an alternative js and updated html in order to capture:

  1. unique ID of your content. assuming each record has to have a unique id column for easy update
  2. the content being edited

Here is a sample 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 

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

Upvotes: 1

Related Questions