わかりました、それは傲慢なタイトルです - それは私には複雑です.
概要: (スクリーンショットと下部の更新を参照してください。
) $(document).readyで、jQuery/AJAX は行ごとに 1 つの連絡先を含むテーブルを作成しますb
. 各テーブル行、3 番目のセルは次のとおりです。<a id="edit_83">edit</a>タグ -- 「83」は例であり、db からの contact_id を表します。したがって、各タグには、手順 (d)
c で使用される一意の ID 番号があります。構築中のテーブルとして、AJAX コールバックで連絡先ごとに jqueryui ダイアログ (autoOpen=false) を構築します
。編集アンカーがクリックされると、jquery は contact_id を分割し、それを使用して適切な jQueryUI ダイアログを表示します。
目的:テーブル行の編集リンクをクリックすると、その連絡先の編集フォームを含む jqueryui ダイアログが開きます。
問題:フォームは開きますが、中にフォーム フィールドがありません。実際、DOM では、注入されたフォーム/div が各テーブル行にありません。???
HTML:
<div id="contact_table"></div>
Javascript/jQuery - AJAX 呼び出し:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "ax_all_ajax_fns.php",
data: 'request=index_list_contacts_for_client&user_id=' + user_id,
success: function(data) {
$('#contact_table').html(data);
var tbl = $('#injected_table_of_contacts');
tbl.find("div").each(function() {
$(this).dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons:
{
Okay: function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
})
});
}
});
});
AJAX/PHP 1 - ax_all_ajax_fns.php:
}else if ($_POST['request'] == 'index_list_contacts_for_client') {
$user_id = $_POST['user_id'];
$r = build_contact_table_for_client($user_id);
echo $r;
}
AJAX/PHP 2: - functions.php
function build_contact_table_for_client($user_id) {
$aContact_info = get_contact_data_ARRAY_user_id($user_id, 'first_name','last_name','email1','cell_phone', 'contact_id');
$r = '<table id="injected_table_of_contacts">
<tr>
<th width="120">Name</th>
<th width="200">Email Address</th>
<th width="100">Cell Phone</th>
<th>Action</th>
</tr>
';
while ($rrow = mysql_fetch_array($aContact_info)) {
$r .= '
<tr>
<td>'.$rrow['first_name'].' '.$rrow['last_name'].'</td>
<td>'.$rrow['email1'].'</td>
<td>'.$rrow['cell_phone'].'</td>
<td>
<a class="editcontact" id="edit_'.$rrow['contact_id'].'" href="#">edit</a>
/
<a class="delcontact" id="del_'.$rrow['contact_id'].'" href="#">del</a>
<div id="editThisContact_'.$rrow['contact_id'].'" style="display:none">
<form name="editForm" onsubmit="return false;">
<p class="instructions">Edit contact information:</p>
First Name:<span style="padding:0 20px;">Last Name:</span><br />
<input type="hidden" id="fn_'.$rrow['contact_id'].'" value="'.$rrow['first_name'].'">
<input type="hidden" id="ln_'.$rrow['contact_id'].'" value="'.$rrow['last_name'].'">
Email:<span style="padding:0 20px;">Cell Phone:</span><br />
<input type="hidden" id="em_'.$rrow['contact_id'].'" value="'.$rrow['email1'].'">
<input type="hidden" id="cp_'.$rrow['contact_id'].'" value="'.$rrow['cell_phone'].'">
</form>
</div>
</td>
</tr>
';
}
$r .= '</table>';
return $r;
}
jQuery - document.click イベント - 挿入されたコードが欠落している場合、どうすればセレクターを見つけることができますか??
$(document).on('click', '.editcontact', function(event) {
var contact_id = this.id.split( 'edit_' )[1];
var etc = $( '#editThisContact_' + contact_id );
etc.dialog("open");
});
更新 - 部分的な解決策:
ダイアログが表示されるようになりました -この投稿によると、キャンセル ボタンは適切ではありませんでした。ただし、挿入されたコードは消失しています。他に変更はありません。キャンセル ボタンの配置の構文エラーを修正することで、ダイアログ コードが機能するようになりました。