Home > JavaScript > jQuery editable – Edit in place/Inline editing

jQuery editable – Edit in place/Inline editing

Hello Friends,

Are you working with jQuery and want to update record in database withinline 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.minjquery.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 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.

Advertisements
Categories: JavaScript
  1. Umer
    November 15, 2012 at 8:20 am

    i was watching your code. have you some example of this script. i want call this script on my edit button …i am waiting your reply

  2. Iphone game developers for hire
    November 16, 2012 at 10:09 am

    Pretty nice post. I just stumbled upon your weblog and wanted to say that I have
    really enjoyed surfing around your blog posts. After all I will be subscribing on your
    feed and I hope you write once more very soon!

  3. December 13, 2012 at 2:19 am

    Many grant writers have programs set up that allows the crooks to
    do work for one particular mother without charging
    her. This will lower the down payment and can even reduce the closing costs.
    For single mothers, getting a home which offers programs
    that help in financing and obtaining deposit financing is pivotal.
    Single mothers can contact local service offices to get more
    details. The grants can help you so that you can afford the education you need
    for any successful career.

  4. February 3, 2013 at 2:15 am

    What’s up, for all time i used to check webpage posts here early in the break of day, since i love to find out more and more.

  5. Maryann
    March 8, 2013 at 11:56 pm

    Its for example you read my mind! You seem to understand much approximately this, as you
    wrote the e-book onto it as well which is. I think that you
    just can employ some percent to pressure the information home a little, but instead of that, this really
    is great blog. An excellent read. I will certainly return.

  6. Louis Vuitton
    March 15, 2013 at 2:03 pm

    Wow, this paragraph is fastidious, my sister is analyzing such
    things, therefore I am going to inform her.

  7. April 6, 2013 at 8:28 pm

    I love it when people come together and share views.

    Great blog, stick with it!

  8. May 12, 2013 at 7:38 pm

    Fine spot. I like it a lot… but why is it so short?

  9. education for children
    February 10, 2014 at 4:52 pm

    I constantly emailed this web site post page to all my contacts, as if like to read it next my friends will too.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: