Question

我们假设，例如，xHTML文档如下：

<html>
<head>
</head>
<body>
<div id="wrapper">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./application.js"></script>
</html>

我们将对PHP脚本执行GET AJAX请求，该脚本将查询数据库并返回响应以填充TABLE元素，该元素将通过JavaScript格式化为可排序网格。

此外，我们希望将所有JavaScript放在一个文件中，并且可以轻松地将其包含在上面。

选项：

让PHP脚本返回TABLE 元素填充所有的数据。使用jQuery的live()函数积极关注新的TABLE DOM中的元素并应用它的可排序网格功能发现它们。此方法允许我们在PHP中操作从AJAX请求重新生成的内容，并将完整的语义表返回到父文档。
将TABLE元素插入上面列出的脚本中，但将其内容留空。一旦文档准备就绪，jQuery会立即应用可排序的网格功能，尽管还没有内容存在。然后，GET请求将返回一个填充数据库的JSON响应。

您可以分享此类事情的任何其他意见/最佳做法/用例吗？我这里只讨论TABLE，但我们一直在讨论这个问题：灯箱，下拉菜单等等。

目前，我们没有使用jQuery的live()函数，也没有在父文档中存在DOM元素。因此，我们必须在每个单独的视图的顶部放置小块Javascript。虽然草率，但这使我们只能在需要时加载功能，但显然很难维护。

Answer 1

jQuery jqGrid Plugin 可能适合该帐单，通过ajax动态加载数据，可以与任何服务器端技术集成，允许您使用主题滚动主题。

要自己更新表，您可以在请求完成时使用大多数jquery ajax函数发出回调。例如，如果您在文档中有此内容：

<div id="output">
   <table>...</table>
</div>

您可以使用jquery Ajax Load函数加载结果：

$('#output').load('results.php',{arg:'val'},updateSort);

function updateSort(){
    $("#output > table").sort();
}

我通常会更进一步：

$('#output')
    .html('<div class="centered_padded_msg_class">Loading data...</div>')
    .load('results.php',{arg:'val'},updateSort);

function updateSort(){
    $("#output > table").sort();
}

祝你好运，-Matt

Answer 2

最好在初始加载时尽可能多地加载。如果您的站点/应用程序要求您通过AJAX动态添加内容，那么我可以看到您的困境。

根据我的理解，您想知道最佳/首选做法是保持您的JavaScript简洁和存档，而不是分散在整个页面中。您说当前您的脚本分散在整个页面中，因为当您在模块/视图中加载或者随身携带js时，以便在加载脚本时运行（冗长，抱歉）。并且，问题是当您使用一个无所不能的超级全局js文件加载这些视图时，您希望触发特定事件（如实例化灯箱或排序表）。

所以，如果这听起来是正确的，那么这就是我要做的事情（对于动态加载的任何视图）......

所以，我们假设你有你提供的代码：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"z></script>
<script type="text/javascript" src="./application.js"></script>
</head>
<body>
    <div id="wrapper">
          <div id="sidebar"></div>
          <div id="content"></div>
    </div>
</body>
</html>

如果在页面完全加载时将一些内容加载到'#content'div（例如，表）中，然后您想要对该表进行排序而不将脚本放在从返回的HTML中执行此操作AJAX，您可以在main（'。/ application.js'）文件中包含以下代码：

$(function() {
    load_table();
    $('#content #my_table').live('table_loaded',function() {
        $(this).sort(); // or whatever your sorting method is...
    });
});

function load_table() {
    $.get('mysite.php',{foo:bar,bar:foo},function(data) { 
        $('#content').html(data).find('#my_table').trigger('table_loaded');
    });
}

这使用jquery自定义事件和live（）事件。我没有对此进行测试，但它应该在理论上有效。

更新：我对此进行了测试，使用jquery 1.3.2完美运行：）

Answer 3

恕我直言，首次显示时页面应尽可能完整，以避免额外请求。所以我投票支持第一种方法。

Answer 4

我目前正在维护一个基于live()方法的Web应用程序，以及父文档中不存在的DOM元素，似乎没问题。我尝试在“结果”页面中插入代码片段，但是很难全部更新它们，有时你可以跳过我的错误一两句，然后问自己“我做错了什么？”并找几个小时的问题。

live()方法非常好，因为您可以将所有代码保存在一个特定文件中，显然比上面的解决方案更容易维护。

我正在谈论你的应用程序现在正在制作中并且它没有失败一次所以我对这个解决方案非常满意（虽然奇怪，我使用相同的模式填充TABLE元素和数据并将其显示为网格：）

与DOM集成JavaScript操作的最佳实践

4 个答案: