私はPhoneGapアプリケーションでOpenlayersを使用してローカルマップを表示しています。ポップアップを使用して、以前に表示された場所の情報をマーカーで表示します。このポップアップにリンクを追加して別のページにリダイレクトしますが、ポップアップをクリックしてリダイレクトすると、「Uncaught ReferenceError: $ is not defined」というエラーが表示されます。新しいページは引き続き表示されますが、js ライブラリまたは css が読み込まれていないため、「Uncaught ReferenceError: $ is not defined」というエラーが生成されます。ポップアップからリダイレクトすると、すべての js ライブラリが DOM に存在しなくなったと思います。私は Ajax を使用して他のページを読み込んで DOM に追加するので、最初のページですべての js ライブラリを参照するのは index.html です。アプリケーションの他のリダイレクトで成功しました。
このエラーで私を助けてください! ありがとう！
あなたのコードと私たちの会話に基づいて、JQM の外部で生成されたリンクは認識されません。したがって、jQuery と jQuery Mobile を新しいリンクにリンクすることが不可欠です。
コードでは、JQM ではなく OpenLayer によってリンクが生成されました。
これは私のコードです：
var init = function () {
OpenLayers.ImgPath = "images/"
var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
styleMap: new OpenLayers.StyleMap({
externalGraphic: "images/mobile-loc.png",
graphicOpacity: 1.0,
wrapDateLine : true,
graphicWidth: 32,
graphicHeight: 32,
graphicYOffset: -26
})
});
//add locations to feature
addFeature();
selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {
autoActivate:true,
onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect
});
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,'<div style="height:40px"><a id="locationListView" href="location-detail.html?id='+
feature.attributes.LocationID+'&masterID='+"1"+'"><h1 style="color:#FF0000;font-size:16px;margin-bottom: 0px">'+feature.attributes.Name+'</h1><p class="classement '+
feature.attributes.LocationRating+'">'+feature.attributes.LocationRating+
' stars</p></a></div>'
, null, true, onPopupClose);
popup.panMapIfOutOfView = true;
popup.autoSize = true;
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
// create map
map = new OpenLayers.Map({
div: "map",
theme: null,
projection: sm,
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}),
selectControl
]
});
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
layerMapnik.setOpacity(0.4);
map.addLayer(layerMapnik);
map.isValidZoomLevel = function(zoomLevel) {
return ( (zoomLevel != null) &&
(zoomLevel >= 12) && // set min level here, could read from property
(zoomLevel <= 16) );
}
var newLayer = new OpenLayers.Layer.OSM("Local Tiles", AppPath + "${z}/${x}/${y}.png", { numZoomLevels: 19, alpha: true, isBaseLayer: false,tileOptions: {crossOriginKeyword: null} });
map.addLayer(newLayer);
map.addLayer(vector);
map.addLayer(sprintersLayer);
//point of center
//centerPoint = new OpenLayers.LonLat(106.62230325481676,10.856649277232393).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
//if (!map.getCenter()) {
//map.setCenter(centerPoint, zoom);
//}
var style = {
fillOpacity: 0.1,
fillColor: '#000',
strokeColor: '#f00',
strokeOpacity: 0.6
};
};
onFeatureSelect(feature) 関数でリンク リダイレクトを Popup に追加します。location-Detail.html へのリダイレクトが成功した後、要素 html を取得するために $ (jQuery) を使用する js ライブラリの最初の行でエラーが発生します。これは location-Detail.html のコードです。
<!DOCTYPE html>
<html>
<!-- Mirrored from ritenv.com/templates/klassio-rsv/gallery.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:17 GMT -->
<head>
</head>
<body>
<div data-dom-cache="false" data-role="page" class="pages" id="locationDetail" data-theme="a">
<div data-role="header">
<div class="left">
<a href="#" class="showMenu menu-button"><img src="images/menu-button.png" width="40" /></a>
<a href="#" class="back-button"><img src="images/back-button.png" width="40" /></a>
</div>
<h1><p class="no-margin" id="category"></p><p class="no-margin">TourGuide</p></h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a" class="minus-shadow">
<div class="ui-grid-a" id="places_infos">
<div class="ui-block-a" id="LocationImage">
<p id="imageMain"></p>
</div>
<div class="ui-block-b">
<div id="LocationDescription"></div>
<div id="starLocationRating" data-number="4"></div>
<div id="hintLocation"></div>
<div id="starFavorites"><img class="imageFavorites" src="images/favorites_add.png"></div><br>
<div><p class="distance" style="height:16px"></p></div>
<div><a href="#" class="button button9" id="locationMap"><p>Map</p></a></div>
</div>
</div><!-- /grid-a -->
<div id="tabs">
<ul class="tab-menu-ul">
<li><a href="#tab1">Detail</a></li>
<li><a href="#tab2">Gallery</a></li>
<li><a href="#tab3">Reviews</a></li>
<li><a href="#tab4">Share</a></li>
</ul>
<div id="tab1">
<div id="nearPlaces">
<h1>Nearly Locations:</h1>
<ul data-role="listview" data-inset="true" id="locationListView">
</ul>
</div>
</div>
<div id="tab2">
<a class="button button3" id="takePhoto">Take Photo</a>
<ul id = "gallery" class="gallery photoswipe column-split four-column" style="display: inline-block;">
<li><a data-ajax="false" href="images/content/stair-case.jpg"><img src="images/content/stair-case.jpg" alt="......." /></a></li>
<li><a data-ajax="false" href="images/content/concert.jpg"><img src="images/content/concert.jpg" alt="......" /></a></li>
<li><a data-ajax="false" href="images/content/beach.jpg"><img src="images/content/beach.jpg" alt="........." /></a></li>
<li><a data-ajax="false" href="images/content/garden.jpg"><img src="images/content/garden.jpg" alt="......." /></a></li>
</ul>
</div>
<div id="tab3">
<div class="dropdown-toggle needsclick" id="starRating" data-number="4"></div>
<div class="dropdown-toggle needsclick" id="hint"></div>
<div id="myComment">
<h1>Me: </h1>
<ul id="commentList"></ul>
</div>
<div class="subcontainer">
<form method="post" action="" id="comment_form" data-ajax="false">
<div>
<label for="message" class="formsub">Your Comment:</label>
<textarea cols="40" class="textarea" rows="8" name="message" id="comment"></textarea>
</div>
<div id="loader">
<button type="submit" id="submit">SEND</button>
</div>
</form>
</div>
<div>
<h1>Others: </h1>
<ul id="userCommentList"></ul>
</div>
</div>
<div id="tab4">
<p> Share with facebook.</p>
</div>
</div>
</div><!-- /content -->
<div class="bread-crumb">
<ul id="linkPage">
<li><a data-transition="pop" href="index.html"><img src="images/bc-home.png" width="16" /></a></li>
<li><a data-transition="pop" href="#" id="linkPage1"></a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('#locationDetail').die().live("pageshow", function( event ) {
event.preventDefault();
initLocationDetailPage();
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34399779-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div><!-- /page -->
</body>
<!-- Mirrored from ritenv.com/templates/klassio-rsv/gallery.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:35 GMT -->
</html>
すべての js ライブラリを index.html に配置しました。他のケースでは、js ライブラリも正常に読み込まれます。このエラーのアイデアはありますか?