app does not display content

Jonathan Silva

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)

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.

Andi

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.

Jonathan Silva

@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:

Andi

Try to put all your JS code inside the ons.ready function and see how it goes.

Jonathan Silva

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.

Andi

Glad it helped, enjoy Onsen UI! :D

Jonathan Silva

yes, I will! ^^