0
リモートサーバーからデータを取得してテーブルに表示しようとしています。 javascript関数が実行されず、画面に何も表示されません（タブ2）。私は2番目のタブでCoupns.htmlファイルをロードしたいjavascript [OnsenUI]を使用して動的テーブルを読み込めません
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/fetchData.js"></script>
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="institution"
label="shops"
page="navigator.html"
active="true"> </ons-tabbar-item>
<ons-tabbar-item
icon="tags"
label="Coupens"
page="coupns.html"></ons-tabbar-item>
<ons-tabbar-item
icon="sign-in"
label="BeaconCatch"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</body>
</html>
：
は、ここに私のindex.htmlです。タブ2（Coupnes）をクリックすると何も表示されません。
は、ここに私のcoupns.htmlファイル
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
}
</script>
<script>
console.log("start");
var form = new FormData();
form.append("timestamp", "2016-12-02");
var response = 0;
var settings = {
"async": true,
"crossDomain": true,
"dataType": "Json",
"url": "http://xx.xxxxxx.com/xxxxx/coupens/",
"method": "POST",
"headers": {
"authorization": "Basic xxxxxxxxxxxxxxxxxxxx",
"cache-control": "no-cache",
},
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": form
}
$.ajax(settings).done(function (response) {
console.log("response");
var url1=response.coupon[0].main_image;
var url2=response.coupon[1].main_image;
var url3=response.coupon[2].main_image;
var url4=response.coupon[3].main_image;
var table = document.getElementById("myTable");
var row1 = table.insertRow(0);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var img1 = document.createElement('img');
var img2 = document.createElement('img');
img1.src = url1;
img2.src = url2;
img1.width = "150";
img1.height = "250";
img2.width = "150";
img2.height = "250";
cell1.appendChild(img1);
cell2.appendChild(img2);
var row2 = table.insertRow(1);
var cell2 = row2.insertCell(0);
var cell3 = row2.insertCell(1);
var img3 = document.createElement('img');
var img4 = document.createElement('img');
img3.src = url2;
img4.src = url3;
img3.width = "150";
img3.height = "250";
img4.width = "150";
img4.height = "250";
cell2.appendChild(img3);
cell3.appendChild(img4);
var row3 = table.insertRow(2);
var cell4 = row3.insertCell(0);
var cell5 = row3.insertCell(1);
var img5 = document.createElement('img');
var img6 = document.createElement('img');
img5.src = url2;
img6.src = url3;
img5.width = "150";
img5.height = "250";
img6.width = "150";
img6.height = "250";
cell4.appendChild(img5);
cell5.appendChild(img6);
});
</script>
</head>
<body>
<div>
<table id="myTable">
</table>
</div>
</body>
</html>
はなぜcoupens（画像）coupns.htmlにロードされていないのですか？
これは誤った使い方です。続行する前にドキュメントを見てください。特にこのセクションはhttps://onsen.io/v2/docs/guide/js/#templates –
あなたは 'mytable'に物事を追加しようとしていますが、そのテーブルはまだ存在しませんスクリプトをページの一番下に移動するか、ドキュメントに 'document.onload（）'が完全にロードされたときに呼び出すようにしてください。 – Grey