โหลดเนื้อหาเพิ่มเติมด้วย ajax เมื่อคลิกลิงค์เพิ่มเติมในมุมมอง

ฉันมีมุมมองบล็อกที่กำหนดเอง ฉันแสดงชื่อโหนด 5 รายการล่าสุด หากมีคนคลิกลิงค์เพิ่มเติมฉันต้องการโหลด 5 หัวเรื่องถัดไปภายใต้ชื่อโหนด 5 ปัจจุบัน ไม่มีการรีเฟรชหน้าและไม่ใช่เพจเจอร์ เป็นไปได้ไหม ฉันจะทำสิ่งนี้อย่างไร

ดังนั้นนี่คือหนึ่งในปัญหาที่หลายคนในโลก drupal พยายามแก้ไข

ฉันเพิ่งได้นำเสนอเกี่ยวกับปัญหาเดียวกันนี้และวิธีการทำให้สำเร็จด้วย drupal น่าเศร้าที่ฉันไม่เคยโพสต์สไลด์ใด ๆ ที่ใดก็ได้ในโลกที่เหลือ

นี่คือการแยกส่วนของโมดูล:

มุมมองไม่มีที่สิ้นสุดเลื่อน

• ไม่ทำงานกับการรองรับ Views Ajax - แฮ็กเพื่อให้เป็นคำขอ ajax ของตัวเอง
• ทำให้คำขอเต็มหน้า - นี่เป็นเพราะมันไม่ได้ใช้คำขอ Views Ajax
• ต้องใช้มุมมอง 3.x - นี่คือข้อดีเนื่องจากเพจเจอร์มีปลั๊กอินใน 3.x

เพจเจอร์ที่ไม่มีที่สิ้นสุด

• มุมมองการสนับสนุน 2.x - นี่ไม่ใช่สิ่งที่ดีเพราะเพจเจอร์ไม่สามารถใช้ปลั๊กอินได้
• เพราะมันใช้งานได้กับ 2.x มันแฮ็กรอบ ๆ ธีมเพจเจอร์มุมมองปกติ ajax และพฤติกรรมการประมวลผลล่วงหน้า ดังนั้นจึงแบ่งการทำงานบางอย่าง

และสุดท้าย แต่ไม่ท้ายสุดคือโครงการใหม่ที่ฉันเพิ่งเพิ่มเข้าไปในคำถามนี้ เหตุผลสำหรับโครงการคือความต้องการของฉันสำหรับมุมมองที่ต้องรองรับการโหลดมากขึ้นยกเว้นปัญหาที่กล่าวถึงข้างต้นเราไม่ยอมรับโครงการของฉัน

ชมโหลดเพิ่มเติม

• ต้องการมุมมอง 3.x - นี่คือวัตถุประสงค์
• สนับสนุนการดูตัวเลือกเพจเจอร์ปกติเช่นออฟเซ็ตจำนวนหน้า
• รองรับคุณสมบัติ ajax views อย่างสมบูรณ์
  • หากเปิดใช้งาน Ajax ในมุมมองการโหลดเพิ่มเติมจะเพิ่มเนื้อหาไว้ที่ด้านล่างของรายการ
  • หาก ajax ถูกปิดใช้งานหน้าจะรีเฟรชและแทนที่เนื้อหาเก่าด้วยเนื้อหาใหม่
  • มันไม่ได้ทำการร้องขอแบบเต็มหน้าเมื่อทำการโทรกลับ ajax มันช่วยให้การดูทำได้โดยการโทรกลับอย่างเป็นธรรมชาติและแทนที่การแทนที่เนื้อหาที่ผนวกเข้ากับมัน
• หากคุณใช้โมดูลwaypointคุณสามารถกำหนดค่ามุมมองเพื่อรับเนื้อหาใหม่โดยอัตโนมัติเมื่อผู้ใช้เลื่อนไปที่ด้านล่างของหน้า
• รองรับเอฟเฟกต์ JQuery (ตอนนี้รองรับเฉพาะเฟดเอฟเฟ็กต์ที่กำลังจะมาเร็ว ๆ นี้)

หวังว่านี่จะตอบคำถามของคุณ นี่คือความเห็น "ไม่ลำเอียง" ;-) ของฉันในทุกมุมมองโหลดโมดูลมากขึ้น

อีกวิธีหนึ่งที่ใช้https://github.com/paulirish/infinite-scrollใน Drupal เป็นแปลงใด ๆ เพจเจอร์ Drupal เป็น autopager - อนันต์เลื่อนเพจเจอร์ - โหลดเพจเจอร์มากขึ้น

ขั้นตอนที่ 1

ดาวน์โหลด jquery.infinitescroll.min.js จากhttps://github.com/paulirish/infinite-scrollและใส่ไว้ใน /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js

ขั้นตอนที่ 2

เพิ่มไฟล์ JavaScript ลงในไฟล์. info ของธีมของคุณ

ขั้นตอนที่ 3

สร้างไฟล์ JavaScript ที่กำหนดเอง /sites/all/themes/YOURTHEME/js/YOURTHEME.js ที่มีรหัสต่อไปนี้

/**
 * Implementation of autopager @see https://github.com/paulirish/infinite-scroll
 * All views that have the "autopager" class will have an autopager
 */
Drupal.behaviors.viewsInfiniteScroll = function(context) {
  $(function(){
    var $container = $('div.autopager div.view-content');    
    $container.imagesLoaded( function(){
      $container.infinitescroll({
        navSelector  : 'div.autopager .pager',    // selector for the paged navigation
        nextSelector : 'div.autopager .pager-next a',  // selector for the NEXT link (to page 2)
        itemSelector : 'div.autopager .views-row',     // selector for all items you'll retrieve
        loading: {
          finishedMsg: 'No more pages to load.',
          img: '/sites/all/themes/YOURTHEME/images/loading.gif'
        }
      })
    })
  });
}

ขั้นตอนที่ 4

เพิ่ม CSS ของโหลดเดอร์เลื่อนที่ไม่มีที่สิ้นสุด

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 300px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

ขั้นตอนที่ 5

ตรวจสอบว่ารุ่น jquery เป็นรุ่นใหม่กว่า 1.7.1 ใช้วิธีใดวิธีหนึ่งที่อธิบายไว้ในhttp://drupal.org/node/1058168สำหรับการติดตั้ง jQuery รุ่นใหม่ใน Drupal

ฉันไม่สามารถเพิ่มความคิดเห็นในคำตอบแรก แต่คุณควรเพิ่มโมดูลใหม่: https://www.drupal.org/project/gd_infinite_scroll โมดูลนี้ให้คุณแปลงเนื้อหาและวิทยุติดตามตัวใด ๆ ไปยังการเลื่อนที่ไม่มีที่สิ้นสุดหรือโหลดเพจเจอร์เพิ่มเติม

จากหน้าของโมดูล:

จัดเตรียมการจัดการเพื่อใช้ปลั๊กอิน jQuery scroll infinite: auto-pager บนเพจที่กำหนดเองโดยใช้เพจเจอร์ คุณสามารถใช้ autoload ในการเลื่อนหรือปุ่มโหลดเพิ่มเติม