trying to get data from the server - doesnt seem to work?

trying to get data from the server - doesnt seem to work?

So I am trying to fetch data from server and display. when i run the actual site in a browser (ff etc), i get the data displayed but when i try to do it via the mobile, i get a blank page? 

i have tried several things instead of $(document).read.. like pageinit, live, on etc to not avail.. cant find any tutorials either


  1. <!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link rel="stylesheet"  href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css">
<link rel="stylesheet"  href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css">
<link rel="stylesheet"  href="jquery-mobile/jquery.mobile-1.3.0.min.css">

<script src="jquery-mobile/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>

<script type="text/javascript">

$(document).bind("mobileinit", function () {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});

$(document).ready(function() {
alert(1);
var url = "http://education.shehzadazram.co.uk/jquery/phone_app/connect.php"; 
var d = new Date(); 

//for testing
var todays_date = "2013-02-04";
//var todays_date =  d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate();
alert(1);
$.post(url, {
method: 'get_lesson_activities',
date:  todays_date
},
function(data){
alert(2);
alert(data);
if (data.error) {
//alert(data.error);
alert(3);
$("#todays_lesson_content").html(data.error);
} else {
alert(4);
var content = '';

//loop through the data
$.each(data, function(id, object) {
alert(5);
// $.each(object, function(name, value) {
//alert(object.status);
var activity_id 			= object.activity_id;
var activity_status 		= object.status;
var activity_type 			= object.type;
var schedule_activities_id 	= object.schedule_activities_id;

//});
var status = "";

if ( activity_status == "closed" ) {
status += "Can't view";
} else if ( activity_status == "open" ) { 
status = '<a id="a_activity_review" schedule_activities_id="'+schedule_activities_id+'" href="">';
status += "start";
status += '</a>';
} else { 
status = "Score";
}

content += '<li>'+activity_type;
content += '<span class="ui-li-count">'+ status +'</span>';
content += '</li>';


});

content += '</ul>';
$("#todays_lesson_content").html(content);
$( "#todays_lesson_content" ).listview();
}
},
"json"
);
});
</script>

</head>

<body>

<div data-role="page" id="todays_lesson" data-theme="e">

<div data-role="header"  data-theme="e">
<h1>Menu</h1>
</div>

<div id="todays_lesson_content" data-role="content" data-theme="e">   
</div>

<div data-role="footer" data-theme="e">
<h4>App Name © 2013</h4>
</div>

</div>

</body>
</html>