1

HI, I'm trying to add edit in place functionality to my site with jquery. I don't want to use a plugin, so my idea was that when you click the div that has the content in it, it would replace the div with a text box, then on blur it would submit a post to save the content.

So far I have the click event, but I'm not sure how to replace the div with a text box, and then make it submit on blur, I can probably figure out the ajax request though.

Any help would be great, thanks. So far this is what I have... just the click event:

$('.control-panel-profile-update').click(function() {
      alert('Handler for .click() called.');
    });
Bill
  • 5,478
  • 17
  • 62
  • 95

3 Answers3

3

It's not completely written, and it might not completely work, but it's worth a shot. Good luck:

$('.control-panel-profile-update').live('click', function() {
  $(this).replaceWith('<input type="text" id="inlineEdit" value="' + $(this).html() + '" />');

  $('#inlineEdit').focus().live('blur keyup', function(event) {
    if (event.keyCode && event.keyCode != 13) return false;

    $(this).replaceWith('<div class="control-panel-profile-update">' + $(this).val() + '</div>');
  });
});

Here's a Fiddle: http://jsfiddle.net/Af6X6/2/. I added support for the enter key too.

Blender
  • 289,723
  • 53
  • 439
  • 496
  • Blender... seems to be working, is there a way to take the value that's in the div and put it into the value of the text box that's generated? – Bill Feb 12 '11 at 03:17
  • Also, seems to not be clearing the text box on blur, I wouldnt mind if it was only submitted when they press enter, and when the text box was clicked away it woudld go back to the way it was – Bill Feb 12 '11 at 03:19
  • I like your implementation alot +1 – Loktar Feb 12 '11 at 04:38
  • It's less compact than yours, though, and it assigns an ID to the element, so that might be conflicting. +1 for `contenteditable`, though. I didn't even know about it! – Blender Feb 12 '11 at 04:45
3

There are two ways to do this, in modern browsers you can use contenteditable=true, and then on blur send the new contents on their way. This takes care of having to swap out a textarea.

<div contenteditable="true">Some Text</div>

or you can do it the js way.

http://jsfiddle.net/2RyT2/23/

$(function(){
    $("#meText").live('click',function(){
        var originalDiv = this;
            $(this).replaceWith($("<textarea></textarea>").text($(this).text()).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).text($(this).val()));}));
    });
});
Loktar
  • 34,764
  • 7
  • 90
  • 104
  • You may want to look at blenders answer as well, his is a bit more elegant than mine. replaceWith is probably a better way to go. – Loktar Feb 12 '11 at 03:03
  • Hmm thanks, yea his seems to make a little more sense. I'm getting lost with the whole that, this, text, etc. – Bill Feb 12 '11 at 03:16
  • Ok I updated my answer, blender gets some credit for the use of replaceWith() for sure. – Loktar Feb 12 '11 at 03:26
  • I'd add a `.focus()`. It would confuse the user if they have to click and then click again to exit. But The textarea is a pretty good idea. Adding a `style="resize: none;"` would make it look a bit more inputy. – Blender Feb 12 '11 at 04:33
0

One of the solutions is to add a hidden div with a textbox in it.

<div style="display:none; id="textbox_container">
<textarea id="box"></textarea>
</div>

Then in your click function, you show the textbox

$("#textbox_container").show();

You can update the value of the textbox with .val("")

Hope this helps.

Rafal
  • 2,576
  • 2
  • 18
  • 13