如何通过单击链接(移动应用程序)在另一个html页面上显示详细信息

时间:2015-07-01 04:10:36

标签: javascript jquery html ajax phonegap-build

我的html页面在列表中包含三个链接。我想通过点击这些链接在另一个页面** reportlist.html **上显示详细信息。

nextpage.html

  <!DOCTYPE html>
  <html>
   <head>
   <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>     
    <script src="js/jquery.mobile-1.4.4.min.js"></script>    
    <script src="js/nextPage.js"></script>    
   <title>Edfutura1</title>
   </head>
  <center>
  <body id="category_id">
  <div data-role="page" id="catlist"> 
  <div  id="loading" > </div>  
  <div data-role="header" data-position="fixed" data-theme="b">
  <h1>category</h1>
   </div> 
  <div data-role="main" class="ui-content">

            <form id="nextForm" > 
            <ul data-role="listview" data-inset="true" id="category">

              <li>
              </li>  
            </ul> 


            </form>

        </div>

  </div>                 
  </body>
  </center>
  </html>

nextpage.js

   var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";   
   $(document).on("pageinit","#catlist", function() {


  var submitUrl = base_url+"categorylist/get_categorylist"; 


     //$("#loading").css("display", "block");  


         $.ajax({
        url: submitUrl,
        dataType: 'json',
        type: 'POST',
        success: function(response)
        {

            var categoryList = $('#category');
            var category;
      for(var i = 0, len = response.length; i < len; i++)
      {
        category = response[i];
        var a = $('<a>').attr('href', 'reportlist.html').html(category.category_name);
   categoryList.append($('<li>').attr('id',    category.category_id).append(a));


      }

         },
         error: function() 
        {
            alert("error");

        }

     }); 
  // do something next pls, iam not familiar with ajax and javascript

我试图在 reportlist.html

上显示详细信息
    <!DOCTYPE html>
    <html>
    <head>      
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>     
    <script src="js/jquery.mobile-1.4.4.min.js"></script>    
    <script src="js/nextPage.js"></script> 
    <title>Edfutura1</title>
   </head>
   <body>   
   <div data-role="page" id="reportlist" data-overlay-theme="b" data-theme="a"  data-tolerance="15,15" class="ui-content">

            <a href="#" data-rel="back" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
           <div data-role="main" class="ui-content">

            <ul data-role="listview" data-inset="true" id="report">
              <li></li>        
            </ul>                                        


          </div>
        </div>

     </body>
    </html>        

实际上我的 reportlist.html 包含 report_name ,点击这些链接来自我的数据库

0 个答案:

没有答案