Question

一些设置：
我有一个网站，允许用户运行报告并获得结果。该站点使用jquery布局来创建北，南，西和中心div。北有标题和导航菜单，南有页脚信息，西有报告链接列表，中心显示报告结果（中心最初为空白）。报告数据使用DataTables插件以表格形式显示。为了简化示例目的，所有报告数据都在一个ajax调用中返回，然后呈现为DataTable。

所以示例流程如下：

main.html中：
- 负载
- 加载jquery，layout和datatables
- 使用页眉，菜单，页脚和报告链接设置布局。中心留空。
用户：
- 点击“报告-1”链接。
main.html中：
- 调用jquery.load（“report1.html”）。（通常report1将是一个PHP脚本）
- 这将返回包含数据并加载到Center div的报表。
  - 注意：返回的内容是html和js。假设将使用在main.html中加载的DataTables插件。因此，报告内容中不包含任何数据表负载。
- 加载的js代码使用名称空间“CenterContent”并具有Initialize（）函数
- 成功加载时，调用initialize（）执行$（“＃report1”）。datatable（）。
用户
- 愉快地评论一个漂亮的数据表中的数据

这一切都适用于Firefox，Chrome，Safari和大多数IE。然而，在最新的IE（10.0.9200.16750）中似乎发生了一些变化 - 以前版本的IE（10.0.9200.16580）工作正常。我现在对最新的IE有一些问题 - 调用Initialize（）时不会呈现DataTable并且获取“Object不支持属性或方法'dataTable'”

我创建了一些示例文件并进行了一些测试。我发现如果report1.html包含一个包含DataTables插件的脚本标记（从而在ajax加载发生时强制加载DataTables） - 最新的IE按预期工作。（注意：当DataTables脚本标记从main.html移动到report1.html时 - 它必须从与main.html相同的域加载.AFAIK，从另一个域加载是ajax违规并且在脚本时似乎有效标签是在ajax加载的内容中。）

我可以将DataTable插件加载到报表响应中，但这意味着插件将在每次报表运行时加载。似乎浪费时间和精力。当用户在报告后运行报告时，这是否会造成任何不一样？对于这种食谱，是否有一些“最佳实践”？

为什么最新的IE会抛出此错误？而不是以前的IE？我在IE公告（http://support.microsoft.com/kb/2898785）

的MS公告中找不到任何解释

以下是我的两个示例文件。任何帮助/建议/指针都非常感谢。

main.html和report1.html

main.html中

的

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">

    <link rel="shortcut icon" href="/favicon.ico" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<!--
-->
    <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
    <link rel="stylesheet" type="text/css" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css" />

    <script type="text/javascript">
        // Set up some stuff to detect the browser type
        MyNamespace = {};    // Main Namespace and Subnamespaces for each loadable section of the screen
        MyNamespace.CenterContent = {};        // This part is loaded with data and JS

        $(document).ready(function () {
            $('body').layout();
        });

        function loadObject(objStr, url) {
            $(objStr).load(url +"?_" + Date.now(), function(response, status, xhr) {
                if (status == "error") {
                    $(objStr).html('<p>Sorry but there was an error: ' + msg + xhr.status + " " + xhr.statusText + '</p>');
                } else {    // Success
                    try { MyNamespace.CenterContent.JS.Initialize(); }
                    catch(e) { console.log("E3: " + e.message); }
                }
            });
            return false;
        }
    </script>    
    <title>Test Application</title>
</head>
<body>
    <div class="ui-layout-north"><center><h1>North</h1></center></div>
    <div class="ui-layout-west">
        <a href="#" onclick="loadObject('#CenterContent', 'report1.html');" style="font-family:Arial;font-size:10pt;">Report-1</a>
    </div>
    <div class="ui-layout-south"><center><h1>South</h1></center></div>
    <div class="ui-layout-center"><span id="CenterContent"></span></div>
</body>
</HTML>

report1.html：

的

<head>
<!--  This doesn't seem to work.  I think bcause it is ouside the domain and since it is in ajax loaded content won't load
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
uncomment next line and have DataTables local - then works as expected.
<script type="text/javascript" src="./DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
-->
</head>
<script>
    (function( nameSpace, $, undefined ) {
        nameSpace.Initialize = function() {
            $('#report1').dataTable();                
        };
    }( window.MyNamespace.CenterContent.JS = window.MyNamespace.CenterContent.JS || {}, jQuery ));
</script>    

<div id="demo">
    <table id="report1">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gecko</td>
                <td>Firefox 1.0</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Camino 1.5</td>
                <td>OSX.3+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Netscape Navigator 9</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.0</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1</td>
                <td>A</td>
            </tr>
        </tbody>
    </table>
</div>

jquery通过ajax加载脚本

0 个答案: