Inline Editing with jQuery

Posted on by

We’ve all heard of in-line editing. Flickr uses it for many things such as changing the title or description of one of your pictures.

For those of you who dont know, in-line editing is when you can just click on text, and it becomes a text box which the user can then edit. When the user hits enter, the edited text is sent to a script, which can do some magic, like submitting the text to a database.

Now, thanks to Dylan Verheul, doing this with jQuery could never be easier. He has created a plugin called Editable, which makes it possible to create in-line editing fields with one simple line of code.

$(element).editable(url, options);

The source code, along with a (broken fixed) demo can be seen here. I have put together a simple working demo on my website, here.

33 thoughts on “Inline Editing with jQuery

  1. Dylan Verheul on said:

    You’re right, my demo is broken. Must be because I switched to another webhost, I’ll look into it later today.

  2. Lee Willis on said:

    The demo seems to suffer somewhat from an over-zealous use of addslashes :) – other than that looks great!

  3. Both demos are working, however the second one has an issue with apostrophes where it inserts a forward slash.

    Great plugin though. I wondered if jQuery could easily do inline editing.

  4. Yeah, john is working on the new design currently. When he’s done, you will all know who is writing, along with our gravatar for a little visual representation.

  5. Pingback: Inline Editing with jQuery

  6. Maybe the saving should also be triggered by onBlur()?
    When you don’t use the enter key you loose your changes?

  7. Yeah i was thinking that too, but then you would have no way to cancel it. If you enter something then realize you didnt want to edit that one, there would be no way to cancel the entry.

  8. Drydenmaker on said:

    Nice work. One improvement I would like to see would be indication that the item was saved outside of the item that was edited. If you want to edit twice you have extra text in there… Just a thought… thanks.

  9. Im having a little trouble with getting the results back into the control when its changed, could you show the editable_post.php code, im just trying to figure out how post variables are checked for.
    cheers guys.

  10. @Drydenmaker, thats just an example. You could also have a callback function in the options, like this:
    $(element).editable(“editable_post.php”, {callback: function(something) {
    $(‘feedback’).show();
    }, saving:””});
    Note that hasnt been tested, but should work.

    @Geezer, I have updated my page. Check it out.

  11. Great… but…

    How to differ the various input fields on server?

    In PHP i get only $_POST['q'] for all fields.

  12. ned, you have two options, since the plugin doesnt directly support that.

    1. Make each element editable with a different line of code, and add extras, like {extraParams:{field:’Username’}} or something similar, then get the extras like $_POST['field'] or whatever.

    2. Edit the plugin yourself to use the id or name of the element as a seperate parameter.

  13. Got it working now. I added an additional option of size:
    and added i.size = options.size;
    in the function to allow me to set length of input.

    worth pointing out if your using lots of differing variables on the page you need to adjust the classname.

    “.$fullresult["products_name"].”

    $(document).ready(function() {$(“.products_name”).editable(“_getaddress.php”, {saving:””, extraParams:{products_name:1,orders_id:,orders_products_id:},size:70 });});

    otherwise you run into problems with post variables getting all confused.

  14. Fantastic plug-in, thanks guys.

    On the onblur issue maybe keep the onBlurDelay option but add an onBlur param that you can attach a function to.

  15. Neil Merton on said:

    This looks very promising, so thanks for the hard work.

    However, I’m having a little diffeculty understanding how to implement this so that I can update items in a list. I’m using ColdFusion and have the action setup to update a DB with the following parameters:

    ID = #url.ID#
    and
    WebPrice = #url.price#

    When I submit the field (#qCarsList.WebPrice# where the id will be price1 and qCarsList.WebPrice is the SQL query that gets the list of items) I get an error returned to the edit area saying the price was not found in the url scope. This means that the content from #qCarsList.WebPrice# isn’t being passed over.

    I think where I need to do something is with the extraParams part of the Javascript, but I need some guidence here:

    $(document).ready(function()
    {
    $(“.editor”).editable(“price.cfm”, { saving:””, extraParams:{id:42} });
    });

    Any help would be greatly appreciated.

    Thanks in advance.

  16. Like i said above, you have two options.

    1. Make each element editable with a different line of code, and add extras, like {extraParams:{field:’Username’}} or something similar, then get the extras like $_POST['field'] or whatever.

    2. Edit the plugin yourself to use the id or name of the element as a seperate parameter.

  17. Has / could anyone put together a PHP / MySql with a html table frontend? Does anyone fancy some freelance work? I can’t get my head round it. My brain hurts.

    If anyone does fancy it, mail me: rob {at} electricsnow {dot} {co} {dot} {uk}

  18. Pingback: Ernest’s Blog » Blog Archive » Inline editing

  19. This one makes sence “One’s first step in wisdom is to kuesstion everything – and one’s last is to come to terms with everything.”

  20. Jake on said:

    Hi,

    like Rob above, I would love some sample code in PHP / MySql with a html table frontend!

    jake_morgan {at} yahoo {dot} {com}

  21. i am too, solve this problem but not use jquery

    this code dont use CSS and dynamicly create TextEdit after element , and after edited delete TextEdit

    and works ENTER_event in TextEdit

    works on Fx IE Opera

    TAG : inline edit text javascript html

    =======JAVASCRIPT=============================================
    function insertAfter(newElement,targetElement)
    {
    var parent = targetElement.parentNode;
    if(parent.lastchild == targetElement)
    {
    return parent.appendChild(newElement);
    }
    else
    {
    return parent.insertBefore(newElement, targetElement.nextSibling);
    }
    }

    function editWord(obj)
    {
    obj.style.display = ‘none’ ;

    var newInput = document.createElement(“input”);
    newInput.id = “newInput” ;

    if (navigator.appName.indexOf(“Microsoft”) != -1 )
    {
    newInput.onblur = function(){loseFocus(this)};
    newInput.onkeydown = function(){return PressKey(event , this)};
    }
    else
    {
    newInput.setAttribute(“onkeydown” , “return PressKey(event , this)” );
    newInput.setAttribute ( “onblur” , “loseFocus(this)” );
    }

    edit = insertAfter(newInput , obj);
    edit.value = obj.innerHTML;
    edit.size = obj.innerHTML.length*1.4 + 5;
    edit.focus();
    }
    function loseFocus(obj)
    {
    obj.style.display = ‘none’ ;
    var tt = obj.previousSibling;

    if (obj.value == “”)
    {
    tt.innerHTML = “empty”;
    tt.style.display = ‘inline’;
    }
    else
    {
    tt.innerHTML = obj.value + ” “;
    tt.style.display = ‘inline’;
    }

    obj.parentNode.removeChild(obj);
    }

    function PressKey(e , obj)
    {
    var keynum;
    var keychar;
    var numcheck;

    if(window.event) // IE
    {
    keynum = e.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
    keynum = e.which;
    }

    if(keynum == 13)
    {
    obj.blur();
    }
    else
    {
    obj.size = obj.value.length*1.4 + 5 ;
    }

    numcheck = /\d/;
    return !numcheck.test(keychar);
    }

    =================================================

    ==========HTML===========================
    Some text edit , please DOUBLE CLICK on this text

    OPEN_TAG a href=”#self” ondblclick=”editWord(this)” CLOSE_TAG Some text edit , please DOUBLE CLICK on this text OPEN_TAG/aCLOSE_TAG
    ===========================================

  22. And another good feature i forgot to mention is you just add as many attribute as you want to the element and this plugin (http://aamirafridi.com/jedit) will send all attributes to target page.

    you can use data attribute like e.g. data-db_table=’orders’

    so plugin will strip data- and will send db_table so on the receiving end (save.php) you will have $_POST['db_table'] //value: orders

    Complete example:

    James

    data-posturl: url of target page
    data-datatype: can be anything, here i am using it to send table field name
    data-formfieldtype: when u click/dblclick this will show textbox (which can be select for drop down, textarea etc)

    So i will use:
    $(“[rel='jedit']“).each(function(){ $(this).editable(); });

    And on ajax/saveRecipient.php :

    ‘;

    $addressId = $_POST['class'];
    $value = $_POST['value'];
    $datatype = $_POST['datatype'];

    if(strlen(trim($value))!=0) mysql_query(“UPDATE customer_address_book SET $datatype = ‘$value’ WHERE address_id=$addressId”,$database);

    ?>

    200
    OK
    jEditInPlace

  23. За статью сенкс, все по делу, достаточно много кто это применяет на практике