Параметры передаются, но не извлекаются, когда mobile.changepage в jquerymobile

Привет, У меня есть поле поиска с кнопкой поиска и двумя раскрывающимися списками при нажатии кнопки поиска. Я хочу передать значения параметров с помощью метода mobile.change. Я использую как следующую структуруПараметры передаются, но не извлекаются, когда mobile.changepage в jquerymobile

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 мы не можем получить доступ к значениям параметров, а также функция сценария не выполнять, как это исправить

источник

2013-09-04 Ben10

Попробуйте это: Я рассмотрел одно понятие страницы, вы можете изменить ваш код соответственно:

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

источник

2013-09-04 08:42:30 Sheetal

Я хочу реализовать концепции оптимизации SEO (поисковая оптимизация) в своем приложении. Я делаю только несколько концепций страниц – Ben10

, если вышеприведенная концепция параметров данных не работает для вас, они могут также использовать wndow.sessionStorage и установить и получить предметы для следующей страницы. – Sheetal

в моем приведенном выше коде скрипта работает только внутри тела, но когда я помещаю код в заголовок, он не работает. – Ben10

Параметры передаются, но не извлекаются, когда mobile.changepage в jquerymobile

ответ

Смежные вопросы