Retrieve data from a text from webserver

rafaguilarsol

Hello.
I’m kinda new at Framework7 and Monaca.

I’m building a Framework7 App. I’m trying to retrieve data from a text file located on a webserver and show it into a page of my app.

This is my page html code:

<div class="page" data-name="eventos">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="title">Manos de Madre</div>
    </div>
  </div>
  
  <div class="page-content">
    <img src="../img/eventos.jpg" style="width:100%; height:auto;" alt="eventos" />
    
    <div class="block">
      <p>Los eventos que se realizan son espacios de encuentro dedicados a la oración de reparación por las faltas y pecados 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>
      
      <!-- List View -->
      <div class="block-title color-ocre">Próximos eventos</div>

      <div class="list accordion-list">
        <ul id="noticias">
        </ul>
      </div>
    </div>
  </div>
</div>

And my js code is this:

var app = new Framework7();

app.onPageInit('eventos', function (page) {
    // Do something here for "eventos" page
	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();
});

Could you guys please help me to solve this issue?

Thank you in advance.

UPDATE:
I change the js code a bit and it worked just fine.

// Option 2. Using live 'page:init' event handlers for each page
$$(document).on('page:init', '.page[data-name="eventos"]', function (e, page) {
  // Do something here when page with data-name="about" attribute loaded and initialized
  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();
});