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

Read the docs…

<ons-search-input placeholder="Search" onchange="MySearchFunction(this.value)"></ons-search-input>

Can also add the event using addEventListener function. Or add another event such as onkeyup and listen for a specific key to trigger the search event. Could even add a timer to listen for keystrokes and live-update the search… be creative!

Try something like this…

<style>
#bg1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%; 
background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
}
</style>

<ons-page id="myPage">
<ons-toolbar style="height: 120px;" id="MainToolbar">
<div
	<div class="left" id="MainToolbar_leftDiv">
		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
	</div>
</ons-toolbar>
<div id="hiddenspace" style="height: 72px;"><!--Hidden Space to Account for Header Height Increase--!></div>
<ons-card>
    <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
    <div class="title">
      Awesome framework
    </div>
      <ons-list>
        <ons-list-header>Bindings</ons-list-header>
        <ons-list-item>Vue</ons-list-item>
        <ons-list-item>Angular</ons-list-item>
        <ons-list-item>React</ons-list-item>
      </ons-list>
  </ons-card>
</ons-page>