0

好吧，这是一个自以为是的标题——这对我来说很复杂。

概述：（ 请参阅底部
的屏幕截图和更新。 ）上$(document).ready，jQuery/AJAX 建立表格，每行有一个联系人
b。每个表格行，第 3 个单元格，是：<a id="edit_83">edit</a>tag -- "83" 是示例，表示来自 db 的 contact_id，因此每个 a tag 将具有在步骤 (d)
c 中使用的唯一 ID 号。在构建表时，为 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");
});

更新 - 部分解决方案：

现在出现了对话框 - 根据这篇文章，取消按钮不合适。但是，注入的代码已经消失了。没有其他任何改变 - 只是通过修复取消按钮位置的语法错误来使对话框代码正常工作。

4

2 回答 2

2

回答我对原始帖子的评论的问题：你真的已经知道 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 块。这里有一些链接，谷歌还有很多：

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

于 2012-10-12T00:17:08.377 回答
0

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

在注入的 HTML 中，注意输入字段的类型（屏幕截图 1）。将 type更改为type="text"，所有工作都按需要进行。

当概念是新的时，奥卡姆剃刀几乎是遥不可及的。

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

于 2012-10-11T19:19:23.177 回答