jquery mobile .html() not rendering in firefox
I am working on a web based touchscreen app for a popular home automation program called MisterHouse. For the record, I am using jquery 1.10.2 with jquery mobile 1.4.0 on firefox mobile 26.0.1 on an Asus memo pad. The app is intended for use on a landscaped wall mounted tablet.
My code so far is this:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1200" http-equiv="content-type">
<meta name="mobile-web-app-capable" content="yes">
<title>touchscreen</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.js"></script>
<script type="text/javascript">
var curr_page = (typeof curr_page == 'undefined') ? "main_menu" : curr_page;
window.setInterval(ShowTime, 1000);
$(document).ready(function() {
LoadPage(curr_page);
});
function LoadPage(page_name) {
$('#content').load('./' + page_name + '.html');
}
function ShowTime() {
$("#dateTime").html(formatAMPM());
}
function GoPage(page_name) {
curr_page = page_name;
LoadPage(page_name);
}
function GetMhMode() {
var url = './sub?json(objects=mode_occupied)';
//Get the current MH mode using a JSON call
$.getJSON(url, function (data) {
var m, modestable;
var mode = data.objects.mode_occupied.state;
var modes = data.objects.mode_occupied.states;
var count = Object.keys(modes).length;
modestable = '<table id="modesTable" style="width: 100%" data-transition="fade"><tbody>';
modestable += '<tr><td colspan="' + (count - 1) + '" rowspan="1" align="center">';
modestable += '<img src="images/icons/' + mode + '_mode.png" alt="Current mode" width="230" height="230" />';
modestable += '</td></tr>';
modestable += '<tr>';
for (var i = 0;i < count; i++) {
if (modes[i] != mode) {
modestable += '<td align="center">';
modestable += '<img src="images/icons/' + modes[i] + '_mode.png" alt="' + modes[i] + ' mode" width="170" height="170">';
modestable += '</td>';
}
}
modestable += '</tr>';
modestable += '</tbody></table>';
$('#modesList').html(modestable);
});
}
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours() > 12 ? d.getHours() - 12 : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm;
}
</script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div data-role="page" class="page" data-theme="c">
<div data-role="header" class="header"><span class="helper"></span>
<div id="header_right"><img alt="button left cap" src="images/black_button_left.png"><span
id="dateTime"> </span><img alt="button left cap" src="images/black_button_right.png">
</div>
</div>
<!-- /header -->
<div data-role="main" class="main" id="content" data-theme="c">
</div>
<!-- /content -->
<div data-role="footer" class="footer" data-theme="c">
<span class="helper"></span><a href="javascript:GoPage('main_menu');" id="home_btn"> </a>
</div>
<!-- /footer --> </div>
<!-- /page -->
</body>
</html>
The page loads and shows me my main screen which is 8 icons in 2 rows. The first icon calls the load_page function which loads this into the $('#content') section of the page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="modesList"><script type="text/javascript">GetMhMode();</script></div>
</body>
</html>
This then calls GetMhMode() which performs an ajax getJSON call to get data from the server. From that, it builds a table to show icons for the current mode of the system and below that icons for the other available system modes which will eventually be links to change to the different modes. The problem is that when I tap the "System Modes" icon, the page that it loads is blank on the tablet. When I do the same thing from my desktop browser loading the same page, everything works just fine.
I did test this on my mobile version of chrome (couldn't find what version) on the tablet and it seems to work fine on that. My main reason for wanting to use this in FireFox is that FF has an add-on that puts it in full screen mode after a successful page load which makes it look and act more like a regular app than a web page.
Over the past couple of days I have been doing extensive forum searches and a pile of different code tests to try and solve this issue, but to no avail. My thought is that it almost has to be something with FireFox and the way it works with mobile jquery. I found a number of other forum posts from my googling that talked about similar issues with FF and jquery mobile, but I tried most of the things that many of the other forum posts say "FIXED" their issues, but none of it worked.
If you need more information from me let me know, but I am pulling out what hair I have left trying to figure this out. Any help is appreciated.
Dan Bemowski
链接地址: http://www.djcxy.com/p/79750.html