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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

app does not display content