Reputation: 491
I have a html page that is called from a main html page and this works fine. I want to fire an function that calls a remote server php script and builds the list view items. I am using phone gap, jquery mobile 1.2.0 and jquery 1.8.3
In the called html page i have the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Search by area</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>
<link rel="stylesheet" href="custom.css" />
<script type="text/javascript">
function getAreas() {
$.ajax({
type:'GET',
url:'http://localhost/getData.php',
dataType:'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
$('#list').append("<li><a href='#' data-transition='slidedown'>" + item.area_name + "<span class='ui-li-count'>" + item.deal_count + "</span></a></li>");
$("#list").listview("refresh");
});
},
error: function(data){
// error on loading data
alert('error');
}
});
};
</script>
</head>
<body>
<div id="areas" data-role="page" data-add-back-btn="true">
<script type="text/javascript">
$("#areas").on('pageinit', function() {
// get the areas from the database
getAreas();
});
</script>
<div data-role="header">
<h1> Bucuresti deals</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h1> In which town do you want to eat? </h1>
</div>
</div>
</div>
</body>
</html>
I have read the actual bind needs to be placed in between the div with the specific id as shown below:
<div id="areas" data-role="page" data-add-back-btn="true">
<script type="text/javascript">
$("#areas").on('pageinit', function() {
// get the areas from the database
getAreas();
});
In fire bug i get the following message
ReferenceError: getAreas is not defined
I am not sure why this is when the function exists and works
Upvotes: 1
Views: 1413
Reputation: 74738
On the jQuery mobile docs:
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
so in your case this should be like this:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"> </script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>
script.js
will be your externalize scripts which you are having in the page currently:
function getAreas() {
$.ajax({
type:'GET',
url:'http://localhost/getData.php',
dataType:'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
$('#list').append("<li><a href='#' data-transition='slidedown'>" + item.area_name + "<span class='ui-li-count'>" + item.deal_count + "</span></a></li>");
$("#list").listview("refresh");
});
},
error: function(data){
// error on loading data
alert('error');
}
});
};
and
$("#areas").on('pageinit', function() {
// get the areas from the database
getAreas();
});
you can use these ways too:
$(document).bind("mobileinit", function(){
getAreas();
});
$(document).live( 'pageinit',function(event){
getAreas();
});
Upvotes: 2