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)

    1_1508198072862_Screenshot_2017-10-16-21-24-34.png 0_1508198072860_erro maldit.png

    however, I started using the monaca CLI, the best way to start, in my opinion.

    could someone help me to solve that problem?

    Regards.


  • Monaca

    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>&nbsp;Home
              </ons-list-item>
              <ons-list-item class="xeno-jockey" onclick="fn.load('programacao.html')" tappable>
                <ons-icon icon="md-input-antenna"></ons-icon>&nbsp;Programação
              </ons-list-item>
              <ons-list-item onclick="fn.load('social.html')" tappable>
                <ons-icon icon="md-group"></ons-icon>&nbsp;Redes Sociais
              </ons-list-item>
              <ons-list-item class="xeno-jockey" onclick="doacao()" tappable>
                <ons-icon icon="md-paypal"></ons-icon>&nbsp;Doar
              </ons-list-item>
              <ons-list-item onclick="fn.load('about.html')" tappable>
                <ons-icon icon="md-collection-speaker"></ons-icon>&nbsp;Sobre
              </ons-list-item>
              <ons-list-item class="xeno-jockey" onclick="sair()" tappable>
                <ons-icon icon="md-close"></ons-icon>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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;">
          
          &copy; 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:


  • Monaca

    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.


  • Monaca

    Glad it helped, enjoy Onsen UI! :D



  • yes, I will! ^^


Log in to reply