jquery mobile - 如何在1.4中将动态创建的页面附加到pagecontainer

问题描述：

i have a requirement where i need to dynamically fetch device details from database and add those device list to list and also add pages for each link in the list. i am using JQM 1.4.2.

here is my 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>

this is my 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; 

});

this is my php code

<?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 ? ')' : '');

?>

Can any one help me how can i add the "menu_list" and "newPage" data to JQM page ontainer and also when i click on the listed device links it should open the corresponding page. There may be lot of errors in the code please excuse me as i am new to JQM. thanks in advance

答

When creating a dynamic listview you must call .listview(); to initialize it. If you instead add dynamic listitems to an existing listview, you call .listview("refresh");.

To add dynamic pages to the container you can just append the page markup to the BODY tag:

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

To make your dynamic links navigate to the new pages, make sure the HREF of each link is "#" + pageid. So if you have a page with id of page1, the href would be #page1.

Here is a DEMO

In the demo I just use an array of page names instead of an ajax call to demonstrate how you would add the links and pages and make the links work.

答

$("your content").listview().appendTo("#Container");

jquery mobile - 如何在1.4中将动态创建的页面附加到pagecontainer

相关推荐