【发布时间】：2014-08-11 11:29:15
【问题描述】：
我是 JQuery-Mobile 的新手。
我创建了一个母版页，其中包含几个 jquery 移动脚本和 css 链接。 在母版页中，我正在使用 ajax 将另一个页面加载到选定的 div 中，但在加载的页面中无法访问母版页的脚本。所以我需要在加载页面中再次加载脚本。
这增加了加载时间，谁能帮我解决这个问题。
任何建议都会有所帮助，谢谢。
已编辑
母版页代码。在此页面中有一个 div 具有 Id=>“mainContent”。在这个 div 中，我试图通过单击具有 ID“link1”或“link2”的锚来加载我的另一个页面。
点击链接 1 我正在调用 ajax，点击链接 2 加载给定目标。
如果所有脚本都包含在加载的页面中，则在这两种情况下都可以正常工作。
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1 , maximum-scale=1">
<script src="../resources/template/js/base/jquery-1.7.2.min.js"></script>
<link type="text/css" href="../resources/jquery.window.css" rel="stylesheet">
<script type="text/javascript" src="../resources/jquery.windowAlt.js"></script>
<script src="../resources/template/js/base/jquery.ui.core.min.js?s2j=3.3.3" type="text/javascript"></script>
<script src="../resources/template/js/plugins/jquery.subscribe.min.js" type="text/javascript"></script>
<script src="../resources/template/js/struts2/jquery.struts2-3.3.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version = "3.3.3";
jQuery.scriptPath = "../resources/template/";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup({cache : false});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2-3.3.3.min.js");
});
</script>
<link type="text/css" href="../resources/template/themes/flick/jquery-ui.css?s2j=3.3.3" rel="stylesheet" id="jquery_theme_link">
<script src="../resources/template/js/plugins/jquery.mobile-1.1.1.min.js"></script>
<script src="../resources/template/js/struts2/jquery.mobile.struts2-3.3.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="../resources/template/js/plugins/jquery.mobile-1.1.1.min.css" />
<title>IDP-Dashboards</title>
<SCRIPT type="text/javascript" >
function pageRefresh() {
location.reload(); //Reload the current page.
}
$(document).ready(function(){
if ($('body').find('[data-role="header"]').width()<400) {
$('#home_img').attr('src','../resources/img/icon_home_small.png');
$('#logout_img').attr('src','../resources/img/icon_logout_small.png');
}
$(window).on('resize',function() {
if ($('body').find('[data-role="header"]').width()<400) {
$('#home_img').attr('src','../resources/img/icon_home_small.png');
$('#logout_img').attr('src','../resources/img/icon_logout_small.png');
}else{
$('#home_img').attr('src','../resources/img/icon_home.png');
$('#logout_img').attr('src','../resources/img/icon_logout.png');
}
});
});
$(document).on('click', '#link1', function(){
alert("here...");
$.ajax({
async : false,
type: 'POST',
url: "./getMobileDashboard",
data : {
//"mode" : "viewUserThumbnails",
},
success : function (msg) {
$("#mainContent").html(msg);
}
});
});
</SCRIPT>
<link href="../resources/css/ApplicationStyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body id="body">
<div data-role="page" id="dashboardPage">
<div style="width: 100%">
<%-- <sj:a button="true" id="link1" href="getMobileDashboard" targets="mainContent" style="float:right;">Dashboards</sj:a> --%>
<%-- <sj:a button="true" id="link1" href="#" onclick="test();" >Dashboards</sj:a> --%>
<sj:a button="true" id="link1" href="#" >Dashboards</sj:a>
</div>
<div style="width: 100%">
<sj:a button="true" id="link2" href="getMobileDynamicForms" targets="mainContent" style="float:left;">Forms</sj:a>
</div>
<div data-role="content" id="mainContent" style="padding: 0px;"> </div>
</div>
</body>
</html>
这是我在点击链接 1 到 div 时加载的示例页面，该页面是“maincontent”
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags"%>
<%-- <script src="../resources/template/js/base/jquery-1.7.2.min.js"></script>
<link type="text/css" href="../resources/jquery.window.css"rel="stylesheet">
<script type="text/javascript" src="../resources/jquery.windowAlt.js"></script>
<script src="../resources/template/js/base/jquery.ui.core.min.js?s2j=3.3.3" type="text/javascript"></script>
<script src="../resources/template/js/plugins/jquery.subscribe.min.js" type="text/javascript"></script>
<script src="../resources/template/js/struts2/jquery.struts2-3.3.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version = "3.3.3";
jQuery.scriptPath = "../resources/template/";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup({
cache : false
});
jQuery.struts2_jquery
.require("js/struts2/jquery.ui.struts2-3.3.3.min.js");
});
</script>
<link type="text/css"
href="../resources/template/themes/flick/jquery-ui.css?s2j=3.3.3"
rel="stylesheet" id="jquery_theme_link">
<link type="text/css" href="../resources/complex/css/complex.css"
rel="stylesheet" id="jquery_theme_link">
<link type="text/css" href="../resources/jquery.window.css"
rel="stylesheet">
<script src="../resources/complex/js/layout.js" type="text/javascript"></script>
<script src="../resources/complex/js/complex.js" type="text/javascript"></script>
<script src="../resources/complex/js/layoutui.js" type="text/javascript"></script>
<script type="text/javascript" src="../resources/jquery.windowAlt.js"></script>
<link href="../resources/css/front.css" rel="stylesheet" type="text/css">
<link href="../resources/css/common.css" rel="stylesheet"
type="text/css">
<link href="../resources/css/elements.css" rel="stylesheet"
type="text/css">
<link href="../resources/css/extended.css" rel="stylesheet"
type="text/css">
<link href="../resources/css/setup.css" rel="stylesheet" type="text/css">
<link href="../resources/css/dStandard.css" rel="stylesheet"
type="text/css">
<script
src="../resources/template/js/plugins/jquery.mobile-1.1.1.min.js"></script>
<script
src="../resources/template/js/struts2/jquery.mobile.struts2-3.3.3.js"
type="text/javascript"></script>
<link rel="stylesheet"
href="../resources/template/js/plugins/jquery.mobile-1.1.1.min.css" /> --%>
<style>
.box { position: relative; float: left; }
</style>
<link href="../resources/css/ApplicationStyleSheet.css" rel="stylesheet" type="text/css">
<div data-role="content">
<div data-role="fieldcontain">
<div id="dashboardContainer" >
<s:iterator value="dashboardprivilege">
<div class="box" align="center">
<a style="text-decoration: none;" href="javascript:void(0)"
onclick="viewDashboards('<s:property value="id" />','<s:property value="title" />','<s:property value="dashboardType"/>');"
rel="external">
<img src="../niv-images/<s:property value="imageName" />" width="200px;"
height="150px"><div style="width:210px;padding-top: 5px;height: 50px;overflow: hidden;"><span>
<s:property value="title" />
</span></div>
</a>
</div>
</s:iterator>
<s:iterator value="dashboards">
<div class="box" align="center">
<a style="text-decoration: none;" href="javascript:void(0)" onclick="viewDashboards('<s:property value="id" />','<s:property value="title" />','<s:property value="dashboardType"/>');" rel="external">
<img src="../niv-images/<s:property value="imageName" />" width="200px;" height="150px">
<div style="width:210px;padding-top: 5px;height: 50px;overflow: hidden;"><span> <s:property value="title" /> </span></div>
</a>
</div>
</s:iterator>
<span class="stretch"></span>
</div>
</div>
</div>
<SCRIPT type="text/javascript">
$(document).on('pageshow', '#dashboardPage', function(){
});
function serchDashboard() {
var searchFile = $('#searchFiles').val();
$.ajax({
type : "POST",
url : "mobileSearchView?searchFiles=" + searchFile,
success : function(result) {
$('#data').html(result);
}
});
}
function viewDashboards(id, title,dType) {
if(dType == '3') {
url = "viewPortlet?id="+ encodeURIComponent(id) ;
}else {
url = "processjstree?id=" + encodeURIComponent(id) + "&mode="+ encodeURIComponent("loadViewSWF");
}
winOpen(url, title);
return false;
}
function winOpen(link, t) {
var sw = window.screen.availWidth;
var nsw = sw - 50;
link += "&screenWidth=" + nsw;
$.window({
title : t,
url : link,
showModal : true,
modalOpacity : 0.5,
maximizable : false,
createRandomOffset : {
x : 200,
y : 150
},
bookmarkable : false,
onShow : function(wnd) {
}
});
}
function pageRefresh() {
location.reload(); //Reload the current page.
}
$(document).ready(function(){
$width3 = $('#dashboardContainer').width();
$(".box").css("width",220+((((($width3/220)%1)*220))/Math.floor($width3/220)));
$(window).on('resize',function() {
$width2 = $('#dashboardContainer').width();
$(".box").css("width",220+((((($width2/220)%1)*220))/Math.floor($width2/220)));
}).resize();
})
</SCRIPT>
页面正在加载，但所有内容均未正确加载....
【问题讨论】：
-
您能否添加您的代码以便更好地理解？
-
如果你做对了，最坏的情况是你会加载一个缓存的jQuery版本，这需要很少的时间。您确定 (a) 您已正确设置缓存 jQuery，并且 (b) jQuery 的“双重加载”是实际问题吗？
标签： jquery performance jquery-mobile struts2-jquery