একটি ভিউতে আরও লিঙ্ক ক্লিক করার সময় এজ্যাক্স সহ আরও সামগ্রী লোড করুন


15

আমার একটি কাস্টম ব্লক ভিউ আছে। আমি সর্বশেষ 5 নোড শিরোনাম প্রদর্শিত। যদি কেউ আরও লিঙ্ক ক্লিক করে থাকে তবে আমি বর্তমান 5 নোড শিরোনামের নীচে পরবর্তী 5 টি শিরোনাম লোড করতে চাই। কোনও পৃষ্ঠা রিফ্রেশ এবং পেজার নয়। এটা কি সম্ভব? আমি কীভাবে এটি করতে যাব?


আমার কাছে কোনও সমাধান নেই তবে এখানে কয়েকটি লিঙ্ক রয়েছে যা আপনাকে সাহায্য করতে পারে। ড্রুপাল ডেটাসোর্স এবং ড্রুপাল অ্যান্ড অ্যাজাক্স , গতিশীলভাবে একটি ড্রুপাল ডিসপ্লে আপডেট করে। যা জেএসএন হিসাবে দেখায়। এই লুলাবোট টিউটোরিয়ালটি দেখায় যে কীভাবে দ্রুপালতে jQuery ব্যবহার করতে হয়। আপনি ভিডিওটি কিনতে না চাইলে কীভাবে এটি প্রয়োগ করতে হয় তার উদাহরণস্বরূপ আপনি ডাউনলোড কোডটি দেখতে পারেন।
অ্যাডাম এস

দ্রুপাল 8-এর জন্য দর্শনের অসীম স্ক্রোলটির কোনও বাহ্যিক গ্রন্থাগার প্রয়োজন নেই, কেবল এটির প্রয়োজনীয় সামগ্রীর জন্য অনুরোধ করা হয়েছে, এক্সপোজড ফিল্টারগুলির জন্য সমর্থন রয়েছে এবং এটি স্বয়ংক্রিয়ভাবে বা বোতামের চাপ দিয়ে কাজ করতে পারে।
Sam152

উত্তর:


26

সুতরাং এটি সেই সমস্যাগুলির মধ্যে একটি যা দ্রুপাল বিশ্বের একাধিক মানুষ সমাধান করার চেষ্টা করেছেন।

আমি সম্প্রতি এই ঠিক একই ইস্যুতে এবং কীভাবে এটি দ্রুপাল দিয়ে সম্পন্ন করতে হবে তার একটি উপস্থাপনা দিয়েছি। দুঃখজনকভাবে আমি আমার স্লাইডগুলির কোনও আর কোথাও পোস্ট করি নি যেখানে বিশ্বের অন্যান্য অংশগুলি দেখতে পারে।

এখানে মডিউলগুলির ব্রেক ডাউন:

অসীম স্ক্রোল দেখুন

  • ভিউজ অ্যাজাক্স সমর্থন দিয়ে কাজ করে না - এটির চারপাশে হ্যাক করা নিজস্ব এজ্যাক্স অনুরোধ
  • একটি পূর্ণ পৃষ্ঠার অনুরোধ করে - এটি ভিজ অ্যাজাক্স অনুরোধটি ব্যবহার করে না কারণ এটি
  • ভিউজ 3.x প্রয়োজন - এটি একটি প্লাস, কারণ পেজারটি 3.x এ প্লাগ-সক্ষম

অসীম পেজার দেখুন

  • সমর্থন ভিউজ ২.x - এটি সত্যই ভাল জিনিস নয়, কারণ পেজারটি প্লাগ-সক্ষম নয়
  • কারণ এটি ২.x এর সাথে কাজ করে এটি পেজার থিম, নিয়মিত ভিউ এজ্যাক্স এবং প্রিপ্রোসেসিং আচরণের চারপাশে হ্যাক করে। সুতরাং এটি কিছু কার্যকারিতা ভঙ্গ করে।

এবং সর্বশেষে তবে কোনও নতুন প্রকল্প নয় যা আমি এই প্রশ্নের আলোকে কেবল যুক্ত করেছি added এই প্রকল্পের কারণ হিসাবে আমার উপরের বিষয়গুলি উল্লেখ করা ছাড়া আমরা আমাদের প্রকল্পের জন্য গ্রহণযোগ্য নই except

