making element editable

Discussion in 'Javascript' started by Eduardo, Dec 22, 2011.

  1. Eduardo

    Eduardo Guest

    Hi,

    I wrote the following piece of code so that (a) when I click on a
    paragraph, (b) it's content is copied, (c) the paragraph is replaced
    with a text area and (d) the content from the former paragraph is
    inserted into the new text area:

    $(document).ready(function() {

    $('p').click(function() {
    var content = $(this).html();
    $(this).replaceWith($('textarea'));
    $('textarea').html(content);
    });

    });

    Well, it's not working on Firefox 8.0. Any suggestions?

    Thanks,

    Eduardo

    P.S.: Yes, I intend to put together something similar to Jeditable
    (http://www.appelsiini.net/projects/jeditable) but for local editing
    only, without sending edited elements to a server.
     
    Eduardo, Dec 22, 2011
    #1
    1. Advertising

  2. Eduardo

    Eduardo Guest

    Thanks for helping, Stefan. You made me see I should use "<textarea></
    textarea>" instead of just "textarea" to add the element. Working code
    is:

    $(document).ready(function() {

    $('p').click(function() {
    var content = $(this).html();
    $(this).replaceWith($('<textarea></textarea>').html(content));
    });


    });

    Eduardo

    On Dec 22, 5:33 pm, Stefan Weiss <> wrote:
    > On 2011-12-22 19:47, Eduardo wrote:
    >
    > > I wrote the following piece of code so that (a) when I click on a
    > > paragraph, (b) it's content is copied, (c) the paragraph is replaced
    > > with a text area and (d) the content from the former paragraph is
    > > inserted into the new text area:

    >
    > > $(document).ready(function() {

    >
    > I don't have any experience with jQuery, but I'll hazard a shot in the dark:
    >
    > > $('p').click(function() {
    > >     var content = $(this).html();
    > >     $(this).replaceWith($('textarea'));
    > >     $('textarea').html(content);

    >
    > From what I remember, $('textarea') would select any existing textareas
    > in the document. You'll want to create a new one:
    >
    >     var ta = $("<textarea>");   // add attributes as required
    >     ta.val(content);
    >     $(this).replaceWith(ta);
    >
    > If that works, I'll add "jQuery expert" to my CV (right after "HTML
    > programmer"). ;)
    >
    > - stefan
     
    Eduardo, Dec 22, 2011
    #2
    1. Advertising

  3. Eduardo

    Eduardo Guest

    Well, I then went on to turning the textarea back into a paragraph
    after edition, but the following code works only once:

    $(document).ready(function() {

    $('p').click(function(event) {
    event.stopPropagation();
    var content = $(this).html();
    $(this).replaceWith($('<textarea></textarea>').html(content));
    });

    $('html').click(function() {
    var content = $('textarea').html();
    $('textarea').replaceWith($('<p></p>').html(content));
    });


    });

    Any suggestions?

    Eduardo

    On Dec 22, 6:14 pm, Eduardo <> wrote:
    > Thanks for helping, Stefan. You made me see I should use "<textarea></
    > textarea>" instead of just "textarea" to add the element. Working code
    > is:
    >
    > $(document).ready(function() {
    >
    > $('p').click(function() {
    >         var content = $(this).html();
    >         $(this).replaceWith($('<textarea></textarea>').html(content));
    >
    > });
    > });
    >
    > Eduardo
    >
    > On Dec 22, 5:33 pm, Stefan Weiss <> wrote:
    >
    >
    >
    >
    >
    >
    >
    > > On 2011-12-22 19:47, Eduardo wrote:

    >
    > > > I wrote the following piece of code so that (a) when I click on a
    > > > paragraph, (b) it's content is copied, (c) the paragraph is replaced
    > > > with a text area and (d) the content from the former paragraph is
    > > > inserted into the new text area:

    >
    > > > $(document).ready(function() {

    >
    > > I don't have any experience with jQuery, but I'll hazard a shot in the dark:

    >
    > > > $('p').click(function() {
    > > >     var content = $(this).html();
    > > >     $(this).replaceWith($('textarea'));
    > > >     $('textarea').html(content);

    >
    > > From what I remember, $('textarea') would select any existing textareas
    > > in the document. You'll want to create a new one:

    >
    > >     var ta = $("<textarea>");   // add attributes as required
    > >     ta.val(content);
    > >     $(this).replaceWith(ta);

    >
    > > If that works, I'll add "jQuery expert" to my CV (right after "HTML
    > > programmer"). ;)

    >
    > > - stefan
     
    Eduardo, Dec 22, 2011
    #3
  4. Eduardo

    Thomas Allen Guest

    Eduardo <> wrote:
    > Well, I then went on to turning the textarea back into a paragraph
    > after edition, but the following code works only once:
    >
    > $(document).ready(function() {
    > $('p').click(function(event) {
    > event.stopPropagation();
    > var content = $(this).html();
    > $(this).replaceWith($('<textarea></textarea>')
    > .html(content));
    > });


    It only works once because the original event targets are being
    destroyed or otherwise removed from the document. You need to bind to
    the paragraph's click event once again.

    Another option is to listen to the body's click event and determine if
    your element was clicked. This delegation will work no matter how many
    times you destroy the element, provided your replacement can be found.

    > $('html').click(function() {
    > var content = $('textarea').html();
    > $('textarea').replaceWith($('<p></p>').html(content));
    > });


    I think that you want to listen to the textarea's "blur" event here
    instead.

    Thomas
     
    Thomas Allen, Dec 22, 2011
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stephan Bour

    Making datagrid partially editable

    Stephan Bour, Jan 29, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,027
    Stephan Bour
    Jan 30, 2004
  2. =?Utf-8?B?cG11ZA==?=

    Making ONLY 2 columns editable in a datagrid

    =?Utf-8?B?cG11ZA==?=, Jan 10, 2005, in forum: ASP .Net
    Replies:
    8
    Views:
    3,363
    =?Utf-8?B?Q2hpbm1heQ==?=
    Jan 26, 2005
  3. Making editable datagrid.

    , Oct 13, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    151
  4. UJ
    Replies:
    1
    Views:
    579
    chandan
    Jan 15, 2007
  5. Prasad Peesapati

    Making a cell editable on clicking the cell

    Prasad Peesapati, Feb 3, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    127
    Prasad Peesapati
    Feb 3, 2005
Loading...

Share This Page