jquery-ui - 複数行のJQueryダイアログ

Question

オブジェクトのリストがあります。各オブジェクトには独自の値があります。Webページでは、行として表示されます。私がやりたいのは、特定の行のリンクがクリックされたときにポップアップするJQueryダイアログを追加することです。それを行うための最良の方法は何ですか？すべての行にダイアログを定義するのが良いですか、それとも1つだけを使用するのが良いですか？問題は、ダイアログ内の要素に到達して行データで埋めることができないことです。これに関する良い例はありますか？ありがとうございました

Answer 1

1つのダイアログを使用するだけで、最初は非表示にする必要があります。

<div id="rowDialog" style="display:none">
  <div id="rowDialogDiv">in here we are
  </div>
  <button id="rowDialogButton>Custom button</div>
</div>

ダイアログを初期化します。最初は表示しません。

$('#rowDialog').dialog({ autoOpen: false });

行のイベントハンドラーを配置します。

$("tr").click(function(){
  var rowClicked = $(this);
  $('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
  $('#rowDialog").dialog("open");
});

テーブルとIDを指定し、そこからテーブルの行にアクセスして速度を上げることを強くお勧めします。複数のテーブルがある場合などに備えて。

ダイアログ要素のイベントハンドラーを設定することもできます。

$('#rowDialogButton').click(function(){
//do button stuff
});

Answer 2

多分このようなもの？

<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>

jQueryコード：

$("#myDialog").dialog({
options:....
});    

$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});