โหลดข้อมูลแบบไม่ต้องกดหน้าถัดไป

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา โหลดข้อมูลแบบไม่ต้องกดหน้าถัดไป

โหลดข้อมูลแบบไม่ต้องกดหน้าถัดไป

สวัสดีครับ

ช่วยหาวิธีแบบเว็บนี้ให้หน่อยครับ http://www.bangqok.com/dir/Beauty

การทำงานจะโหลดเนื้อหามาตามที่กำหนด หรือเต็มหน้าจอ

พอเลื่อนสกอบาร์ลง จะโหลดเนื้อหามาเพิ่ม

เห็นแวบๆ ในเว้บนี้ก็มี เวลา search จะโหลดรายการที่พบประมาณหนึ่ง ถ้าจะดูต่อคลิก More แล้วก็จะโหลดข้อมูลมาเพิ่ม 
 

Admin ช่วยแนะนำด้วยนะครับ

(พิมพ์ซะยาว ตั้งกระทู้ไม่ได้รอบแรก..)



Tawanc2005 180.183.88.xxx 23-04-2013 17:12:13

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

 ดูเนื้อหาตามนี้ แล้วนำไปประยุกต์ดู

https://www.ninenik.com/content.php?arti_id=442



Ninenik Narkdee 171.7.85.xxx 24-04-2013
 ความคิดเห็นที่ 2

 

<?php
if(isset($_GET["load_sample"])){
	echo "<hr>";
	for($i=1;$i<=20;$i++){
		echo "<div>".$i."</div>";
	}
	exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>load data when scroll bottom</title>
<style type="text/css">
html,body{
	background-color:#CCC;
	padding:0px;
	margin:0px;	
}
div.main_test{
	position:relative;
	background-color:#EAE1EA;
	margin:auto;
	width:800px;	
}
</style>
</head>

<body>

<div class="main_test">
<?php for($i=1;$i<50;$i++){?>
<div><?=$i?></div>
<?php } ?>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){

    // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ  	 
	$(window).scroll(function(){
		// 	เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล
		// ถ้าเท่ากับ ความสูงของเนื้อหาหรือความสูงของเพจนั้นๆ หรือก็คือเมื่อเลื่อนมาตำแหน่งล่างสุด
	   if($(window).scrollTop() + $(window).height() == $(document).height()){
		   // ในที่นี้ทดสอบการดึงข้อมูลด้วย get อย่างง่าย
		   $.get("load_data_when_scroll.php",{load_sample:1},function(data){
			   // นำข้อมูลที่ได้ไปแสดงต่อท้าย ภายใน div id เท่ากับ main_test
		   		$(".main_test").append(data);			   
		   });

	   }
	});	 
	
	
	
});
</script>

load_data_when_scroll.php
</body>
</html>

load_data_when_scroll.php คือไฟล์อะไรครับ.. งง

 



tawanc2005 110.78.149.xxx 24-04-2013 14:17
 ความคิดเห็นที่ 3

load_data_when_scroll.php   ชื่อไฟล์โค้ดตัวอย่างทั้งหมด

ลืมลบออก 555



Ninenik Narkdee 171.7.85.xxx 24-04-2013
 ความคิดเห็นที่ 4

 Error



tawanc2005 110.77.214.xxx 04-05-2013 15:48
 ความคิดเห็นที่ 5

 // ในที่นี้ทดสอบการดึงข้อมูลด้วย get อย่างง่าย

 // $.get("load_data_when_scroll.php",{load_sample:3},function(data){

  $.get("scroll1.php",{load_sample:3},function(data){

  //$.get("scroll1.php",{load_sample:<?=$more_page?>},function(data){

  // นำข้อมูลที่ได้ไปแสดงต่อท้าย ภายใน div id เท่ากับ main_test

  $(".main_test").append(data);   

  });

 

$.get("load_data_when_scroll.php",{load_sample:1},function(data){

 

load_sample:1 ผมอยากให้มันเพิ่มค่าไปเลื่อยๆ เช่น load_sample:1 พอโหลดครั้งต่อไป load_sample:2 >> load_sample:3

ผมต้องทำยังไงครับ

ใน if(isset($_GET["load_sample"])){ ผมก็เอาค่ามา + กันแล้วเอาค่าไปใส่ก็ยังไม่ได้

ผมพยายามเอามาประยุคใช้ดึงจากฐานข้อมมูลแล้วมันก็จะโหลดแต่ข้อมูลซ้ำๆ ขึ้นมา เพราะค่า  load_sample:1 มันเพิ่มไม่ได้ 2 วันแล้วหาทางยังไม่ได้ช่วยแนะนำหน่อยครับ   ขอบคุณครับ



tawanc2005 110.77.214.xxx 04-05-2013 15:50
 ความคิดเห็นที่ 6
แจ้ง Error 


tawanc2005 110.77.214.xxx 04-05-2013 15:54
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