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:
Und loaddata.php:
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):
loaddata.php:
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:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="robots" content="index,follow">
<title>Datensätze beim scrollen nachladen</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function loadNextData()
{
var userID=$(".block:last").attr("id");
$('div#loader').html('<img src="images/loader.gif">');
$.post("loaddata.php?lid="+userID,
function(data)
{
if (data != "")
{
$(".block:last").after(data);
}
$('div#loader').empty();
});
};
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
loadNextData();
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<?php include('loaddata.php'); ?>
<div id="loader"></div>
</div>
</body>
</html>Und loaddata.php:
Code:
<?php
include("Zugang.php");
if(isset($_GET['lid']))
{
$lid = $_GET['lid'];
$lim = 5; //Anzuzeigende Datensätze beim scrollen
}
else
{
$lid = 0;
$lim = 5;//Anzuzeigende Datensätze beim Start
}
if($lid==0) $abfrage = ""; else $abfrage = " WHERE id > ".$lid;
$q_data = mysql_query("SELECT id, path AS username
FROM bildtabelle ".$abfrage." ORDER BY id ASC LIMIT ".$lim);
while($r_data = mysql_fetch_array($q_data))
{
$userido = $r_data['id'];
var_dump($userido);
if($r_data['username']!=' ') $username = $r_data['username']; else $username = 'unbekannt';
?>
<div id="<?php echo $userido; ?>" class="block" ><?php echo "<b>".$userido."</b> ".$username; ?></div>
<?php
}
?>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:
<script type="text/javascript">
$(document).ready(function()
{
function loadNextData()
{
var userID=$(".rahmen:last").attr("id");
$('div#loader').html('<img src="okö.gif">');
$.post("loaddata.php?lid="+userID,
function(data)
{
if (data != "")
{
$(".rahmen:last").after(data);
}
$('div#loader').empty();
});
};
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
loadNextData();
}
});
});
</script>
<div id="wrapperfour">
<legend>Popular</legend>
<div id="servicetext">
<?php include('loaddata.php'); ?>
<div id="loader"></div>
</div>
</div>loaddata.php:
Code:
<?php
$test = "http://192.168.178.61/PHPversion/"; // mal gucken
$idx = 0;
if(isset($_GET['lid']))
{
$lid = $_GET['lid'];
$lim = 5; //Anzuzeigende Datensätze beim scrollen
}
else
{
$lid = 0;
$lim = 5;//Anzuzeigende Datensätze beim Start
}
if($lid==0) $abfrage = ""; else $abfrage = " AND id > ".$lid;
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
$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;
foreach ($pdo->query($sql) as $row) {
echo "<div class='rahmen'>
<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>
<ul class='bildermenu2'>
<li>
<div class='gallery' id='".$row['ideo']."'>
<img class='bild' data-idx='".$idx."' id='img".$idx."' src='".$test.$row['path']."' data-relurl='".$row['path']."'>
</div>
<div class='aufnahme'>
<div class='effekt'></div>
<div class='aufnahmetext'>
<i id='i' class='fa fa-star-half-o fa-2x' aria-hidden='true' style='float: left; margin-left: 100px;'></i>
<i id='i' class='fa fa-comment fa-2x' aria-hidden='true' style='float: right; margin-right: 100px;'></i>
</div>
</div>
</li>
</ul>
</div>";
$idx++;
}
?>
Vielen Dank für die Unterstützung und Hilfe !