Hello Friends,

Are you working with jQuery and want to update record in database with inline editing ? Yesterday i worked with jQuery-Ajax and update records in database without submission of form. You might be aware with jQuery-Ajax and update records in database but if you are looking for edit in place than here i am showing a way to edit a record in place.

When you click on text (div) , it will open a textbox & submit button. Once you will enter value in textbox and press submit, it will call one php file. You can write SQL query to update record in database. Follow the below steps and you will come to know that how easy to update record!!

1) Download jquery-1.3.2.min& jquery.jeditable.

2) include both files in your file.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>

3) Put your value in this div.

<div class="edit_text" id="{id}">{value}</div>

4) Call to editable function as per below.

<script language="javascript">
$(function() {
  $(".edit_text").editable("save_title.php", {
      indicator : "<img src='indicator.gif'>",
      submitdata: { _method: "put" },
      select : true,
      submit : 'Update',
      cssclass : "editable",
      width : "10",
      loadtext  : 'Updating…'
  });
});
</script>

5) Get the id and value and save it in save_title.php file.

<?php
// DATABASE CONNECTION

$id = $_POST['id'];
$value = $_POST['value'];

if($id && $value)
{
    // UPDATE QUERY TO DATABASE
}
echo $value;

?>

Thats it.

To know more about programming,JavaScript issues,jQuery,Expression Engine,MYSQL database and Open-source, enter your email address below. We will send you free tutorials.

Subscribe to ProgrammingFacts via Email