גלילה אינסופית – הסימפוניה הבלתי נגמרת

גלילה אינסופית היא אחד הטרנדים החמים ביותר של השנים האחרונות. כל מי שגולש בפייסבוק, פינסטר, גוגל פלוס כבר מכיר את העקרון. במקום להשתמש בפאג'ינציה (לחיצה על לינק לדף הבא) , ברגע שאנחנו גוללים מטה, תוכן חדש נטען עבורינו.זה נעשה בעזרת אג'קס. אז בואו נתחיל.

 

רוב הפעמים התכנים נטענים מבסיס נתונים ולכן הדבר הראשון שנעשה הוא להתקשר לבסיס הנתונים. ניצור קובץ להתקשרות עם בסיס הנתונים ונכליל אותו בדף:

try {
	$conn = new PDO("mysql:host=localhost;dbname=infinitescroll","","");
	
} catch (Exception $e) {
	die("Error " . $e->getMessage());
}

כמובן שצריך לתת שם משתמש וסיסמה שלכם.

השלב הבא: צריך לכתוב שאילתא שתיקח רק את התוכן ההתחלתי. במקרה זה אני לוקח רק שתי תוצאות ראשונות:

//make a query to show only the first 2 comments and show it on page
$getthefirstresults = $conn->query("SELECT * FROM comments ORDER BY id LIMIT 0,2");

עכשיו אנחנו צריכים לדעת מהו המספר הכולל של התוכן בבסיס הנתונים, כי לפיו נוכל לדעת מתי לייצר קריאת אג'קס להביא את סט הנתונים הבא:

//get the total amount
$gettotal = $conn->query("SELECT * FROM comments");
$total = $gettotal->rowCount();

עכשיו אנחנו יכולים להציג את שתי התוצאות הראשוניות שלנו. שימו לב שאת משתנה המספר הטוטאלי של הנתונים אני מציג בID של אלמנט בדף, כדי שנוכל להעבירו בקריאת האג'קס:

<div  class="row">
<ul id="thecomments" class="<?php echo $total; ?>">
<?php

foreach ($getthefirstresults as $key => $value) {?>
		<li>
		<div id="1" class="comment-wrapper">
			<span class="comauth"><?php echo $value['comment_author']; ?></span>
			<p>
				<?php echo $value['comment']; ?>
			</p>
		</div>
	</li>
	<hr>
	<?php
}
?>


</ul>


</div>

וזה מה שיש לנו בינתיים:

שתי התוצאות הראשונות
שתי התוצאות הראשונות

עכשיו אנחנו מגיעים לרעיון עצמו. צריך לזהות מתי הגולש מגיע לתחתית הדף, ואז ליצור קריאת אג'קס שתציג את שתי התוצאות הבאות. בנוסף נוסיף אינדיקציה ויזואלית לכך ומשהו נטען, כך שהגולש יבין מה קורה:

	var iterator = 0;
	var total =$("#thecomments").attr("class");
	//alert(total);
	$(window).scroll(function(){
		if ($(window).scrollTop() == $(document).height() - $(window).height()) {
			//alert("got to bottom");

			iterator++;
			if (iterator*2 > total) {
				$('#loader').prepend("<p class=' center-text' >no more content !!</p>");
			}else{
				$.ajax({
					type: "POST",
			        //dataType: 'json',
			        url: "getnext.php",
			        data: { 
			        	iterator : iterator
			        },  
			        success: function(data){
			            $("#thecomments").append(data);
			            $("#thecomments li").fadeIn( "slow" );
			        },
			            beforeSend: function () {
			            $("#loader").css({"display": "block"}); 
			            $('#loader').prepend("<p class='loadit center-text' ></p>");
			        },
			        complete: function () {
			        	$("#loader").css({"display": "none"}); 
			           $("p.loadit").fadeOut();
			       }
			   });

			}

		};
	});

יש כמה דברים שצריך לשים לב אליהם:

אחד, יש לנו משתנה של המספר הטוטאלי של תכנים.

שתיים,אנחנו שולחים משתנה לקובץ הphp שבעזרתו נחשב את הכמות הבאה שתחזור.

שלוש,משפט ההתניה מזהה היכן בדיוק הגלילה של הגולש,וזה אומר לנו מתי הגולש הגיע לתחתית הדף.

לאחר שנחזיר תוצאות לקריאת האג'קס, אנחנו פשוט מציגים אותם בדף, ותוך כדי הקריאה אנחנו יוצרים אינדיקציה ויזואלית שצריך לחכות.

עתה לקוד הphp:

require_once 'conn.php';
$iterator = $_POST['iterator']*2;
//var_dump($iterator);


//make a query to show the next 2 comments
$getthenextresults = $conn->query("SELECT * FROM comments ORDER BY id LIMIT $iterator,2");
//var_dump($getthenextresults);

foreach ($getthenextresults as $key => $value) {
	?>
	<li>
		<div id="<?php echo $value['id'] ?>" class="comment-wrapper">
			<span class="comauth"><?php echo $value['comment_author'] ?></span>
			<p>
				<?php echo $value['comment'] ?>
			</p>
		</div>
	</li>	
	<hr>
	<?php
}

הקוד כאן מאד פשוט. לוקחים את משתנה האיטרייטור, ומכפילים בשתיים. כך נדע מאיזה מספר הלאה לבקש בשאילתא מבסיס הנתונים.

לאחר מכן, אנחנו יוצרים שאילתא לבסיס הנתונים ומבקשים את שתי התוצאות הבאות. את מה שחוזר אנחנו מציגים בhtml ומחזירים לקריאת האגקס.

כך זה נראה בקריאה ובתוספת התוצאות:

אינדיקציה ויזואלית לקריאת האג'קס

שתי התוצאות הבאות

וזהו. עתה בכל פעם שהגולש מגיע לתחתית הדף, הוא יקבל את שתי התוצאות הבאות.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *