|
|
|
การดึงข้อมูล ของเนื้อหาใน Div ต้องการให้มันเลื่ิิอนขึ้นลงได้ ลองเข้ามาอ่านรายละเอียดก่อนครับ |
|
|
|
|
|
|
|
ผมทำ chat web app ครับ
คือตอนนีี้มันดึงมาทุก 500 ms มันเกิดปัญหาที่ว่ามันไม่สามารถเลื่อนดูข้อความเก่าๆได้ และมันทำงานช้ามาก เวลามีคนใช้หลายๆคนพร้อมกัน
แนวคิดผมคือผมจะให้มันตรวจดู ID ล่าสุดที่บันทึก ว่ามากกว่า ตอนที่ดึงข้อมูลมาหรือไม่ ถ้ามากกว่าก็ให้โหลด funcion JS setInterval("loadOldMessages()", 500); ถ้าเท่าเดิมก็ไม่ต้องทำคงหน้าเดิมเอาไว้ แต่ผมไม่รู้จะเขียนยังไงครับ
นี่เป็น code ที่ใช้ดึงข้อมูลครับ
Code
$(document).on("ready", function(){
registerMessages();
$.ajaxSetup({"cache":false});
setInterval("loadOldMessages()", 500);
});
var registerMessages = function(){
$("#send").on("click",function(e){
// Check null
if(document.formChat.message.value == "")
{
alert('Please enter you Message!');
document.formChat.message.focus();
return false;
}
e.preventDefault();
var frm = $("#formChat").serialize();
// console.log(frm);
$.ajax({
type: "POST",
url: "update.php",
data: frm
}).done(function( info ){
$("#message").val("");
// var altura = $("#conversation").prop("scrollHeight");
// $("#conversation").scrollTop(altura);
// // console.log(info);
})
});
}
var loadOldMessages = function(){
$.ajax({
type: "POST",
url: "conversation.php"
}).done(function( info ){
$("#conversation").html( info );
$("#conversation p:last-child").css({"padding": "5px 0 5px 5px"});
var altura = $("#conversation").prop("scrollHeight");
$("#conversation").scrollTop(altura);
});
}
});
ตัว update.php บันทึกลง DB
Code
$strSQL = "INSERT INTO haanee_messages (messages, dateTime, roomsID, ip, userID) VALUES ('".$message."', '".$date."', '".$room_id."', '".$IP."', '".$UserID."')";
$objQuery = mysqli_query($conn,$strSQL);
if($objQuery){
// echo "Save Done.";
}else{
echo "Error Save [".$strSQL."]";
}
ตัว conversation.php ดึงข้อมูลมาแสดง ครับ
Tag : PHP, MySQL
|
|
|
|
|
|
Date :
2015-02-18 21:05:27 |
By :
Jumyut |
View :
901 |
Reply :
3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ใช้พวก div และ scrollbar ได้หรือเปล่าครับ
<!-- Scroll bar present but disabled -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
test
</div>
<!-- Scroll bar present and enabled -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
</div>
|
|
|
|
|
Date :
2015-02-19 17:21:34 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 02
|