jquery通过ajax加载脚本
一些设置：jquery通过ajax加载脚本,jquery,ajax,internet-explorer,layout,Jquery,Ajax,Internet Explorer,Layout,一些设置： 我有一个网站，允许用户运行报告并获得结果。该站点使用jquery布局创建北、南、西和中心分区。北部有页眉和导航菜单，南部有页脚信息，西部有报告链接列表，中心显示报告结果（中心最初为空）。使用DataTables插件以表格形式显示报告数据。为了简化示例，所有报告数据都在一个ajax调用中返回，然后呈现为DataTable 因此，示例流程如下所示： main.html： 装载 加载jquery、布局和数据表 使用页眉、菜单、页脚和报告链接设置布局。中间空白 用户： 单击“报告-1
我有一个网站，允许用户运行报告并获得结果。该站点使用jquery布局创建北、南、西和中心分区。北部有页眉和导航菜单，南部有页脚信息，西部有报告链接列表，中心显示报告结果（中心最初为空）。使用DataTables插件以表格形式显示报告数据。为了简化示例，所有报告数据都在一个ajax调用中返回，然后呈现为DataTable 因此，示例流程如下所示：
- main.html：
- 装载
- 加载jquery、布局和数据表
- 使用页眉、菜单、页脚和报告链接设置布局。中间空白
- 用户：
- 单击“报告-1”链接
- main.html：
- 调用jquery.load（“report1.html”）。（通常report1是一个php脚本）
- 这将返回包含数据的报表表并加载到中心div。
- 注意：返回的内容是html和js。假设将使用main.html中加载的DataTables插件。因此，报告内容中不包含datatable的负载
- 加载的js代码使用命名空间“CenterContent”，并具有Initialize（）函数
- 加载成功后，调用initialize（），执行$（“#report1”）.datatable（）
- 使用者
- 愉快地在一个漂亮的数据表中查看数据
- main.html
//设置一些东西来检测浏览器类型
MyNamespace={}；//屏幕每个可加载部分的主命名空间和子命名空间空间
MyNamespace.CenterContent={}；//这部分加载了数据和JS
$（文档）.ready（函数（）{
$（'body'）.layout（）；
});
函数loadObject（objStr，url）{
$（objStr）.load（url+“？”+Date.now（），函数（响应、状态、xhr）{
如果（状态=“错误”）{
$（objStr.html（“很抱歉，出现错误：”+msg+xhr.status+“”+xhr.statusText+”）；
}否则{//成功
请尝试{MyNamespace.CenterContent.JS.Initialize（）；}
catch（e）{console.log（“E3:+e.message）；}
}
});
返回false；
}
测试应用
北
南方
- report1.html：
（函数（名称空间，$，未定义）{
nameSpace.Initialize=function（）{
$（'#report1'）。数据表（）；
};
}（window.MyNamespace.CenterContent.JS=window.MyNamespace.CenterContent.JS | |{}，jQuery））；
渲染引擎
浏览器
月台
引擎版本
CSS等级
壁虎
火狐1.0
Win 98+/OSX.2+
1.7
A.
壁虎
卡米诺1.5
OSX.3+
1.8
A.
壁虎
Netscape Navigator 9
Win 98+/OSX.2+
1.8
A.
壁虎
Mozilla 1.0
Win 95+/OSX.1+
1.
A.
<!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>
<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>