Infinite scroll + ajax



  • Hello,

    I have right now one problem with Onsen UI.
    My problem is: Infinite scroll + ajax. I can’t find any good tutorial on how to set this up.
    I have an app that requests a bigger amount of data via ajax from a php script. I want to display 30-50 articles and then load more if you scroll down. How can I solve that? Is it complex to solve?

    Thank you in advance.


  • Onsen UI

    @123php Hi! I think it’s very simple: https://codepen.io/frankdiox/pen/ayOVPG?editors=1010

    Substitute setTimeout with your AJAX call.



  • @Fran-Diox Hello, thank you! But this is not exactly what I want because I’m using <ons-card>.

    I’ll show you some code.

    I have this PHP file (which is working so far):

    <?php
    header("Access-Control-Allow-Origin: *");
    
    include_once("Medoo.php");
    use Medoo\Medoo;
    
    $db = new Medoo([
        'database_type' => 'mysql',
        'database_name' => '*****',
        'server' => 'localhost',
        'username' => '*****',
        'password' => '*****'
    ]);
    
    function getThreads($db, $start, $limit){
      $data = $db->query("SELECT id, title, content, date, userid FROM threads LIMIT ".$start.", ".$limit."")->fetchAll();
      return $data;
    }
    
    function utf8ize($d) {
        if (is_array($d)) {
            foreach ($d as $k => $v) {
                $d[$k] = utf8ize($v);
            }
        } else if (is_string ($d)) {
            return utf8_encode($d);
        }
        return $d;
    }
    
    $start=htmlspecialchars(trim($_POST['start']));
    $limit=htmlspecialchars(trim($_POST['limit']));
    
      $query = getThreads($db, $start, $limit);
      if($query == false) {
        echo json_encode(array("code" => "failed"));
      } else {
        echo json_encode(utf8ize($query));
      }
    ?>
    

    And this is my HTML page:

            <template id="tab1.html">
                <ons-page id="Tab1">
                    <ons-pull-hook id="pull-hook">
                        Nach unten ziehen um neu zu laden
                    </ons-pull-hook>
                    <div id="content"></div>
                    <div id="threads"></div>
    
                </ons-page>
            </template>
        </ons-navigator>
    

    And this is my JS:

    $(window).scroll(function(){
      if($(window).scrollTop() == $(document).height() - $(window).height()){
        getData();
      }
    });
    
    var start = 0;
    var limit = 5;
    
    getData();
    
    function getData(){
        $.ajax({
            type: "POST",
            url: 'http://****/****/****.php',
            crossDomain: true,
            dataType: "text json",
            data: "&start="+start+"&limit="+limit,
            success: function (data) {
                if(data.code == "failed"){
    
                } else {
                    start += limit;
                    data.reverse();
                    $('#threads').html("");
                    for (var i = 0; i < data.length; i++) {
                        if(data[i]['userid'] == localStorage.id){
                            $('#threads').append("<ons-card onclick='pushpc("+data[i]["id"]+","+data[i]["userid"]+");'><div id='threadid'>"+data[i]["id"]+"</div><div class='title'>"+decode_utf8(data[i]["title"])+"</div><div class='content'>"+decode_utf8(data[i]["content"])+"</div></ons-card>");
                        } else {
                        $('#threads').append("<ons-card onclick='pushpc("+data[i]["id"]+","+data[i]["userid"]+");'><div id='threadid'>"+data[i]["id"]+"</div><div class='title'>"+decode_utf8(data[i]["title"])+"</div><div class='content'>"+decode_utf8(data[i]["content"])+"</div></ons-card>");
                    }
                    }
                }
            }
        });
    }
    
    
    

    If I scroll down it should load new content but it doesn’t work. Do you have any ideas?


  • Onsen UI

    @123php It doesn’t matter if you use ons-card or anything else. Just make sure you put your stuff inside page’s content (<div class="content">...</div>). Right now you are adding them outside.



  • I’m adding my content to <div class=“threads”>…</div>. Is this wrong?
    <div class=“content”></div> is used to display other information.
    Sorry, I don’t understand. :(


  • Onsen UI

    @123php Have a look at the docs: #PageCompilation. div class="content" is used by Onsen UI and it should contain all the scrollable content.



  • @Fran-Diox Content is now in <div id=“content”></div>, but it doesn’t work.
    I can see 5 elements but scrolling is not possible.

    EDIT: Now I changed id to class=“content”. Now really weird things happens.
    0_1511279905195_Bildschirmfoto 2017-11-21 um 16.57.08.png


  • Onsen UI

    @123php You are somehow inserting cards inside other cards. Just check the codepen I sent before and use ons-card instead of ons-list-item and a normal div instead of ons-list. It should be fine.



  • @Fran-Diox I have different div’s inside ons-card with parameters from ajax success function.

    I mean: data[i][“id”], data[i][“userid”] and so on…

    Will this work?

        function getData(){
          $.ajax({
            type: "POST",
            url: '***************',
            crossDomain: true,
            dataType: "text json",
            data: "&start="+start+"&limit="+limit,
            success: function (data) {
              if(data.code == "failed"){
    
              } else {
                start += limit;
                data.reverse();
                $('.content').html("");
                for (var i = 0; i < data.length; i++) {
                  if(data[i]['userid'] == localStorage.id){
                    $('.content').append("<ons-card onclick='pushpc("+data[i]["id"]+","+data[i]["userid"]+");'><div class='title'>"+decode_utf8(data[i]["title"])+"</div><div class='content'>"+decode_utf8(data[i]["content"])+"</div></ons-card>");
                  } else {
                    $('.content').append("<ons-card onclick='pushpc("+data[i]["id"]+","+data[i]["userid"]+");'><div class='title'>"+decode_utf8(data[i]["title"])+"</div><div class='content'>"+decode_utf8(data[i]["content"])+"</div></ons-card>");
                  }
                }
              }
            }
          });
        }
    
    

Log in to reply