Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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>"); } } } } }); }