किसी दृश्य में अधिक लिंक पर क्लिक करते समय ajax के साथ अधिक सामग्री लोड करें


15

मेरे पास एक कस्टम ब्लॉक दृश्य है। मैं अंतिम 5 नोड शीर्षक प्रदर्शित करता हूं। यदि कोई अधिक लिंक क्लिक करता है तो मैं अगले 5 शीर्षक को वर्तमान 5 नोड शीर्षक के नीचे लोड करना चाहता हूं। कोई पृष्ठ ताज़ा नहीं है और पेजर नहीं है। क्या यह संभव है? मैं ऐसा कैसे कर पाऊंगा?


मेरे पास कोई हल नहीं है लेकिन यहां कुछ लिंक दिए गए हैं जो मदद कर सकते हैं। Drupal Datasource और Drupal & Ajax , गतिशील रूप से एक ड्रुपल डिस्प्ले को अपडेट करते हैं। जो JSON के रूप में विचारों को आउटपुट करता है। यह लोलाबोट ट्यूटोरियल दिखाता है कि ड्रुपल में jQuery का उपयोग कैसे करें। यदि आप वीडियो नहीं खरीदना चाहते हैं तो इसे कैसे लागू किया जाए, उदाहरण के लिए आप डाउनलोड कोड देख सकते हैं।
एडम एस

Drupal 8 के लिए अनंत स्क्रॉल के लिए किसी भी बाहरी पुस्तकालय की आवश्यकता नहीं है, केवल उस सामग्री की मांग करता है, जिसमें उजागर फिल्टर का समर्थन है और स्वचालित रूप से या एक बटन के पुश के साथ काम कर सकता है।
सैम 152

जवाबों:


26

तो यह उन समस्याओं में से एक है जिसे ड्रुपल दुनिया के कई लोगों ने हल करने की कोशिश की है।

मैंने हाल ही में इसी सटीक मुद्दे पर एक प्रस्तुति दी और इसे ड्रुपल के साथ कैसे पूरा किया जाए। अफसोस की बात है कि मैंने अपनी किसी भी स्लाइड को कहीं भी पोस्ट नहीं किया जहां बाकी दुनिया देख सकती है।

यहाँ मॉड्यूल का ब्रेक डाउन है:

दृश्य अनंत स्क्रॉल

  • दृश्य अजाक्स समर्थन के साथ काम नहीं करता है - इसे बनाने के लिए इसके आस-पास हैक होता है, यह स्वयं का अजाक्स अनुरोध है
  • एक पूर्ण पृष्ठ अनुरोध बनाता है - यह इसलिए है क्योंकि यह दृश्य Ajax अनुरोध का उपयोग नहीं करता है
  • व्यूज़ 3.x की आवश्यकता है - यह एक प्लस है, क्योंकि पेजर 3.x में प्लग-इन है

दृश्य अनंत पेजर

  • समर्थन दृश्य 2.x - यह वास्तव में एक अच्छी बात नहीं है, क्योंकि पेजर प्लग-सक्षम नहीं है
  • क्योंकि यह 2.x के साथ काम करता है, यह वास्तव में पेजर थीम के आसपास हैक करता है, नियमित दृश्य एजाक्स, और प्रीप्रोसेसिंग व्यवहार। तो यह कुछ कार्यक्षमता को तोड़ता है।

और आखिरी लेकिन कम से कम एक नई परियोजना नहीं है जिसमें मैंने इस प्रश्न के प्रकाश में जोड़ा। परियोजना का कारण मेरी जरूरतों के लिए उन विचारों की भी आवश्यकता है जो ऊपर दिए गए मुद्दों को छोड़कर लोड का समर्थन करते हैं, हम अपनी परियोजना के लिए स्वीकार्य नहीं हैं।

