Monaca Onsen UI Discord Chat Github Repo

Load external content into Onsen



  • Hello.
    I’m trying to load the content of an external file (located in a webserver) into an Onsen UI app. I’m using onsenui - v2.10.8 - 2019-04-01.

    This is my page code:

    <ons-page id="eventos">
      <script>
        // events list loader
        var xhttp = new XMLHttpRequest();
        var url = "http://manosdemadre.org/app/eventos.txt";
        
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            // Typical action to be performed when the document is ready:
            document.getElementById("noticias").innerHTML = xhttp.responseText;
          }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
      </script>
    
      <img src="img/eventos.jpg" width="100%" height="auto" alt="eventos" />
      
      <div class="page-content">
        <div class="title">¿Qué hacemos?</div>
    
        <p>Los eventos que se realizan son espacios de encuentro dedicados a la oración de reparación por las faltas, pecados y desagravios cometidos contra el Sagrado Corazón de Jesús, contra el Inmaculado Corazón de María y, especialmente, contra la Sagrada Eucaristía.</p>
    
        <div class="block">
          <ons-list>
            <ons-list-header>Próximos eventos</ons-list-header>
            <div id="noticias">
            </div>
          </ons-list>
        </div>
      </div>
    </ons-page>
    

    The page doesn’t load anything on Android 9 but it works fine on older versions.

    Could you please help me with this issue? Is there a better way to accomplish my needs?

    Thank you for all your help.

    Best Regards,

    Rafael.



  • @rafaguilarsol said in Load external content into Onsen:

    Hello.
    I’m trying to load the content of an external file (located in a webserver) into an Onsen UI app. I’m using onsenui - v2.10.8 - 2019-04-01.
    This is my page code:
    <ons-page id=“eventos”>
    <script>
    // events list loader
    var xhttp = new XMLHttpRequest();
    var url = “http://manosdemadre.org/app/eventos.txt”;

    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        // Typical action to be performed when the document is ready:
        document.getElementById("noticias").innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
    

    </script>

    <img src=“img/eventos.jpg” width=“100%” height=“auto” alt=“eventos” />

    <div class=“page-content”>
    <div class=“title”>¿Qué hacemos?</div>

    <p>Los eventos que se realizan son espacios de encuentro dedicados a la oración de reparación por las faltas, pecados y desagravios cometidos contra el Sagrado Corazón de Jesús, contra el Inmaculado Corazón de María y, especialmente, contra la Sagrada Eucaristía.</p>
    
    <div class="block">
      <ons-list>
        <ons-list-header>Próximos eventos</ons-list-header>
        <div id="noticias">
        </div>
      </ons-list>
    </div>
    

    </div>
    </ons-page>

    Check cross-origin policies.