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.
-
@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?
-
@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. :(
-
@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.
-
@123php You are somehow inserting cards inside other cards. Just check the codepen I sent before and use
ons-card
instead ofons-list-item
and a normaldiv
instead ofons-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>"); } } } } }); }