jquery mobile-如何在1.4中將動態創建的頁面附加到pagecontainer

Question

我有一個要求，我需要從數據庫中動態獲取設備詳細信息，並將這些設備列表添加到列表中，並為列表中的每個鏈接添加頁面。 我正在使用JQM 1.4.2。

這是我的html

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 

    <script src="js/index.js"></script>
</head>
<body>
    <div data-role="panel" data-display="push" data-theme="a" id="nav-panel" data-position="left">
            <ul data-role="listview">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a href="#panel-main">Main panel page</a></li>                
                //i need to append list here    
            </ul>
        </div> 

        <div data-role="page" id="panel-main" data-title="Panel main"  data-position="fixed">

            <div data-role="header">
                <h1>main page</h1>

                <a href="#nav-panel" data-icon="bars" data-iconpos="notext" id="bar_menu">Menu</a>
            </div>

            <div role="main" class="ui-content jqm-content jqm-fullwidth">
                <p>main page</p>

            </div>            
        </div>

</body>
</html>

這是我的index.js

$(document).on("pageinit","#panel-main",function(){
         $.ajax({url: 'fetch_devices.php',
                    type: 'get',                  
                    async: 'true',
                        callback: 'jsonCallback',
                    dataType: 'jsonp',
                    beforeSend: function() {
                        $.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:true, textVisible: true}); // This will show ajax spinner
                    },
                    complete: function() {
                        $.mobile.loading('hide'); // This will hide ajax spinner
                    },
                    success: function (result) {
                        var menu_list='<ul data-role="listview"><li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li><li><a href="#panel-main">Main panel page</a></li>';
                            var newPage='';
                            $.each(result, function()
                            {
                              $.each(this, function(name, value) {

                                    if(name=='title')
                                    {
                                      menu_list+='<li><a href="#device" id="dev_li">'+value+'</a></li>';
                                      newPage+ = "<div data-role=page id='"+value+"'><div data-role=header><h1>" +value+" page </h1></div><div data-role=content> this is a "+value+" page</div></div";
                                    }
                            });
                 });

                menu_list+='</ul>';
                $("#nav-panel").html(menu_list);   

                    },
                    error: function (request,error) {
                      alert('Network error has occurred please try again!');
                    }
                });                  

     return false; 

});

這是我的PHP代碼

<?php
  require_once 'dbconnect.php';
    header('Access-Control-Allow-Origin: *');
    $callback = isset($_GET['callback']) ? preg_replace('/[^a-z0-9$_]/si', '', $_GET['callback']) : false;
    header('Content-Type: ' . ($callback ? 'application/javascript' : 'application/json') . ';charset=UTF-8');

 $sql = "select id,device_id,device_type_id,titlefrom device;

 $res = mysql_query($sql);
 $rows = array();
 $i=0;
while($row = mysql_fetch_assoc($res)) {
    $rows['row'.$i++]=$row;
}
echo ($callback ? $callback . '(' : '') . json_encode($rows) . ($callback ? ')' : '');

?>

任何人都可以幫助我如何將“ menu_list”和“ newPage”數據添加到JQM頁面ontainer，並且當我單擊列出的設備鏈接時，它應該打開相應的頁面。 代碼中可能有很多錯誤，請原諒我，因為我是JQM的新手。 提前致謝

Answer 1

創建動態列表視圖時，必須調用.listview(); 初始化它。 如果改為將動態列表項添加到現有列表視圖，則調用.listview("refresh"); 。

要將動態頁面添加到容器中，您只需將頁面標記附加到BODY標簽即可：

$("body").append(newPage);

要使動態鏈接導航到新頁面，請確保每個鏈接的HREF為“＃” + pageid。 因此，如果您有一個ID為page1的頁面，則href為＃page1。

這是一個演示

在演示中，我僅使用頁面名稱數組而不是ajax調用來演示如何添加鏈接和頁面並使鏈接工作。

Answer 2

$（“您的內容”）.listview（）。appendTo（“＃Container”）;

jquery mobile-如何在1.4中將動態創建的頁面附加到pagecontainer

問題描述

2 個解決方案

解決方案1
1 已采納 2014-05-28 15:42:38

解決方案2
0 2014-07-03 12:46:16

jquery mobile-如何在1.4中將動態創建的頁面附加到pagecontainer

問題描述

2 個解決方案

解決方案1 1 已采納 2014-05-28 15:42:38

解決方案2 0 2014-07-03 12:46:16

解決方案1
1 已采納 2014-05-28 15:42:38

解決方案2
0 2014-07-03 12:46:16