gpt4 book ai didi

javascript - jquerymobile 中 mobile.changepage 时参数正在传递但未检索

转载 作者:行者123 更新时间:2023-11-28 08:55:12 25 4
gpt4 key购买 nike

您好,我有一个带有搜索按钮的搜索字段和两个下拉列表值,当我单击搜索按钮时,我想使用 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 中我们无法访问参数值,并且脚本函数也无法执行如何解决这个问题

最佳答案

试试这个:我已经考虑过单页概念,您可以相应地更改代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Client View</title>

<link rel="stylesheet" href="http://view.jquerymobile.com/1.3.2/dist/demos/css/themes/default/jquery.mobile.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://view.jquerymobile.com/1.3.2/dist/demos/js/jquery.mobile.min.js"></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-param1="" data-param2 ="" data-param3="" 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>

<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-->

<script type="text/javascript">
$("#client").on('pageshow',function(){

$("#searchbutton").on('click',function(){

var searchvalue = $("[name='clientsearch']").val();
var searchbyvalue = $("#select-choice-searchby").val();
var statusvalue = $("#select-choice-status").val();


$("#searchbutton").data("param1", searchvalue);
$("#searchbutton").data("param2", searchbyvalue);
$("#searchbutton").data("param3", statusvalue);


$.mobile.changePage(
'#accountlist', {
reloadPage : false,
changeHash : true
});
});
});

$("#accountlist").on('pageshow',function(){
alert( $("#searchbutton").data("param1"));
alert( $("#searchbutton").data("param2"));
alert( $("#searchbutton").data("param3"));
});

</script>

</body>
</html>

关于javascript - jquerymobile 中 mobile.changepage 时参数正在传递但未检索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18606908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com