好吧,这是一个放肆的标题 - 这是复杂的我。复杂jqueryui对话框
概述:(请参见截图和底部的更新。)
a。在$(document).ready
上,jQuery/AJAX构建每行一个触点的表格
b。每个表格行,第三个单元格是:<a id="edit_83">edit</a>
标记 - “83”是示例并表示来自db的contact_id,因此每个标记都将具有唯一的id号,用于步骤(d)中
c。在构建表时,为AJAX回调中的每个联系人构造jqueryui对话框(autoOpen = false)。
d。当单击任何编辑锚点时,jquery会分离contact_id并使用它来显示适当的jQueryUI对话框。
目的:在任何表行点击编辑链接会打开与该联系人编辑形式的jQueryUI的对话框。
问题:表单打开,但里面没有表单域。事实上,在DOM中,每个表行都缺少注入的form/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");
});
更新 - 部分解决:
对话框现在出现 - 取消按钮是出位,每this post。但是,注入的代码已经消失。没有其他改变 - 只是通过在取消按钮的位置上固定语法错误来获得对话框代码的工作。
图像对话框代码之前注射标记的合作对话缺失的输入字段injected markup before dialog code worked http://bluecoonmedia.com/so_query.jpg
截图 - 其中文本“编辑联系人信息”和字段标签是从哪里来的?(见下截图 - 所有注射标记丢失)对话框代码工作injected markup after dialog code working http://bluecoonmedia.com/so_query_new.jpg
建议:不要有多个对话框。有一个,你的所有数据都在一个JSON对象数组中。使用它来填写表格,甚至可以绘制您的表格(取决于您的需求)。 –
这将是什么样子?你能指点我一个在线的例子或教程吗?我还没有使用JSON obj阵列,并且无法在概念上设想您的解决方案。 – gibberish