ভিউ লোড আরও

  • 3.x ভিউ প্রয়োজন - এটি উদ্দেশ্য ভিত্তিতে।
  • সমর্থনগুলি নিয়মিত পেজার বিকল্পগুলি যেমন অফসেট, পৃষ্ঠা গণনা দেখে
  • অ্যাজাক্স বৈশিষ্ট্যটি সম্পূর্ণরূপে সমর্থন করে
    • যদি অ্যাজাক্স দৃশ্যে সক্ষম করা থাকে তবে লোড আরও কিছু তালিকার নীচে সামগ্রী যুক্ত করবে
    • যদি অজ্যাক্স অক্ষম করা হয় তবে পৃষ্ঠাটি রিফ্রেশ করে নতুন সামগ্রী সহ পুরানো সামগ্রীকে প্রতিস্থাপন করবে
    • এটি এজাক্স কলব্যাক করার সময় একটি পূর্ণ পৃষ্ঠার অনুরোধ করে না, এটি দৃশ্যকে প্রাকৃতিক কলব্যাক দেয় এবং পরিবর্তিত সামগ্রীর পরিবর্তে এটি এতে যুক্ত করে।
  • আপনি যদি ওয়েপপয়েন্ট মডিউলটি ব্যবহার করছেন তবে ব্যবহারকারী যখন পৃষ্ঠার নীচে স্ক্রোল করবেন তখন স্বয়ংক্রিয়ভাবে নতুন সামগ্রী পেতে ভিউটি কনফিগার করা যেতে পারে।
  • JQuery প্রভাব সমর্থন করে (এখনই কেবল বিবর্ণ প্রভাবটি সমর্থিত হবে, আরও শীঘ্রই আসবে)।

আশা করি এটি আপনার প্রশ্নের উত্তর দেয়। এটি আমার "নিরপেক্ষ" ;-) সমস্ত মতামত লোড করে আরও মডিউল সম্পর্কে মতামত।


আমরা ভিউতে থাকাকালীন দেখি অসীম পেজারের সাথে গিয়েছিলাম ২. আমাদের প্রকল্পটি ভিউ-তে উঠতে চেষ্টা করবে এবং 3
লুসি

আমি ভিউ_লোড_মোরের সাথে যুক্ত হওয়া নতুন বৈশিষ্ট্যগুলি প্রতিফলিত করতে এবং স্যান্ডবক্স প্রকল্পের সমস্ত রেফারেন্স সরিয়ে দেওয়ার জন্য উত্তরে আমি কিছু পরিবর্তন করেছি কারণ এটি এখন
দ্রুপাল.আর.জে

একটি মন্তব্য
রেখে গেছেন:

2

দ্রুপালের https://github.com/paulirish/infinite-scrol ব্যবহার করে অন্য একটি পদ্ধতি হ'ল যে কোনও দ্রুপাল পেজারকে একটি অটোপ্যাজারে রূপান্তর করা - অসীম স্ক্রোল পেজার - আরও পেজার লোড করুন

ধাপ 1

Jquery.infinitescrol.min.js https://github.com/paulirish/infinite-scroll থেকে ডাউনলোড করুন এবং এটিকে /sites/all/themes/YOURTHEME/js/jquery.infinitescrol.min.js এ রাখুন।

ধাপ ২

আপনার থিমের .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

অসীম স্ক্রোল লোডার এর 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 এর চেয়ে নতুন। দ্রুপালে jQuery এর নতুন সংস্করণ ইনস্টল করার জন্য http://drupal.org/node/1058168 এ বর্ণিত একটি পদ্ধতি ব্যবহার করুন ।


1

আমি প্রথম উত্তরের উপর কোনও মন্তব্য যুক্ত করতে পারি না। তবে আপনার নতুন মডিউলটি যুক্ত করা উচিত: https://www.drupal.org/project/gd_infinite_scrol এই মডিউলটি আপনাকে যে কোনও বিষয়বস্তু এবং পেজারকে একটি অসীম স্ক্রোল বা আরও বেশি পেজারে লোড করতে দেয়।

মডিউল পৃষ্ঠা থেকে:

অসীম স্ক্রোল jQuery প্লাগইন ব্যবহার করার জন্য প্রশাসন সরবরাহ করুন: পেজার ব্যবহার করে কাস্টম পৃষ্ঠাগুলিতে অটো-পেজার। আপনি স্ক্রোল বা একটি লোড আরও বোতামে অটোলোড ব্যবহার করতে পারেন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.