1

こんにちは、検索ボタンのある検索フィールドと、検索ボタンをクリックしたときの 2 つのドロップダウン リストの値があります。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 では、パラメーター値にアクセスできず、スクリプト関数も実行されません。これを修正する方法

4

1 に答える 1