Infinite scroll + ajax

[123php]

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.

[Fran Diox]

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

Substitute setTimeout with your AJAX call.

[123php]

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

[Fran Diox]

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

[123php]

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.

[Fran Diox]

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

[123php]

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

[Fran Diox]

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

[123php]

@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>");
              }
            }
          }
        }
      });
    }