Load external content into Onsen

rafaguilarsol

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.

mcombatti

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

cesarechazu

Try https domain.