Question

好的，这是一个冒昧的标题 - 对我来说很复杂。

概述：（见截图和底部更新。）
一个。在$(document).ready上，jQuery / AJAX构建表，每行一个联系人湾每个表格行，第三个单元格是：<a id="edit_83">edit</a>标签 - “83”是示例，表示来自db的contact_id，因此每个标签将具有在步骤（d）中使用的唯一ID号
C。在构建表时，为AJAX回调中的每个联系人构造jqueryui对话框（autoOpen = false） d。当单击任何编辑锚点时，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");
});

更新 - 部分解决方案：

现在出现对话框 - 取消按钮不合适，符合this post。但是，注入的代码已经消失了。没有其他改变 - 只需通过修复取消按钮位置的语法错误就可以使对话框代码正常工作。

Answer 1

回应我对原帖的评论问题：你真的已经知道JSON，它代表JavaScript Object Notation。这是一个JSON对象：

{"a":1,"b":2,"c":3}

看起来很熟悉？对于我们长时间使用的东西来说，JSON只是一个奇特的名字（可能不是100％真实，但我是这样看的。）

我们的想法是让服务器传回JSON对象，让JavaScript根据它们创建/更新HTML。在您的场景中，您正在使用PHP构建多个HTML对话框。相反，您可以让PHP传回一个对象数组，每个对象代表表中的一行，如下所示：

{
  "records": 
  [
    { 
      "field a":"value a",
      "field b":"value b"
    },
    // record 2
    { 
      "field a":"value a",
      "field b":"value b"
    }
  ]
}

如果您要使用.getJSON（）从服务器请求，jQuery会自动读取它并为您提供一个具有.records属性的对象，该属性是一个对象数组！现在，您可以使用JavaScript在屏幕上单击其中一个相应记录时更新单个对话框/表单。

注意：您可以让PHP只传回一个对象数组，但最好将它包装在上面的对象中。很多时候你也会想要其他信息，例如，当你进行分页搜索结果时，你需要知道记录的总数以及你所在的页面以及其他数据点。

这样做的另一个好处是服务器完成得更快。您将所有显示逻辑推送到客户端的计算机上，因此可以从同一服务器服务更多页面。

这是一个真正简短的解释。网上有教程和示例。您在线使用的任何好的Ajax应用程序（例如GMail）都使用JSON对象，而不是传递大量的HTML。以下是一些链接，谷歌还有更多的链接：

http://php.net/manual/en/function.json-encode.php（将任何变量转换为JSON字符串。）
http://www.json.org/example.html
http://www.w3schools.com/json/default.asp
http://www.jsonexample.com/
PHP示例：http://www.electrictoolbox.com/json-data-jquery-php-mysql/
另一个PHP示例：http://www.jquery4u.com/json/ajaxjquery-getjson-simple/（此链接中json-data.php的替代方法是要走的路，另一种方式就是傻！）

还有一些非常好的框架可以帮助完成这个过程。我是backbone.js和spine.js的忠实粉丝。两者都使用jQuery，它们都可以帮助您在构建应用程序时使用最佳实践（如MVC。）

Answer 2

当你解决自己的问题时，这很好。当答案是ID-ten-T错误时，不太好。

在注入的HTML中，请注意输入字段的类型（屏幕截图1）。将类型更改为 type =“text”，并且所有内容都可以根据需要进行操作。

当概念是新概念时，奥卡姆的剃刀几乎无法触及。

我仍然不明白为什么我看不到注入的标记，尽管......！

复杂的jqueryui对话框

2 个答案: