javascriptを使用してtextareaで要素を置き換える方法

Question

私が作成しているのは、基本的にユーザーが自分自身について追加した説明用のテキストボックスを持つユーザープロファイルです。ユーザーがプロフィールを編集できる別のページがありますが、ユーザーが説明欄にカーソルを置くとeditボタンが表示されるという機能を提供したいと考えています。

ユーザーがそのボタンをクリックすると、そこの記述フィールドを編集でき、バックエンドはAjaxを使用して更新されます。 ajax呼び出しとバックエンド処理は簡単ですが、htmlをtextareaとsubmitボタンに置​​き換えて、元のhtmlをjavascriptを使用して元に戻すにはどうすればよいですか。ここで

は、誰かが私がdescTextで元のテキスト、およびupdateボタンを含むtextareaでpersonalText内のhtmlを交換したいeditButtonをクリックすると、私のHTMLは

<div id="personalText" > 
    <a href="#" id="editButton"> edit </a> 
    <p id="descText">{{profile.desc}}</p> 
</div> 

のように見えるものです。ユーザーがテキストを編集して更新をクリックすると、バックエンドモデルを更新して、<a>タグと<p>タグを再度挿入します。

誰でも手助けできます。私はそれの部分を行う方法を知っているようだが、元の構造をどのように置き換えるかを把握することはできないupdateをクリックしてください。

Answer 1

DOM要素を作成/破棄する代わりに、オプションを非表示にすることができます。

<div id="personalText" > 
    <div class="display"> 
     <a href="#" id="editButton">edit</a> 
     <p id="descText">{{profile.desc}}</p> 
    </div> 
    <div class="edit" style="display:none;"> 
     <input type="submit" value="Update"/> 
     <textarea>{{profile.desc}}</textarea> 
    </div> 
</div> 

jQueryでは、単純に要素を切り替えて、自分のajax投稿を処理できます。

$("input[type='submit']").on("click", function() { 
    $.ajax({ 
     url:"/your/url/" 
    }).success(function(){ 
     $(".display, .edit").toggle(); 
     $("#descText").html($("textarea").val()); 
    }); 
    return false; 
}); 

Example on jsfiddle

Answer 2

$('#editButton').click(function(){ 
    var text = $('descText').text(); 
    var textArea = $('<textarea></textarea>'); 
    textArea.value = text; 
    $('#personalText').replaceWith(textArea); 
});