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