ビューで他のリンクをクリックすると、Ajaxでより多くのコンテンツをロードします

カスタムブロックビューがあります。最後の5つのノードタイトルを表示します。誰かがmoreリンクをクリックした場合、現在の5つのノードタイトルの下にある次の5つのタイトルをロードします。ページの更新なし、ページャーなし。これは可能ですか？これをどうやってやるの？

これは、drupalの世界の複数の人々が解決しようとした問題の1つです。

最近、このまったく同じ問題と、drupalでそれを達成する方法についてプレゼンテーションを行いました。悲しいことに、私は自分のスライドを世界のどこでも見ることができる場所に投稿したことがありません。

モジュールの内訳は次のとおりです。

ビュー無限スクロール

• Views Ajaxサポートでは機能しません-独自のajaxリクエストを作成するためにハックします
• フルページリクエストを行う-これは、Views Ajaxリクエストを使用しないためです
• ビュー3.xが必要-これはプラスです。ページャーは3.xでプラグインできるためです。

無限ページャー

• ビュー2.xのサポート-ページャーはプラグインできないため、これは本当に良いことではありません
• 2.xで動作するため、ページャーテーマ、通常のビューのajax、および前処理の動作を実際にハックします。そのため、一部の機能が破損します。

そして最後になりましたが、この質問に照らして追加したばかりの新しいプロジェクトです。プロジェクトの理由は、上記の問題を除き、ロードをサポートするビューも必要とするためです。上記の問題は、私のプロジェクトでは受け入れられません。

ビューがもっと読み込む

• Views 3.xが必要-これは意図的なものです。
• オフセット、ページ数などの通常のページャーオプションの表示をサポート
• ビューのajax機能を完全にサポート
  • ビューでAjaxが有効になっている場合、さらにロードするとリストの下部にコンテンツが追加されます
  • ajaxが無効の場合、ページは更新され、古いコンテンツが新しいコンテンツに置き換えられます
  • これは、ajaxコールバックを実行するときにページ全体のリクエストを実行するのではなく、ビューに自然なコールバックを実行させ、追加するコンテンツを置き換えるのではありません。
• ウェイポイントモジュールを使用している場合、ユーザーがページの一番下までスクロールすると、新しいコンテンツを自動的に取得するようにビューを構成できます。
• JQueryエフェクトをサポートします（現在、フェードエフェクトのみがサポートされており、近日中にサポートされます）。

これがあなたの質問に答えることを願っています。これは私の「偏りのない」です;-)すべてのビューについての意見はより多くのモジュールをロードします。

Drupalでhttps://github.com/paulirish/infinite-scrollを使用する別の方法は、Drupalページャーをオートページャーに変換することです-無限スクロールページャー-さらにページャーをロードします。

ステップ1

https://github.com/paulirish/infinite-scrollからjquery.infinitescroll.min.jsをダウンロードし、/ 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より新しいことを確認してください。Drupalに新しいバージョンのjQueryをインストールするために、http：//drupal.org/node/1058168で説明されている方法のいずれかを使用します。

最初の回答にコメントを追加できません。ただし、新しいモジュールhttps://www.drupal.org/project/gd_infinite_scrollを追加する必要があります。 このモジュールを使用すると、コンテンツとページャーを無限スクロールに変換したり、ページャーをさらにロードしたりできます。

モジュールのページから：

無限スクロールjQueryプラグインを使用するための管理を提供します。ページャーを使用してカスタムページで自動ページャーを作成します。スクロールまたは自動読み込みボタンで自動読み込みを使用できます。