|
 |
|
PHP ใช้ Ajax แสดงข้อมูลแต่ไม่เลื่อนลงไปจุดที่แสดงครับ |
|
 |
|
|
 |
 |
|
ตอนแรกผมแสดงข้อมูลประเภทสินค้าด้วย Ajax เป็นแบบนี้ครับ ซึ่งเมื่อคลิกที่ link นี้มันจะเลื่อนลงไปข้างล่างที่ข้อมูลแสดงผลครับ
Code
<a href=\"#product-container\" class=\"category-group-item\" id=\"catname-$id\">
แต่ผมไปอ่าน google การทำ seo จาก ajax จากเว็บนี้ครับ https://developers.google.com/webmasters/ajax-crawling/docs/getting-started จึงคิดว่าต้องเปลี่ยนรูปแบบ link ใหม่โดยแก้ href เป็นแบบนี้ครับ
Code
<a href=\"#!$name\"
ซึ่งมันแสดงข้อมูลได้ปกติ แต่เมื่อคลิก link มันไม่เลื่อนลงมาที่ข้อมูลแสดงอยู่ด้านล่างครับ มันเปลี่ยนรายละเอียดอย่างเดียวต้องเลื่อนลงไปดูเอง อยากทราบว่าต้องแก้ยังไงครับ
ไฟล์ javascript แบบนี้ครับ
Code
function listProductAjax(n,catId){
$("#product-container").empty().append('<div align="center"><br><img src="images/loader.gif" id="category-loading"><br><br></div>');
$.ajax({
url:'include/listProductWithAjax.php',
data:{page:n,c:catId},
type:'get',
success:function(data){
setTimeout(function(){
$("#product-container").empty().append(data).fadeIn(1000);
$("#category-container").show();
listPagingLinkAjax(n,catId);
}, 500);
}
});
}
ไฟล์ /listProductWithAjax.php แสดง link แบบนี้ครับ
Code
<a href=\"#!$pd_name\" id=\"product-$pd_id\" class=\"show-detail-product\">
หน้า index
Code
</div>
<div id="product-container"> <!-- แสดงสินค้า -->
</div>
Tag : PHP, Ajax, jQuery, Bootstrap Framework

|
ประวัติการแก้ไข 2017-07-29 03:09:12 2017-07-29 03:10:53
|
 |
 |
 |
 |
Date :
2017-07-29 03:07:39 |
By :
mmc01 |
View :
967 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
animate function
Code (JavaScript)
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
|
 |
 |
 |
 |
Date :
2020-07-30 12:24:21 |
By :
PhrayaDev |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 04
|