Jquery get
html and replace with text box

Question

I have a link, when I click on it, it should select a div p tag contents and replace the p tag with text box and previously stored contents.

Now my code is removing the p tag and adding text box but it is removing text box immediately and inserting p tag. After user presses enter, I want ajax fn to be called.

This is what I tried,

<a href="" id="den">DEN</a>
<div id="test">
<p id="x">I am doing good</p>
</div>
 $("#den").live("click", function () {
       var con = $("#test >p#x").html();
       $("#test > p#x").remove();
       $("#test > p#x").append('<textarea type="text" value='+con+'></textarea>');

}); 
        });

Matt Ball · Answer 1 · 2013-03-22T18:15:07.577

After you remove #x, it's not in the DOM, so appending to it useless. If you want to replace the element's contents, use .html() instead. Also, <textarea>s have text content, not value attributes.

$("#den").live("click", function () {
    var con = $("#test >p#x").html();
    $("#test > p#x").html('<textarea type="text">'+con+'</textarea>');
});

Note, since element IDs must be unique, the selector #test > p#x is grossly overspecified, and is equivalent to simply #x. There's also a simpler, idiomatic way to accomplish this entire task:

$("#den").live("click", function () {
    $("#x").html(function (i, oldHtml) {
        return '<textarea type="text">'+oldHtml+'</textarea>';
    });
});

http://jsfiddle.net/mattball/PSV7A/

Anoop · Accepted Answer · 2013-03-22T18:11:38.313

2

You can not make changes in removed element JSFIDDLE

Note . textarea does not have type attribute

and . Setting value of textarea would not show in box

<a href="" id="den">DEN</a>
<div id="test">
<p id="x">I am doing good</p>
</div>
 $("#den").on("click", function () {
   $("#test > p#x").html('<textarea >' +  $("#test >p#x").html() +'</textarea>');
 return false;

});

edited Mar 22 '13 at 18:11

answered Mar 22 '13 at 17:24

Anoop

23,044
10
62
76

:Did you test this code ? – ram Mar 22 '13 at 17:49
No, but I tested how textarea work – Anoop Mar 22 '13 at 17:55
:can you show me the working code ? – ram Mar 22 '13 at 18:08
I added working jsfidle link – Anoop Mar 22 '13 at 18:11
:It worked, now when I enter, how do I call ajax fn. – ram Mar 22 '13 at 18:16
:But why return false at the end. – ram Mar 22 '13 at 18:18
You can bind you button. on button click call a jquery AJAX with required parameters http://api.jquery.com/jQuery.ajax/ – Anoop Mar 22 '13 at 18:19
@ram to prevent default behaviour of anchor(a) tag – Anoop Mar 22 '13 at 18:21
2 overkills here : First, `$("#test > p#x")` is called twice. For optimisation, you should put it in a variable. `var px = $("#test > p#x"); px.html(...)`. Second, as id should be unique, `$("#test > p#x");` should be `$("#x");`. Finally, you should have : `var px = $("#x"); px.html(...)`. – Shikiryu Mar 23 '13 at 07:16

Jquery get html and replace with text box

2 Answers2

Jquery get
html and replace with text box