app does not display content
-
Hello, I build my project, it worked very well in browser, and devices but when I build that, the application don’t display the content of pages, just the menu. (look the images)
however, I started using the monaca CLI, the best way to start, in my opinion.
could someone help me to solve that problem?
Regards.
-
It sounds like timing/event related issue but it’s hard to tell without taking a look at the source code.
You should probably open a support request here, specifying the project.
-
@Andi, ok. let me show you the source code:
(the entire html file)
<!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: 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"> <link rel="stylesheet" href="css/geral.css"> <link rel="stylesheet" href="css/onsen-css-components.css"> <link rel="stylesheet" href="css/onsen-css-components.min.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)); }; </script> <script type="text/javascript" src="js/web-pages.js"></script> <script type="text/javascript" src="js/sair.js"></script> <script type="text/javascript" src="js/network.js"></script> <script type="text/javascript"> function shareApp() { window.plugins.share.show( { subject: 'Compartilhe esse app!', text: 'text http://encontrocomcristo.com.br' }, function() {}, // Success function function() {alert('Falha ao compartilhar')} // Failure function ); } </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item> <img class="object-321" src="imgs/ecc-menu.png"> </ons-list-item> <ons-list-item onclick="fn.load('home.html')" tappable> <ons-icon icon="md-radio"></ons-icon> Home </ons-list-item> <ons-list-item class="xeno-jockey" onclick="fn.load('programacao.html')" tappable> <ons-icon icon="md-input-antenna"></ons-icon> Programação </ons-list-item> <ons-list-item onclick="fn.load('social.html')" tappable> <ons-icon icon="md-group"></ons-icon> Redes Sociais </ons-list-item> <ons-list-item class="xeno-jockey" onclick="doacao()" tappable> <ons-icon icon="md-paypal"></ons-icon> Doar </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> <ons-icon icon="md-collection-speaker"></ons-icon> Sobre </ons-list-item> <ons-list-item class="xeno-jockey" onclick="sair()" tappable> <ons-icon icon="md-close"></ons-icon> Sair </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <ons-template id="home.html"> <ons-page modifier="material"> <ons-toolbar class="topo" modifier="material"> <div class="left"> <ons-toolbar-button modifier="material" onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center">Rádio Encontro com Cristo</div> <div class="right"> <ons-toolbar-button modifier="material"> <ons-icon icon="md-share"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <!--corpo--> <img class="facehugger" src="imgs/fundo_app.png"> <div class="center prometheus"> <iframe style="margin-left: 25%;margin-right:5%; background-color: #eee;" src="http://players.ciclano.io/v2/players/radio/box/jplayer_small/index.php?autoplay=true&user=maxdesig&ip=centova12.ciclanohost.com.br&ponto=&porta=8343&n_radio= &facebook=&twitter=&cor=eee" scrolling="no" width="200" height="92" frameborder="0"></iframe> </div> <!--<ons-scroller>--> <ul class="list list--material"> <li class="list__header list__header--material"> <h3>Programação disponível</h3> </li> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 1</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 1</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 2</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 2</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 3</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 3</div> </div> </li> </ul> <h1>me dê agua</h1> <!--</ons-scroller>--> </ons-page> </ons-template> <ons-template id="programacao.html"> <ons-page modifier="material"> <ons-toolbar class="topo" modifier="material"> <div class="left"> <ons-toolbar-button modifier="material" onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center">Programação diária</div> <div class="right"> <ons-toolbar-button onclick="shareApp()" modifier="material"> <ons-icon icon="md-share"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <!--corpo--> <ul class="list list--material"> <li class="list__header list__header--material"> <h3>Segunda-feira</h3> </li> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 1</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 1</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 2</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 2</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 3</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 3</div> </div> </li> </ul> <ul class="list list--material"> <li class="list__header list__header--material"> <h3>Terça-feira</h3> </li> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 1</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 1</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 2</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 2</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 3</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 3</div> </div> </li> </ul> <ul class="list list--material"> <li class="list__header list__header--material"> <h3>Quarta-feira</h3> </li> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 1</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 1</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 2</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 2</div> </div> </li> <hr/> <li class="list__item list__item--material"> <div class="list__item__center list__item--material__center"> <div class="list__item__title list__item--material__title">Faixa 3</div> <div class="list__item__subtitle list__item--material__subtitle">Artista 3</div> </div> </li> </ul> </ons-page> </ons-template> <ons-template id="social.html"> <ons-page modifier="material"> <ons-toolbar class="topo" modifier="material"> <div class="left"> <ons-toolbar-button modifier="material" onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center">Redes sociais</div> <div class="right"> <ons-toolbar-button onclick="shareApp()" modifier="material"> <ons-icon icon="md-share"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <div class="center"> <h3 style="text-align: center;"> Siga-nos abaixo: </h3> </div> <ons-row> <div class="segment segment--material center" style="width: 280px; margin: 0 auto;"> <button class="segment__item segment--material__item"> <input onclick="facebookpage()" type="radio" class="segment__input segment--material__input" name="segment-b" checked> <div class="segment__button segment--material__button"> <ons-icon icon="md-facebook"></ons-icon> Facebook</div> </button> <button class="segment__item segment--material__item"> <input onclick="twitter()" type="radio" class="segment__input segment--material__input" name="segment-b"> <div class="segment__button segment--material__button"> <ons-icon icon="md-twitter"></ons-icon> Twitter</div> </button> <button class="segment__item segment--material__item"> <input onclick="plus()" type="radio" class="segment__input segment--material__input" name="segment-b"> <div class="segment__button segment--material__button"> <ons-icon icon="md-google"></ons-icon> Google +</div> </button> </div> </ons-row> </ons-page> </ons-template> <ons-template id="about.html"> <ons-page modifier="material"> <ons-toolbar class="topo" modifier="material"> <div class="left"> <ons-toolbar-button modifier="material" onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center">Sobre o aplicativo</div> <div class="right"> <ons-toolbar-button onclick="shareApp()" modifier="material"> <ons-icon icon="md-share"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <!--corpo--> <div class="center"> <h3 style="text-align: center;"> Sobre o aplicativo </h3> <p style="text-align: justify;margin-left: 0.5em;margin-right: 0.5em;"> Aplicativo desenvolvido para levar louvor a todo ouvinte, Radio Encontro com Cristo. <br><br><br> </p> <p style="text-align: center;"> © Fundação Kyrios - 2016 </p> </div> <ons-fab onclick="fale()" class="fab-simples" position="right bottom"> <ons-ripple></ons-ripple> <ons-icon icon="md-edit"></ons-icon> </ons-fab> </ons-page> </ons-template> </body> </html>
sorry for that questions, I’m still noob to use this framework. :sweat_smile:
-
Try to put all your JS code inside the
ons.ready
function and see how it goes.
-
Hi @Andi , I did exactly you said to me. it worked perfectly!
but, I added this script with:<script> ons.platform.select('android'); </script>
I’m very thankful for your help.
-
Glad it helped, enjoy Onsen UI! :D
-
yes, I will! ^^