Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

jQuery editable – Edit in place/Inline editing

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.

If you find any problem in this than let me know by comment.
 

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.

Enter your email address:
 
Feel free to ask any question. Just leave your comment below and we will answer your comment with in 24 hours.
Share:

15 Comments

Leave a Reply

Your email address will not be published.