Question

这是我几个星期以来一直在努力的事情，我希望有人可以提供帮助。我有两个表，我从表返回json数据，表1返回产品类别列表，表2返回产品列表。我已经设法将类别表中的json数据返回连接到我的查询移动应用程序中的列表视图我现在的挑战是当我点击一个类别时我似乎无法获取我的列表视图来显示产品信息 - 我正在使用多页面应用程序用jquery mobile请帮忙

sumary - 我需要知道如何传递所选产品类别的ID以附加到我正在进行的REST调用以获取产品详细信息。

如果你需要更清晰，我会在这里发布。

Answer 1

首先我们创建页面

product.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>

<body>    
    <div data-role="page" id="product_page">
        <div data-role="header" class="">
             <h3>Home</h3>            
        </div>
        <div role="main" id="" class="ui-content">   
            <ul data-role="listview" id="product_list"></ul>  
        </div>
    </div>         
 </body>
 <script>

 var product = {
 "product": [
 {
  "product_name": "Product 1",
  "product_category": "1"
 },
 {
  "product_name": "Product 2",
  "product_category": "2"
 },
 {
  "product_name": "Product 3",
  "product_category": "3"
 }
 ]
 }

 $("#product_page").on("pageshow", function(event){
   var list = "";
   $.each(product, function(key, value){
      $.each(value, function(key, value){
        list += '<li><a href="category.html?product_category='+value.product_category+'" data-ajax="false">'+value.product_name+'</a></li>';
    })

    })    
     $("#product_list").html(list).trigger("create")
     $("#product_list").listview( "refresh" )
 })
</script>
<html>

<强> category.html

<!DOCTYPE html>
<html>

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">  </script>
</head>

<body>    
    <div data-role="page" id="category_page">
       <div data-role="header" class=""></div>
       <div role="main" id="" class="ui-content">   
         <p id="detail"></p>
       </div>
    </div> 
</body>
<script>

$("#category_page").on("pageshow", function(event){
    var product_category = getParameterByName("product_category");
    $("#detail").html(product_category);    
})   
/** GET PARAMETER **/
function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return results[1];
}
</script>
<html>

从多个jquery移动页面传递参数

1 个答案: