メインの html ページから呼び出される html ページがあり、これは正常に動作します。リモート サーバーの php スクリプトを呼び出してリスト ビュー アイテムを作成する関数を起動したいと考えています。電話ギャップ、jquery mobile 1.2.0、およびjquery 1.8.3を使用しています
呼び出された html ページには、次のコードがあります。
<!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>
以下に示すように、実際のバインドを特定の ID を持つ div の間に配置する必要があることを読みました。
<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();
});
火事のバグでは、次のメッセージが表示されます
ReferenceError: getAreas が定義されていません
なぜこれが関数が存在して機能するのかわかりません