Inline edit with Jquery
I need an inline edit option for one of my projects. I searched about inline edit with jquery on web and found a useful java script code for inline edit.
Go to code homepage
It's a useful code and a great tutorial about inline edit. But it's not useful enough for my project. I need to save edited text area to my sql database. Let's take a look how to save it to sql database;
$(function(){
$('.editable').inlineEdit({control: 'textarea',cancelOnBlur: true, buttons: '<button class="save">Kaydet</button>', save: function(e, data) {
$.post(
'edit.php',
{msgid: this.id,data:data.value},
function(data){
if(data==no)
alert('Error!');
}
);
}});
});
First we use editable class for inline edit and add some options to inline edit class. I have a text area to edit so i used control:textarea.
Also it's a good visual feature cancel editing when user clicks out of textarea. So i used cancelOnBlur: true.
And added a button which saves changes. buttons: '<button class="save">Save</button>'
Now its the important part. İf you take a look to inline.js which you'll download the page i linked above we have some events. Ex. save,get,cancel. We have to write a function to save event which will save data to sql.
We send id and data to edit.php (we coded before) which edits sql and saves data to sql.
We have to send two variables. First msgid and second data.value. We know how to use ajax post method (i explained it in my ajax login post)
Finally we need to process the data we'll get result of sql operations. Example: if sql operation is successful we give an output echo 'yes' or echo 'no'
We have a function(data) to process data. If data==no we give an error with javascript.
You see it's easy to edit inline and save it to sql.
Thanks for great inline edit js to yelotofu.
tyln