1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Inhalte per scrollen nachladen

Dieses Thema im Forum "PHP" wurde erstellt von lokoroko, 10 Oktober 2017.

  1. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    133
    Punkte für Erfolge:
    16
    Hallo,

    wie man meiner Überschrift bereits entnehmen kann bin ich gerade dabei einen Code zu schreiben der Inhalte nachlädt sobald man nach unten gescrollt hat.

    Ich habe dafür als Basis einen Code aus dem Web genommen der wie folgt aussieht:

    Scroll.php:
    Code (text):
    1. <!DOCTYPE html>
    2. <html lang="de">
    3. <head>
    4.   <meta http-equiv="X-UA-Compatible" content="IE=9">
    5.   <meta charset="utf-8">
    6.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.   <meta name="robots" content="index,follow">
    8.   <title>Datensätze beim scrollen nachladen</title>
    9.   <link rel="stylesheet" href="Style.css" type="text/css" />
    10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    11.  
    12.   <script type="text/javascript">
    13.   $(document).ready(function()
    14.   {  
    15.     function loadNextData()
    16.     {
    17.       var userID=$(".block:last").attr("id");
    18.       $('div#loader').html('<img src="images/loader.gif">');
    19.       $.post("loaddata.php?lid="+userID,
    20.  
    21.       function(data)
    22.       {
    23.         if (data != "")
    24.         {
    25.           $(".block:last").after(data);    
    26.         }
    27.         $('div#loader').empty();
    28.       });
    29.     };
    30.  
    31.     $(window).scroll(function()
    32.     {
    33.       if($(window).scrollTop() == $(document).height() - $(window).height())
    34.       {
    35.         loadNextData();
    36.       }
    37.     });
    38.   });
    39.   </script>
    40. </head>
    41. <body>
    42.  
    43. <div id="wrapper">
    44.    
    45.   <?php include('loaddata.php'); ?>
    46.   <div id="loader"></div>
    47. </div>
    48.  
    49. </body>
    50. </html>
    Und loaddata.php:
    Code (text):
    1. <?php
    2. include("Zugang.php");
    3.  
    4. if(isset($_GET['lid']))
    5. {
    6.   $lid = $_GET['lid'];
    7.   $lim = 5; //Anzuzeigende Datensätze beim scrollen
    8. }
    9. else
    10. {
    11.   $lid = 0;
    12.   $lim = 5;//Anzuzeigende Datensätze beim Start
    13. }
    14.  
    15. if($lid==0) $abfrage = ""; else  $abfrage = " WHERE id > ".$lid;
    16.  
    17.  
    18.  
    19.  
    20. $q_data = mysql_query("SELECT id, path AS username
    21.                        FROM bildtabelle ".$abfrage." ORDER BY id ASC LIMIT ".$lim);
    22. while($r_data = mysql_fetch_array($q_data))
    23. {
    24.   $userido = $r_data['id'];
    25.     var_dump($userido);
    26.   if($r_data['username']!=' ') $username = $r_data['username']; else $username = 'unbekannt';
    27. ?>
    28.  
    29.  
    30. <div id="<?php echo $userido; ?>" class="block" ><?php echo "<b>".$userido."</b> ".$username; ?></div>
    31.  
    32. <?php
    33. }
    34. ?>

    Die Basis aus dem Netz funktioniert auch wunderbar. Also habe ich mich daran gemacht das ganze für mich zu optimieren und auf meinen Code anzuwenden. An sich funktioniert die eigentliche Funktion auch schon mal. Wenn man nach unten gescrollt hat werden weitere Bilder nachgeladen. Das Problem das ich jedoch habe ist, dass die nachgeladenen Bilder exakt die selben 5 Bilder sind die auch von Anfang an zu sehen sind ...

    Aber hier mein Code, vielleicht kann mir ja einer von euch helfen :)

    Hauptseite.php PS ( Ich habe das ganze mal auf das relevante gekürzt):
    Code (text):
    1. <script type="text/javascript">
    2.   $(document).ready(function()
    3.   {  
    4.     function loadNextData()
    5.     {
    6.       var userID=$(".rahmen:last").attr("id");
    7.       $('div#loader').html('<img src="okö.gif">');
    8.       $.post("loaddata.php?lid="+userID,
    9.  
    10.       function(data)
    11.       {
    12.         if (data != "")
    13.         {
    14.           $(".rahmen:last").after(data);    
    15.         }
    16.         $('div#loader').empty();
    17.       });
    18.     };
    19.  
    20.     $(window).scroll(function()
    21.     {
    22.       if($(window).scrollTop() == $(document).height() - $(window).height())
    23.       {
    24.         loadNextData();
    25.       }
    26.     });
    27.   });
    28.   </script>
    29.  
    30. <div id="wrapperfour">
    31. <legend>Popular</legend>
    32. <div id="servicetext">
    33. <?php include('loaddata.php'); ?>
    34.   <div id="loader"></div>  
    35.  
    36. </div>
    37. </div>

    loaddata.php:
    Code (text):
    1. <?php  
    2.  $test = "http://192.168.178.61/PHPversion/"; // mal gucken
    3. $idx = 0;  
    4.    
    5. if(isset($_GET['lid']))
    6. {
    7.   $lid = $_GET['lid'];
    8.   $lim = 5; //Anzuzeigende Datensätze beim scrollen
    9. }
    10. else
    11. {
    12.   $lid = 0;
    13.   $lim = 5;//Anzuzeigende Datensätze beim Start
    14. }
    15.  
    16. if($lid==0) $abfrage = ""; else  $abfrage = " AND id > ".$lid;
    17.    
    18. $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    19. $sql = "SELECT bildtabelle.path, adressen.benutzername, adressen.vorname, adressen.profilbild, bildtabelle.timestamp, adressen.id, bildtabelle.ideo FROM `bildtabelle`, `adressen` WHERE adressen.id = bildtabelle.user_id ".$abfrage." ORDER BY timestamp DESC LIMIT ".$lim;
    20. foreach ($pdo->query($sql) as $row) {
    21.     echo "<div class='rahmen'>
    22.         <img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><a href=User_Seite.php?user=".$row['id']." style:'font-weight: normal; data-user='".$row['id']."''><p style='color: black; float: left; margin-left: 37px; position: absolute; font-weight: normal'>".$row['benutzername']."</p></a><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
    23.         <ul class='bildermenu2'>
    24.         <li>
    25.         <div class='gallery' id='".$row['ideo']."'>
    26.             <img class='bild' data-idx='".$idx."' id='img".$idx."' src='".$test.$row['path']."' data-relurl='".$row['path']."'>
    27.         </div>
    28.         <div class='aufnahme'>
    29. <div class='effekt'></div>
    30. <div class='aufnahmetext'>
    31.     <i id='i' class='fa fa-star-half-o fa-2x' aria-hidden='true' style='float: left; margin-left: 100px;'></i>
    32.     <i id='i' class='fa fa-comment fa-2x' aria-hidden='true' style='float: right; margin-right: 100px;'></i>
    33. </div>
    34. </div>
    35. </li>
    36. </ul>
    37.     </div>";
    38.      $idx++;
    39. }  
    40. ?>
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Leider ist aus deinem Code nicht ersichtlich, welche(n) Wert() die Variable userID annehmen kann. Ich vermute aber, dass sie konstant ist. In dem Fall werden immer die selben Bilder aus der DB ausgelesen. Du musst diese Variable von Aufruf zu Aufruf erhöhen.
     
    lokoroko gefällt das.
  3. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    133
    Punkte für Erfolge:
    16
    Nun ja die Variable userID wird ja wie folgt definiert
    Code (text):
    1.  var userID=$(".rahmen:last").attr("id");
    In meinem ersten Posting, im zweiten Code findet man dann diese Zeile
    Code (text):
    1. <div class='gallery' id='".$row['ideo']."'>
    die in attr aufgeführte id soll $row['ideo'] sein. Ich weiß aber nicht ob das wirklich das Problem ist.

    Mir ist dann nämlich auch noch aufgefallen das im Original code das hier vorkommt
    ORDER BY id ASC

    Während bei mir ORDER BY timestamp DESC steht. Wenn das was du sagst aber stimmt dann müsste ich doch eigentlich runterzählen oder nicht ?


    Ich habe nur irgendwie das Gefühl das der Fehler irgendwo in diesem Code schlummert ...

    Code (text):
    1. $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    2. $sql = "SELECT bildtabelle.path, adressen.benutzername, adressen.vorname, adressen.profilbild, bildtabelle.timestamp, adressen.id, bildtabelle.ideo FROM `bildtabelle`, `adressen` WHERE adressen.id = bildtabelle.user_id ".$abfrage." ORDER BY timestamp DESC LIMIT ".$lim;
    3. foreach ($pdo->query($sql) as $row) {
    4.     echo "<div class='rahmen'>
    5.         <img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><a href=User_Seite.php?user=".$row['id']." style:'font-weight: normal; data-user='".$row['id']."''><p style='color: black; float: left; margin-left: 37px; position: absolute; font-weight: normal'>".$row['benutzername']."</p></a><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
    6.         <ul class='bildermenu2'>
    7.         <li>
    8.         <div class='gallery' id='".$row['ideo']."'>
    9.             <img class='bild' data-idx='".$idx."' id='img".$idx."' src='".$test.$row['path']."' data-relurl='".$row['path']."'>
    10.         </div>
    11.         <div class='aufnahme'>
    12. <div class='effekt'></div>
    13. <div class='aufnahmetext'>
    14.     <i id='i' class='fa fa-star-half-o fa-2x' aria-hidden='true' style='float: left; margin-left: 100px;'></i>
    15.     <i id='i' class='fa fa-comment fa-2x' aria-hidden='true' style='float: right; margin-right: 100px;'></i>
    16. </div>
    17. </div>
    18. </li>
    19. </ul>
    20.     </div>
    Das dumme ist nur das nicht von dem was ich probiere auch hilft...
     
    Zuletzt bearbeitet: 12 Oktober 2017 um 21:21 Uhr
  4. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Da steige ich nicht mehr durch. Ich denke jedoch, Du solltest die range-Klausel von mysql benutzen und Start und Anzahl der Datensätze als zusätzliche POST-Parameter an loaddata.php übergeben. So wie Du es früher bei dem anderen Problem gemacht hast, ich glaube, es ging um das Nachladen der Kommentare.
    BTW: Du benutzt auf der einen Seite $.post(), übergibst auf der anderen Seite jedoch URL-Parameter und greifst darauf mit $_GRT zu. Das mag funktionieren, ist jedoch mindestens irritierend.
     
    lokoroko gefällt das.
  5. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    133
    Punkte für Erfolge:
    16
    Okay also ich bin deinem Ratschlag mal nachgegangen und habe mir den Code nochmal angeschaut mit dem die Kommentare nachgeladen wurden. Der Unterschied ist ja das dieses mal die Inhalte per scrollen nachgeladen werden sollen, also ich habe ich versucht die beiden Codes miteinander zu kombinieren.

    Beginnen wir mit dem Javascript/Ajax-Teil auf Hauptseite.php:
    Code (text):
    1. <script>
    2.     var start = 0;
    3.         var count = 5;
    4.         function morepic() {
    5.             console.log(start, count);
    6.             var params = {
    7.                 start: start,
    8.                 count: count
    9.             };
    10.             $.ajax({
    11.                 url: "loaddata3.php",
    12.                 type: "POST",
    13.                 data: params,
    14.                 success: function (output) {
    15.                     console.log(output);
    16.                     var newpictures = $("<div>" + output + "</div>");
    17.                     start += count;
    18.                
    19.                     if (newpictures.find("span.end").length != 0) {
    20.                         $('div#loader').empty();
    21.                     }
    22.                
    23.                 }
    24.             });
    25.         }
    26.     $(window).scroll(function()
    27.     {
    28.       if($(window).scrollTop() == $(document).height() - $(window).height())
    29.       {
    30.         morepic();
    31.       }
    32.     });
    33. </script>
    Ebenfalls auf Hauptseite.php um loaddata3.php einzubinden:
    Code (text):
    1. <div id="wrapperfour">
    2. <legend>Popular</legend>
    3. <div id="servicetext">
    4. <?php include('loaddata3.php'); ?>
    5.   <div id="loader"></div>
    6.  
    7. </div>
    8. </div>

    Und dann zum Schluss noch die loaddata3.php:
    Code (text):
    1.  
    2. <?php    
    3.  $test = "http://192.168.178.61/PHPversion/"; // mal gucken
    4. $idx = 0;    
    5.    
    6. $start = $_POST["start"];
    7. $count = $_POST["count"];
    8. $count2 = $count + 1;
    9.  
    10.  
    11. try {
    12. $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    13. $sql = "SELECT bildtabelle.path, adressen.benutzername, adressen.vorname, adressen.profilbild, bildtabelle.timestamp, adressen.id FROM `bildtabelle`, `adressen` WHERE adressen.id = bildtabelle.user_id ORDER BY timestamp DESC LIMIT $start, $count2";  
    14.  $ergebnis = $db->query($sql);
    15.     $countread = 0;
    16. foreach ($ergebnis as $row) {
    17.     if ($countread < $count) {
    18.     echo "<div class='rahmen'>
    19.         <img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><a href=User_Seite.php?user=".$row['id']." style:'font-weight: normal; data-user='".$row['id']."''><p style='color: black; float: left; margin-left: 37px; position: absolute; font-weight: normal'>".$row['benutzername']."</p></a><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
    20.         <ul class='bildermenu2'>
    21.         <li>
    22.         <div class='gallery'>
    23.             <img class='bild' data-idx='".$idx."' id='img".$idx."' src='".$test.$row['path']."' data-relurl='".$row['path']."'>
    24.         </div>
    25.         <div class='aufnahme'>
    26. <div class='effekt'></div>
    27. <div class='aufnahmetext'>
    28.     <i id='i' class='fa fa-star-half-o fa-2x' aria-hidden='true' style='float: left; margin-left: 100px;'></i>
    29.     <i id='i' class='fa fa-comment fa-2x' aria-hidden='true' style='float: right; margin-right: 100px;'></i>
    30. </div>
    31. </div>
    32. </li>
    33. </ul>
    34.     </div>";
    35.      $idx++;
    36.     }
    37.         $countread++;
    38. }  
    39. if ($countread < $count2) {
    40.         echo '<span class="end"></span>';
    41.     }
    42. } catch (PDOException $e) {
    43.   echo 'Fehler: ' . htmlspecialchars($e->getMessage());
    44. }
    45. ?>
    46.  
    Aus irgendeinem Grund werden aber $start und $count2 nicht übergeben wodurch ich aktuell immer eine Fehlermeldung für ein invalid Argument bekomme...



    EDIT: Mir fällt gerade ein das ich doch eigentlich loaddata3.php nicht über include einbeziehen muss sondern das Div-Element "servicetext" auch über so einen Code gefüllt werden kann oder ?
    $("#servicetext").append(newpictures);
     
    Zuletzt bearbeitet: 14 Oktober 2017 um 14:08 Uhr
  6. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Der erste Abschnitt mit Javascript sieht für mich vernünftig aus.

    Das sehe ich genau so. Hat es geholfen, das include zu löschen und das append() hinzu zu fügen?

    Zum dritten Abschnitt (loaddata3.php): Ich bin der Meinung, dass Du dieses:
    Code (text):
    1. if ($countread < $count) {
    nicht brauchst, denn durch die LIMIT-Klausel ist die Zahl der Reihen ja schon begrenzt.
     
    lokoroko gefällt das.
  7. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    133
    Punkte für Erfolge:
    16
    Also ich habe das ganze mal ausprobiert und es scheint so als wenn loaddata3.php gar nicht mit einbezogen wird, woran könnte das liegen ?. Das Div-Element "servicetext" bleibt jedenfalls leer...

    So sieht das Javascript jetzt aus (Hauptseite.php):

    Code (text):
    1. <script>
    2.     var start = 0;
    3.         var count = 5;
    4.         function morepic() {
    5.             console.log(start, count);
    6.             var params = {
    7.                 start: start,
    8.                 count: count
    9.             };
    10.             $.ajax({
    11.                 url: "loaddata3.php",
    12.                 type: "POST",
    13.                 data: params,
    14.                 success: function (output) {
    15.                     console.log(output);
    16.                     var newpictures = $("<div>" + output + "</div>");
    17.                     start += count;
    18.                    
    19.                     if (newpictures.find("span.end").length != 0) {
    20.                         $('div#loader').empty();
    21.                     }
    22.                  $("#servicetext").append(newpictures);  
    23.                 }
    24.             });
    25.         }
    26.     $(window).scroll(function()
    27.     {
    28.       if($(window).scrollTop() == $(document).height() - $(window).height())
    29.       {
    30.         morepic();
    31.       }
    32.     });
    33. </script>
    Das Div-Element ebenfalls auf Hauptseite.php:

    Code (text):
    1. <div id="wrapperfour">
    2. <legend>Popular</legend>
    3. <div id="servicetext">
    4.  
    5.   <div id="loader"></div>  
    6.  
    7. </div>
    8. </div>
    Und dann noch loaddata3.php;

    Code (text):
    1. <?php  
    2.  $test = "http://192.168.178.61/PHPversion/"; // mal gucken
    3. $idx = 0;  
    4.    
    5. $start = $_POST["start"];
    6. $count = $_POST["count"];
    7. $count2 = $count + 1;
    8.  
    9.  
    10. try {
    11. $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    12. $sql = "SELECT bildtabelle.path, adressen.benutzername, adressen.vorname, adressen.profilbild, bildtabelle.timestamp, adressen.id FROM `bildtabelle`, `adressen` WHERE adressen.id = bildtabelle.user_id ORDER BY timestamp DESC LIMIT $start, $count2";
    13.  $ergebnis = $db->query($sql);
    14.     $countread = 0;
    15. foreach ($ergebnis as $row) {
    16.     echo "<div class='rahmen'>
    17.         <img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><a href=User_Seite.php?user=".$row['id']." style:'font-weight: normal; data-user='".$row['id']."''><p style='color: black; float: left; margin-left: 37px; position: absolute; font-weight: normal'>".$row['benutzername']."</p></a><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
    18.         <ul class='bildermenu2'>
    19.         <li>
    20.         <div class='gallery'>
    21.             <img class='bild' data-idx='".$idx."' id='img".$idx."' src='".$test.$row['path']."' data-relurl='".$row['path']."'>
    22.         </div>
    23.         <div class='aufnahme'>
    24. <div class='effekt'></div>
    25. <div class='aufnahmetext'>
    26.     <i id='i' class='fa fa-star-half-o fa-2x' aria-hidden='true' style='float: left; margin-left: 100px;'></i>
    27.     <i id='i' class='fa fa-comment fa-2x' aria-hidden='true' style='float: right; margin-right: 100px;'></i>
    28. </div>
    29. </div>
    30. </li>
    31. </ul>
    32.     </div>";
    33.      $idx++;
    34.         $countread++;
    35. }  
    36. if ($countread < $count2) {
    37.         echo '<span class="end"></span>';
    38.     }
    39. } catch (PDOException $e) {
    40.   echo 'Fehler: ' . htmlspecialchars($e->getMessage());
    41. }
    42. ?>
     
  8. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Was sagt denn das console.log() im success-Callback?