我是JQuery-Mobile的新手。
我创建了一个母版页，其中包含了一些jquery移动脚本和css的链接。 在母版页中，我使用ajax将另一个页面加载到选定的div中，但是在加载的页面中无法访问母版页的脚本。所以我需要在加载的页面中再次加载脚本。
这增加了加载时间，任何人都可以帮我解决这个问题。
任何建议都会有所帮助，谢谢。
被修改
母版页代码。在此页面中有一个div具有Id =＆gt;“mainContent”。在这个div我试图加载我的另一页点击具有id“link1”或“link2”的锚点。
点击link1我正在调用ajax并点击指定目标上的link2加载。
在这两种情况下，如果加载的页面中包含所有脚本，它都可以正常工作。
<%@ 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>
这是我点击link1到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>
页面正在加载，但所有内容都未正确加载....
答案 0 :(得分：0)
您始终可以检查jQuery是否已加载：
if (typeof(jQuery) !== 'function') {
// add script tag here with ref to jquery
}
另外我认为像requireJS这样的框架会处理这类事情。
答案 1 :(得分：0)
最好将ajax调用创建为json请求
然后在父页面本身的ajax响应之后处理所需的javascript功能。
jQuery.ajax({
type: 'POST',
dataType:'json',
url: url+'ajax.php',
data: {name:value},
beforeSend : function(){
}
})
.done(function(data)
{
//Here you will results like below
//data.html
//data.status
if(data.status == true)
// your required operation
// here html and status are the variables set in json encoded array.
});
在ajax.php中
<?php
// do your php operation and set the result to a variable $result
echo json_encode('html'=>$result,'status'=>true);
// you can set any number items in array , so that in parent window you can easily handle these items.
?>