Не удается загрузить динамическую таблицу с помощью javascript [OnsenUI]

Я пытаюсь извлечь данные с удаленного сервера и отобразить их в таблице. Функция javascript не запускается и ничего не отображает на экране (вкладка 2).Не удается загрузить динамическую таблицу с помощью javascript [OnsenUI]

Вот мой index.html:

<!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>

Я хочу, чтобы загрузить файл Coupns.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?

источник

2016-12-02 Jonathan Deon

Это неправильное использование интерфейса пользователя Onsen. Перед продолжением ознакомьтесь с документами, особенно в этом разделе https://onsen.io/v2/docs/guide/js/#templates –

, которые вы пытаетесь добавить в «mytable», пока эта таблица еще не существует , попробуйте переместить скрипт в нижней части страницы или вызвать его, когда документ полностью загружен с помощью 'document.onload()' – Grey

Вы пытаетесь получить данные через ajax с удаленного сервера (другой хост)? Что насчет Same Origin Policy. Консоль браузера отображает все сообщения?

источник

2016-12-02 08:30:40 sigor

Не удается загрузить динамическую таблицу с помощью javascript [OnsenUI]

ответ

Смежные вопросы