edit a paragraph with user input using jquery

Question

This is an edit function like in CRUD system, but the idea is to simplify whereby when the user by using single or double click on an item, it will be turned into a field to directly update the data..

Demo here

The problem is I can't type anything into the field, I wonder why...

Html

<li style="list-style:none">click here to edit</li>

jquery

$(document).ready(function(){

$('li').click(function(){
   $(this).html("<input id='input' type='text'>");
});

$('#input').blur(function(){
  var newVal = ('#input').val();
      $('li').text('newVal');   
   });
});

jEditable plugin? appelsiini.net/projects/jeditable/default.html — tonoslfx
– tonoslfx, Commented Aug 1, 2013 at 13:55
this is a good plugin to do stuff like this. Have a look to see if it fits your purpose. vitalets.github.io/x-editable/index.html — azzy81
– azzy81, Commented Aug 1, 2013 at 13:57
@tonoslfx He almost has it working, why bloat everything with a plugin when html5 contenteditable would do. — Parrotmaster
– Parrotmaster, Commented Aug 1, 2013 at 14:02

Ferdinand Torggler · Accepted Answer · 2013-08-01 14:11:28Z

2

It is because a click on the textfield is also a click on the 'li'. Therefore it adds a new textfield when you click on the existing textfield.

Here is the working fiddle: http://jsfiddle.net/DNmNE/5/

And the code:

$(document).ready(function(){
    $('li').click(function(){
       input = $("<input id='input' type='text'>").blur(function(){
          $('.editable').removeClass('editable');
          var newVal = $(this).val();
          $('li').text(newVal);   
       });
       if (!$(this).hasClass('editable'))
           $(this).addClass('editable').html(input);
    });
    });

I used the .editable class to detect if a textfield is already open.

edited Aug 1, 2013 at 14:11

answered Aug 1, 2013 at 13:56

Ferdinand Torggler

1,43211 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stano Over a year ago

Please add also input = $("<input id='input' type='text' value='"+this.innerHMTL+"'>"). ... to your code.

cgpa2.17 Over a year ago

a)input is a variable?

Parrotmaster Over a year ago

@Stano It was accepted as the correct answer to the question, and seems to be working fine to me. It does work correctly.

Ferdinand Torggler Over a year ago

@Nurul Yes, input is a variable, you need it to bind the blur event and use it later to set HTML content. I just forgot to write 'var' because I'm used to CoffeeScript ;)

Stano Over a year ago

@Parrotmaster Partially, it always creates the empty input element. But it's easy to fix. Ferdinand's answer is great, so of course +1.

Jonathan Römer · Accepted Answer · 2013-08-01 13:55:59Z

1

Well my amigo, you are appending a new input everytime you click so you need to type real fast (just kidding). But thats the problem. loose the li click function.

answered Aug 1, 2013 at 13:55

Jonathan Römer

6285 silver badges25 bronze badges

Comments

Richard A. · Accepted Answer · 2013-08-01 13:57:13Z

0

Just a thought, but have you considered using the HTML5 contenteditable functionality?

http://html5demos.com/contenteditable

Obviously, it's not going to work in obsolete browsers, but if you're not concerned with that then it will save you a lot of work as your application grows.

answered Aug 1, 2013 at 13:57

Richard A.

1,1571 gold badge7 silver badges18 bronze badges

4 Comments

Richard A. Over a year ago

Why is that an issue? Not why might it be an issue, but why would it be a problem in @Nurul's example?

cgpa2.17 Over a year ago

my whole project is almost in jquery, is there anything that is similar to HTML5's contenteditable can be done in jquery? or a custom logic perhaps?

Parrotmaster Over a year ago

localstorage is.....local. Only the person editing it can see it, which I doubt is what he wants. Plus it easily gets thrown away by a simple delete of the browsers cache.

Richard A. Over a year ago

True, but the same .blur() functionality can be applied to any element in most modern browsers. A quick AJAX routine can POST the new content to the server :)

Collectives™ on Stack Overflow

edit a paragraph with user input using jquery

3 Answers 3

5 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related