2009-08-08 16 views
0

通常のテキスト(モデルから来たもの)の横に編集ボタンがあるインプレース編集を行いたいとします。編集ボタンをクリックすると、編集可能なテキストボックスを通常のテキストが表示された場所に表示し、AJAX経由で変更をコミットします。私はすでにコミットする方法を解決しましたが、編集コントロールをテキストが以前の場所に正確に配置する方法がわかりません。これはおそらくあなたのための簡単なJSの達人です。ASP.NET MVC/jQuery:インプレース編集

編集ボタンがクリックされたとき、適切な編集ボックス(通常のテキストのテキストボックス、日付のカレンダーなど)をフェッチする必要があるかどうか、私は思った。ページが必要になるまで隠しておいてください。または、何らかの形でクライアント側で単一のインスタンスを再利用できますか?

申し訳ありませんが、これは2つの質問の1つですが、密接に関連しています。

ありがとうございました!

答えて

2

私はJEditableをお勧めします。これは以前使用していたもので、とてもうまく動作します。

例:

マークアップ

<div class="editable_text" id="my_text">My Text</div><a href="#" class="trigger_editable">Edit</a> 

のjQuery

$(".editable_text").editable("YOUREDITURLHERE", { event : "edit" }); 
$(".trigger_editable").bind("click", function() { 
     $(this).prev().trigger("edit"); 
}); 

は、この情報がお役に立てば幸いです。

3

ボタンの配置に問題があるかどうか不明です。しかし、この目的のために設計されたいくつかのjqueryプラグインがあります。これらのうちの1つがJeditableで、デモを見つけるhere

2

その後、ストア変数で編集のためのマークアップ、変数に編集する前に現在のマークアップを保存する(キャンセルボタンが押された場合ので、あなたは戻すことができます)とjQueryを使用してそれを切り替える:

var editmarkupvariable = [editmarkup]; 
var revertmarkup = $("#item").html(); 
<div class="item"> 
    [markup] 
</div> 

$("#item").html(editmarkupvariable); 

このチュートリアルではさらに詳細を説明します: http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-brary/15/

両方の質問に答えてください。

コードを手渡す必要がなければ、jqueryプラグインを使ってこれを行うことができます。ここには1つがあります:http://aktagon.com/projects/jquery/in-place-edit

0

問題は厳密にテキスト編集である場合は、なぜあなたは両方の目的のために、単一のテキストエリアを使用することはできませんし、編集ボタンをクリックしたときにdisable属性(そしておそらくbackground-color & borderスタイルを)切り替えますか?

関連する問題