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
