Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > making element editable

Reply
Thread Tools

making element editable

 
 
Eduardo
Guest
Posts: n/a
 
      12-22-2011
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.
 
Reply With Quote
 
 
 
 
Eduardo
Guest
Posts: n/a
 
      12-22-2011
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 <(E-Mail Removed)> 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


 
Reply With Quote
 
 
 
 
Eduardo
Guest
Posts: n/a
 
      12-22-2011
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 <(E-Mail Removed)> 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 <(E-Mail Removed)> 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


 
Reply With Quote
 
Thomas Allen
Guest
Posts: n/a
 
      12-22-2011
Eduardo <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to Update/insert an xml element's text----> (<element>text</element>) HANM XML 2 01-29-2008 03:31 PM
Really simple question - making a dataset editable through a datagrid. UJ ASP .Net Datagrid Control 1 01-15-2007 12:28 PM
Making editable datagrid. trialproduct2004@yahoo.com ASP .Net Datagrid Control 0 10-13-2005 12:00 PM
Making ONLY 2 columns editable in a datagrid =?Utf-8?B?cG11ZA==?= ASP .Net 8 01-26-2005 08:43 AM
Making datagrid partially editable Stephan Bour ASP .Net 4 01-30-2004 03:02 PM



Advertisments