Q&A
前提・実現したいこと
ousenUI・ホットペッパーAPI を使って、現在地からお店の検索をするアプリを作成しています。
<ons-splitter-content> と <ons-navigator> を併用したところ、'nav.pushPage'の箇所にエラーが出てきました。
エラーにより、画面遷移ができなくなってしまったので何が原因になっているのか教えていただけると助かります。
長いコードですが、どうかお願いします。
発生している問題・エラーメッセージ
<ons-splitter-content id="content"> <ons-navigator id="mynavigator" page="top.html"></ons-navigator> </ons-splitter-content> ーー略ーー var nav = document.querySelector('#mynavigator'); nav.pushPage('second.html',{data:{name:name, address:address, lat:lat, lng:lng, range:range, url:url}}); エラーメッセージ： TypeError: null is not an object (evaluating 'nav.pushPage')
該当のソースコード
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script><link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load(page) .then(menu.close.bind(menu)); }; if (ons.platform.isIPhoneX()) { document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); } </script> </head> <body> var items; var range;<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBIjpOCQdWKWWMzDboyRortubjTY2aFe8c"> </script>
<!-- メニュー --> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item onclick="fn.load('top.html')" tappable> top </ons-list-item> <ons-list-item onclick="fn.load('setting.html')" tappable> setting </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content"> <ons-navigator id="mynavigator" page="top.html"></ons-navigator> </ons-splitter-content> </ons-splitter> <template id="top.html"> <ons-page id="top-page"> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center">検索</div> </ons-toolbar> <div class="wrapper"> <ons-button id="GPS_search">探す</ons-button> <ons-list id="shops"></ons-list> </div> <script> ons.getScriptPage().onInit = function(){ this.querySelector("#GPS_search").onclick = function(){ navigator.geolocation.getCurrentPosition( function(position) { console.log("位置情報 取得成功"); var lat = position.coords.latitude; var lng = position.coords.longitude; var ranges = range; var count = 20; var key = ""; var url = `http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=${key}&lat=${lat}&lng=${lng}&range=${ranges}&count=${count}&format=jsonp`; $.ajax({ url: url, type: 'GET', dataType: "jsonp" }).done(function(data){ console.log("データ 取得成功"); var result =""; items = data.items; for (var i=0; i<data["results"]["shop"].length; i++) { var item = data["results"]["shop"][i]; var name = item.name; result = `<ons-list-item class='shop'><div class='left'><img class='list-item__thumbnail' src='${item.logo_image}'</div> <div class='center'>${name}</div>`; result += `<span data-name="${name}" data-address="${item.address}" data-lat="${item.lat}" data-lng="${item.lng}" data-range="${item.range}" data-url="${item.urls.pc}"></span></ons-list-item>`; $("#shops").append(result); } }).fail(function() { console.log("データ 取得失敗"); }) }, function() { console.log("位置情報 取得失敗"); } ) } $(document).on("click", ".shop", function() { var nav = document.querySelector('#mynavigator'); var name = $(this).find("span").data("name"); var address = $(this).find("span").data("address"); var lat = $(this).find("span").data("lat"); var lng = $(this).find("span").data("lng"); var range = $(this).find("span").data("range"); var url = $(this).find("span").data("url");
/* ＊＊＊＊＊＊＊＊＊＊ nav.pushPage にエラー ＊＊＊＊＊＊＊＊＊＊ */
nav.pushPage('second.html',{data:{name:name, address:address, lat:lat, lng:lng, range:range, url:url}});
});
}
</script>
</template> </body> </html></ons-page> </template> <template id="second.html"> </template> <template id="third.html">
あなたの回答
tips
プレビュー
