Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 6 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

jQuery and PHP inline editing

Using jQuery and PHP to edit content directly in the page

AshleyAshley

Inline editing as it’s known, or being able to edit content directly on a page is a great tool have under your belt. I’m going to run through exactly how it works as well as how to POST the updated text content through to a PHP script for server side processing to put in the database.

The Code

It looks a little complex so i’m going to quickly run through exactly what’s going on.

  1. When you visit the demo page are presented with a block of text. If you hover your mouse over the text you’ll see a little edit icon similar to when you want to edit content on FaceBook.
  2. If the user clicks on the block of code the text is replaced with a form textarea with the option to save or cancel any changes.

EDIT

Now in a little more detail



function slideout() {
setTimeout(function () {
$("#response").slideUp("slow", function () {});
},
2000);
}

$(".inlineEdit").bind("click", updateText);

var OrigText, NewText;

$(".save").live("click", function () {

$("#loading").fadeIn('slow');

NewText = $(this).siblings("form").children(".edit").val();
var id = $(this).parent().attr("id");
var data = '?id=' + id + '&text=' + NewText;

$.post("update.php", data, function (response) {
$("#response").html(response);
$("#response").slideDown('slow');
slideout();
$("#loading").fadeOut('slow');

});

$(this).parent().html(NewText).removeClass("selected").bind("click", updateText);

});

$(".revert").live("click", function () {
$(this).parent().html(OrigText).removeClass("selected").bind("click", updateText);
});

function updateText() {

$('li').removeClass("inlineEdit");
OrigText = $(this).html();
$(this).addClass("selected").html('

').unbind('click', updateText); }

The PHP

In this example I haven’t added the database connection script. We basically POST the data to update.php and using PHP we echo back the results. You could quite easily add this data to the database.


$text = mysql_escape_string($_POST['text']);
$id = mysql_escape_string($_POST['id']);

echo $text;
// this is where you could add the updated text to the database where the database row id = $id for example.

The HTML

The HTML is simply a list item with the class ‘inlineEdit’ this makes the content of the element editable. The more elements that you add with this class, the more you can edit. notice how i’ve added an id of 1 to the example below. This could be a specific row in a database for example if you have multiple editable elements on a page.


jQuery Inline-Edit

Click the text below to edit it.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 19
  • James
    Posted on

    James James

    Reply Author

    yes it works…but I click on save it gives error like unidentified id on update.php…
    How to fix it?


  • poker2
    Posted on

    poker2 poker2

    Reply Author

    покер видео бесплатно, либо азартные игры джокер цена Игровые автоматы без регистрации игровой клуб place.


  • ahmed mahadi
    Posted on

    ahmed mahadi ahmed mahadi

    Reply Author

    Great tut … but i wonder if there is an example how to use this with more input and more forms in one page


  • chachkalica
    Posted on

    chachkalica chachkalica

    Reply Author

    jesus…great work, always wanted to make something like this…! :]


  • arifur rahman
    Posted on

    arifur rahman arifur rahman

    Reply Author

    nice tutorial, great job man.
    visit http://www.leaneveryday.net for asp.net and jquery tutorials.


  • Noj
    Posted on

    Noj Noj

    Reply Author

    Can i changed the textarea to textfield???


  • Putra
    Posted on

    Putra Putra

    Reply Author

    A good tutorial, question is what if there are two fields that will be in the edit in the database. Do you have to make two javascript code for each field ?, or with one javascrip code can change the data in each field? Can you can explain it ?, Thanks.


  • amarushakur
    Posted on

    amarushakur amarushakur

    Reply Author

    How do i make sure that the edited content is validated before it is saved. i want both a client side and php server side script please. Am using it for my final year project


  • Chris
    Posted on

    Chris Chris

    Reply Author

    I like this but is it possible to have multiple response boxes for multiple editable areas?

    For example I loop 10 rows of data which works great. I get 10 different boxes I can edit. The only thing is t he response and loading image always show up on the first one on the page. I can’t think of a way to do this?

    The code below is what I loop. Thanks

    <div class="inlineEdit" id="”>


  • Thomas
    Posted on

    Thomas Thomas

    Reply Author

    I finally got it working like I wanted.

    I changed this –

    var data = '?id=' + id + '&text=' + NewText;

    $.post("update.php", data, function (response) {

    to this

    $.post("update.php", { 'id' : id, 'text' : NewText }, function (response) {


    • Андрей
      Posted on

      Андрей Андрей

      Reply Author

      Спасибо за добавление. Очень помог Ваш пост.


    • Andrea
      Posted on

      Andrea Andrea

      Reply Author

      I was also having the problem with the id not showing in the PHP via $_POST. Changing it to the ‘id’:id format allowed the id to be ‘seen’ in the PHP.

      Ashley, can you explain why you are using the id=id format?

      Thanks…


    • James
      Posted on

      James James

      Reply Author

      yes it works…but I click on save it gives error like unidentified id on update.php…
      How to fix it?


  • Thomas
    Posted on

    Thomas Thomas

    Reply Author

    I’m having a little trouble. For some reason the id isn’t being posted to the php script.

    I don’t really know jQuery that well and can’t seem to figure out the problem myself. Any help you can provide would be great.

    Thanks.


  • Michael Bryan
    Posted on

    Michael Bryan Michael Bryan

    Reply Author

    The demo adds a quote at the end of the text in your demo at all times.

    $(this).addClass(“selected”).html(” + OrigText + ‘”

    should be

    $(this).addClass(“selected”).html(” + OrigText + ‘

    Not sure if you did it on purpose so something would always be added, just thought I’d point it out.

    Great script by the way.


  • George
    Posted on

    George George

    Reply Author

    Great work!


  • Enatom
    Posted on

    Enatom Enatom

    Reply Author

    My web app is virtually being built off this blog… drag & drop ajax sort… will use “username availability” next… will use this post next too. please keep making tuts like these, its a good blog for the average web developer. absolutely invaluable posts.

    I really need to read through all of your old posts, too… but if this blog has RSS I can port all the posts to my Ipod touch i could read them all offline on journies.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Enatom thanks for the feedback! you can easily subscribe to my feed the subscribe link’s at the top and bottom of each page.


  • Davinder
    Posted on

    Davinder Davinder

    Reply Author

    This is amazing, I love all the new ideas you come up with!
    Thank you