【发布时间】：2013-09-04 06:32:07
【问题描述】：
您好，当我单击搜索按钮时，我有一个带有搜索按钮和两个下拉列表值的搜索字段，我想使用 mobile.change 方法传递参数值。我正在使用如下结构
page1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Client View</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on('pagebeforeshow',function(){
$("#searchbutton").on('click',function(){
var searchvalue = $("[name='clientsearch']").val();
var searchbyvalue = $("#select-choice-searchby").val();
var statusvalue = $("#select-choice-status").val();
$.mobile.changePage(
'accountlist.html',
{
//dataUrl : "accountlist.html?searchvalue="+searchvalue&"searchbyvalue="+searchbyvalue&"statusvalue="+statusvalue ,
data : { 'searchvalue' : searchvalue,'searchbyvalue':searchbyvalue,'statusvalue':statusvalue },
reloadPage : false,
changeHash : true
});
});
});
</script>
</head>
<body>
<!--Client Page-->
<div data-role="page" id="client" data-add-back-btn="true" >
<div data-role="header" data-theme="b" data-position="fixed" data-id="persistantFooter">
<h1>Client View</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchbox">
<input type="search" name="clientsearch" value="" data-inline="true" data-mini="true"/>
<input type="button" value="Search" data-inline="true" data-theme="b" data-mini="true" id="searchbutton"/>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-searchby" class="select" data-inline="true" style = "width: 90px">Search By:</label>
<select name="select-choice-searchby" id="select-choice-searchby" data-inline="true" data-mini="true" style = "float: right">
<option value="account">Account</option>
<option value="customhouseholds">Custom Households </option>
<option value="roahouseholds">ROA Households</option>
</select>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-status" class="select" data-inline="true" style = "width: 90px">Status:</label>
<select name="select-choice-status" id="select-choice-status" data-inline="true" data-mini="true" style = "float: right">
<option value="open">Open</option>
<option value="closed">Closed </option>
<option value="all">All</option>
</select>
</div>
</div>
</div>
</body>
</html>
page2.html：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Account view</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on('pagebeforeshow',function(){
alert("hi");
// var parameters = window.location.pathname.split("?")[1];
//alert(getUrlVars())
var searchvalue = getUrlVars()[0];
var searchbyvalue = getUrlVars()[1];
var statusvalue = getUrlVars()[2];
alert(searchvalue);
function getUrlVars()
{
var qName = [], hash;
var qVal=[];
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
qName.push(hash[0]);
qVal.push(hash[1]);
qName[hash[0]] = hash[1];
}
return qVal;
}
});
// JavaScript Document
</script>
</head>
<body>
<div data-role="page" id="accountlist" data-add-back-btn="true" >
<div data-role="header" data-theme="b">
<h3>Account View</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
在page2.html中我们无法访问参数值，脚本函数也无法执行如何解决这个问题
【问题讨论】：
标签： javascript jquery html jquery-mobile parameters