Monaca Onsen UI Discord Chat Github Repo

Retrieve data from a text from webserver



  • 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();
    });