さまざまなパラメータがmysqlデータベースに保存されている静的なストリートビュー画像を読み込もうとしています。多くの代替案を試した後、データベースデータをjavascript変数に渡し、関連するURLを作成しようとしています(途中でページ幅を考慮に入れています)。
ページはrestaurant.php?r = xyzとしてロードされます。ここでxyzはMySQLで検索され、javascript配列に渡されるデータ$rの行を返します。一部の配列フィールドは、Googleストリートビューの静止画像のURLを作成するために使用されます。この静止画像は、ページに読み込まれる必要があります。
これは、サイトの他の場所で開始した(またはページの更新後に)このページへのアクセスを入力した場合に正常に機能します。
しかし、このページから始めて、restaurant.php?r = abcへの今後のすべてのリンクをナビゲートすると、画像が読み込まれません(ダウンロードされ、Chromeソースボックスに表示されます)。pageinitイベントは発生しますが、.html()はコンテンツの変更に失敗します(ただし、エラーは報告されません)。
javascriptとjquerymobileのいくつかの法則に違反しているのではないかと思います。
ヘッダーで宣言
var resto = {};
function insertSVPhoto() {
console.log("insertSVPhoto: Loaded data for: "+resto['rname']);
if ( Math.round(resto['heading']) != 0) {
var width = Math.round( $(document).width() * .9);
var s= "x250&location="+resto['lat']+",%20"+resto['lng']+"&fov=60&heading="+resto['heading']+"&pitch="+resto['pitch']+"&sensor=false";
var photo = "<img src='http://maps.googleapis.com/maps/api/streetview?size="+width+s+"'>";
console.log("Loading photo: "+photo);
$('#svphoto').html(photo);
} else {
console.log('No photo available');
$('#svphoto').html("<img src=''>");
}
}
そして、以下に私は
<div data-role="page" data-add-back-btn="true">
<script type="text/javascript" >
<?php
echo "resto = ".json_encode($r).";";
?>
$( document ).on("pageinit", insertSVPhoto );
</script>
<div id='svphoto'></div>