how can i load json in jquery load 5 and if i scroll down it will be load again



  • HI I’m new here and I’m noob i would like to ask how can i load json in jquery load 5 and if i scroll down it will be load again 0_1502787659315_ssssss.JPG

    here is my code in juquery

    <script>
    // The Google Geocoding API url used to get the JSON data
    var geocodingAPI = "https://xx/api/json/en/";
    
    $.getJSON(geocodingAPI, function (json) {
      var address = json.total_results;
      console.log('Address : ', address);
    
      for(count = 0; count < address; count++){
          var l = json.results[count].url;
    
                  console.log('Address : ', l);
    
    
                }
        // Set the variables from the results array
    
    
      var latitude = json.results[0].listing.json_object.field_17;
        console.log('Latitude : ', latitude);
    
      //  var longitude = json.results[0].geometry.location.lng;
        console.log('Longitude : ', longitude);
    
        // Set the table td text
        $('#address').text(address);
        $('#latitude').text(latitude);
        $('#longitude').text(longitude);
    });
    
    // Caching the link jquery object
    var $myLink = $('a.myLink');
    
    // Set the links properties
    $myLink.prop({
        href: geocodingAPI,
        title: 'Click on this link to open in a new window.'
    }).click(function (e) {
        e.preventDefault();
        window.open(this.href, '_blank');
    });
    </script>
    
    

    Thank you


  • Onsen UI

    @Elliot-Vash Hi! You can use page’s onInfiniteScroll for that. There are other examples in the forum, like this one. Of course, you need to run your AJAX call to fetch new data instead of the setTimeout in that example.



  • Thank you for that information i will do what you suggest if i have any concern i will buzz you up heheheh :) God bLess



  • @Fran-Diox hi how can a call a ajx getson on setimeout do i need to create a function and replace setimeout on script thank you so much for your kindness


  • Onsen UI

    @Elliot-Vash You can do whatever you need to get your data, just remember to run done() (provided in onInfiniteScroll function) after everything has finished. $.getJSON(..., function(json) { storeMyJson(); done(); })



  • @Fran-Diox here is my code `

     document.addEventListener('init', function(event) {
      var page = event.target;
      if (page.matches('#load-more-page')) {
        var listNode = page.querySelector('#list-node');
        var createListItem = function (i) {
          return ons.createElement(`<ons-list-item id="info">${i}</ons-list-item>`);
        };
        for (let i = 0; i < 30; i++) {
          listNode.appendChild(createListItem(i));
        }
    
        page.onInfiniteScroll = function(done) {
    
    
              $.getJSON('https://wagi.ph/api/json/en/', function (data) {
                  var address = data.total_results;
                console.log("dsdsds",address);
    
              });
    
            done();
    
        };
      }
    });
    

    no data will show on my code can you help me

    tahnk you so much


  • Onsen UI

    @Elliot-Vash You are not doing anything with your data, you need to create visual components based on that new data. Also, the done() must be called when the asynchronous job is finished, not synchronously.

    I’m going to give you some pseudo code based on your input, you will need to complete it.

        page.onInfiniteScroll = function(done) {
    
    
              $.getJSON('https://wagi.ph/api/json/en/', function (data) {
                  var address = data.total_results;
     
                  // for each item in address
                  //   create ons-list-item
                  //   append ons-list-item to ons-list
    
                  done();  // This must be called after the async job is done (inside the AJAX call)
              });
        };
    


  • @Fran-Diox

    Thank you for your kindness here is my code but i wonder the first 30 ons-list item was blank and if i down i got 30 result and loop to 30 my total results is 212 each but i a scrool down the results will be 30 and loop on same 30 result

    <script>
    
    
      document.addEventListener('init', function(event) {
      var page = event.target;
      if (page.matches('#load-more-page')) {
        var listNode = page.querySelector('#list-node');
        var createListItem = function (i) {
          return ons.createElement(`<ons-list-item id="info"></ons-list-item>`);
        };
        for (let i = 0; i < 30; i++) {
          listNode.appendChild(createListItem(i));
        }
    
        page.onInfiniteScroll = function(done) {
          $.getJSON('https://wagi.ph/api/json/en/', function (data) {
                  var total_results = data.total_results;
    
                  var createListItem = function (i) {
                    return ons.createElement(`<ons-list-item id="info">${url}</ons-list-item>`);
                  };
                  for (let i = 0; i < total_results; i++) {
                     var url = data.results[i].url;
                    listNode.appendChild(createListItem(i));
                    done();
    
                  }
    
    
    });
        };
      }
    });
      </script>
    

    thankyou best regards


Log in to reply