Question

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

Answer 1

试试这个：我考虑过单页概念，你可以相应地改变你的代码：

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

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

1 个答案: