jquery loading script via ajax

2019-07-24 11:08发布

站内问答 / jQuery
1066 0 5

Some setup:
I have a web site that allows users to run reports and get results. The site uses jquery layout to create north, south, west and center divs. North has header and navigation menu, south has footer info, west has a list of report links and center shows the results of the reports (center is initially blank). The report data is displayed in table form using DataTables plugin. To simplify for example purposes, all the report data is returned in a single ajax call and then rendered as a DataTable.

So the example flow is as follows:

  • main.html:
    • loads
    • loads jquery, layout and datatables
    • set up the layout with header, menu, footer and report link. Center is left blank.
  • user:
    • clicks the "Report-1" link.
  • main.html:
    • calls jquery.load("report1.html"). (normally report1 would be a php script)
    • This returns report table with data and loads into Center div.
      • Note: content returned is html and js. Assumes that DataTables plugin loaded in main.html will be used. So NO load of datatable is included in report content.
    • loaded js code uses namespace "CenterContent" and has Initialize() function
    • on successful load, initialize() is called which executes $("#report1").datatable().
  • user
    • happily reviews the data in a pretty datatable

This all works nicely in Firefox, Chrome, Safari and most IE. However, it seems something changed in the latest IE (10.0.9200.16750) -- a previous version of IE (10.0.9200.16580) works fine. I now have some issues with latest IE -- the DataTable is not rendered when Initialize() is called and get "Object doesn't support property or method 'dataTable'"

I created some sample files and did some testing. I have found that if report1.html contains a script tag to include the DataTables plugin (thus forcing DataTables to be loaded when the ajax load happens) -- latest IE works as expected. (Note: When DataTables script tag is moved from main.html to report1.html - it must be loading from the same domain as main.html. AFAIK, Loading from another domain is an ajax violation and seems to be in force when the script tag is in ajax loaded content.)

I can move the DataTable plugin load to the report response, but this means the plugin will get loaded with every report run. Seems like a waste of time and effort. And does that create any duplicity when user runs report after report?? is there some "best practice" for this kind of recipe?

Why does latest IE throw this error? and not the previous IE? I couldn't find any explanation in the MS bulletin for IE (http://support.microsoft.com/kb/2898785)

Below are my two example files. Any help/advice/pointers are greatly appreciated.

main.html and 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>

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)