Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. 123php
    1
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    123php

    @123php

    0
    Reputation
    6
    Posts
    653
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    123php Follow

    Posts made by 123php

    • RE: Infinite scroll + ajax

      @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>");
                    }
                  }
                }
              }
            });
          }
      
      
      posted in Onsen UI
      1
      123php
    • RE: Infinite scroll + ajax

      @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

      posted in Onsen UI
      1
      123php
    • RE: Infinite scroll + ajax

      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. :(

      posted in Onsen UI
      1
      123php
    • RE: Infinite scroll + ajax

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

      posted in Onsen UI
      1
      123php
    • 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.

      posted in Onsen UI
      1
      123php
    • trouble with pushPage();

      Hi, I am having trouble with pushPage();, see: https://jsfiddle.net/w8904ztc/14/

      If you click the + button you should be able to see a new page with back button, but it doesn’t work.

      posted in Onsen UI
      1
      123php