दृश्य अधिक लोड

  • विचार 3.x की आवश्यकता है - यह उद्देश्य पर है।
  • समर्थन नियमित पेजर विकल्पों को देखता है, जैसे कि ऑफ़सेट, पेज काउंट
  • पूरी तरह से विचार अजाक्स सुविधा का समर्थन करता है
    • यदि अजाक्स दृश्य पर सक्षम है, तो लोड अधिक सूची के निचले भाग में सामग्री जोड़ देगा
    • यदि AJAX निष्क्रिय है तो पृष्ठ ताज़ा होगा और पुरानी सामग्री को नई सामग्री से बदल देगा
    • यह एक पूर्ण पृष्ठ अनुरोध नहीं करता है जब अजाक्स कॉलबैक कर रहा है, यह विचारों को प्राकृतिक कॉलबैक करने की अनुमति देता है और इसके बजाय यह उस सामग्री को प्रतिस्थापित करता है जो इसे जोड़ता है।
  • यदि आप वेपॉइंट मॉड्यूल का उपयोग कर रहे हैं तो उपयोगकर्ता को पृष्ठ के निचले भाग में स्क्रॉल करने पर नई सामग्री प्राप्त करने के लिए स्वचालित रूप से कॉन्फ़िगर किया जा सकता है।
  • JQuery के प्रभाव का समर्थन करता है (अभी केवल फीका प्रभाव का समर्थन किया गया है, और जल्द ही आने के लिए)।

उम्मीद है कि यह आपके प्रश्न का उत्तर देगा। यह मेरा "निष्पक्ष" है;; सभी विचारों पर राय अधिक मॉड्यूल लोड करती है।


साथ दृश्य अनंत पेजर चला गया के रूप में हम विचारों 2. कोशिश करते हैं और विचारों 3. अप करने के लिए स्थानांतरित करने के लिए हमारी परियोजना मिलेगी पर हैं
लुसी

मैंने view_load_more में जोड़े गए नए फीचर्स को प्रतिबिंबित करने के लिए उत्तर के लिए कुछ बदलाव किए और सैंडबॉक्स प्रोजेक्ट के सभी संदर्भों को भी हटा दिया क्योंकि यह अब drupal.org पर पूरी तरह से समर्थित परियोजना है
ericduran

एक टिप्पणी फिर से छोड़ दें: प्रश्न थ्रेड पर D8 में विज़ ^ ^
सैम 152

2

Drupal में https://github.com/paulirish/infinite-scroll का उपयोग करने का एक अन्य तरीका किसी भी Drupal पेजर को एक ऑटोपेगर में ट्रांसफॉर्म करना है - अनंत स्क्रॉल पेजर - अधिक पेजर लोड करें

चरण 1

Https://quithub.com/paulirish/infinite-scroll से jquery.infinitescroll.min.js डाउनलोड करें और इसे /sites/all/themes/YOURTHEME/js/js.in.infinitescroll.min.js में डालें।

चरण 2

अपनी थीम के .info फ़ाइल में जावास्क्रिप्ट फ़ाइल जोड़ें।

चरण 3

निम्नलिखित कोड वाले एक कस्टम जावास्क्रिप्ट फ़ाइल /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

अनंत स्क्रॉल लोडर का सीएसएस जोड़ें

#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 से नया है। Drupal में jQuery के नए संस्करण को स्थापित करने के लिए http://drupal.org/node/1058168 में वर्णित विधियों में से एक का उपयोग करें ।


1

मैं पहले उत्तर पर टिप्पणी नहीं जोड़ सकता। लेकिन आपको नया मॉड्यूल जोड़ना चाहिए: https://www.drupal.org/project/gd_infinite_scroll यह मॉड्यूल किसी भी सामग्री को बदलने और एक अनंत स्क्रॉल या पेजर अधिक लोड पेजर करने देता है।

मॉड्यूल के पृष्ठ से:

अनंत स्क्रॉल jQuery प्लगइन का उपयोग करने के लिए एक प्रशासन प्रदान करें: पेजर का उपयोग करके कस्टम पृष्ठों पर ऑटो-पेजर। आप स्क्रॉल या लोड अधिक बटन पर ऑटोलॉड का उपयोग कर सकते हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.