jQuery: onclick, edit field and show+save into an variable

Question

Right now I have this in Javascript without jQuery:

Here is it: http://jsbin.com/ewihu3

It's working just fine, but I wish to use jQuery for making the code simpler and shorter.

I want exactly same things to do as on the example above, that when you click on the text, it should turn into an input field. And on blur it should display what you've edited in the box, and then make a variable (like e.value on the example above) so I can send that in a ajax call later.

How can i do this in jQuery?

Answer 1

You can use the jEditable plugin

Or you can start something similar pretty simply by yourself too, with something like this:

$('span.editable').click(function() {
   var input = $('<input type="text" />', {
      value: $(this).text()
   }).click(function() {
      $.get('editsave.php?tekstny=' + $(this).value(), function(response) {
         var span = $('span', {
            text: response
         });
         $(this).replaceWith(span);
      });
   });
   $(this).replaceWith(input);
});