Chargez plus de contenu avec ajax lorsque vous cliquez sur plus de lien dans une vue

15

J'ai une vue de bloc personnalisée. J'affiche les 5 derniers titres de nœuds. Si quelqu'un clique sur le lien plus, je veux charger les 5 titres suivants sous les 5 titres de nœuds actuels. Pas de rafraîchissement de page et pas de téléavertisseur. Est-ce possible? Comment pourrais-je procéder?

Lucy
la source
Je n'ai pas de solution mais voici quelques liens qui pourraient vous aider. Drupal Datasource et Drupal & Ajax , mettent à jour dynamiquement un affichage drupal. qui génère des vues au format JSON. Ce tutoriel Lullabot montre comment utiliser jQuery dans Drupal. Vous pouvez regarder le code de téléchargement pour savoir par exemple comment l'implémenter si vous ne voulez pas acheter la vidéo.
Adam S
Le défilement infini de vues pour Drupal 8 n'a besoin d'aucune bibliothèque externe, ne demande que le contenu dont il a besoin, prend en charge les filtres exposés et peut fonctionner automatiquement ou en appuyant sur un bouton.
Sam152

Réponses:

26

C'est donc l'un de ces problèmes que plusieurs personnes dans le monde drupal ont essayé de résoudre.

J'ai récemment fait une présentation sur ce même problème et comment l'accomplir avec Drupal. Malheureusement, je n'ai jamais posté aucune de mes diapositives où que le reste du monde puisse voir.

Voici la répartition des modules:

Vues Infinite Scroll

  • Ne fonctionne pas avec la prise en charge de Views Ajax - Il est piraté pour créer sa propre demande ajax
  • Fait une demande de page complète - C'est parce qu'il n'utilise pas la demande Views Ajax
  • Nécessite Views 3.x - C'est un plus, car le pager est enfichable dans 3.x

Vues Infinite Pager

  • Support Views 2.x - Ce n'est vraiment pas une bonne chose, car le pager n'est pas enfichable
  • Parce qu'il fonctionne avec 2.x, il pirate vraiment le thème du pageur, les vues régulières ajax et le comportement de prétraitement. Cela brise donc certaines fonctionnalités.

Et le dernier mais non le moindre est un nouveau projet dans lequel je viens d'ajouter à la lumière de cette question. La raison du projet est mon besoin d'avoir également besoin de vues qui prennent en charge plus de charge, sauf les problèmes mentionnés ci-dessus, nous ne sommes pas acceptables pour mon projet.

Vues charger Plus

  • Nécessite Views 3.x - C'est exprès.
  • Le support affiche les options de pager habituelles, telles que les décalages, le nombre de pages
  • Prise en charge complète de la fonction d'ajax des vues
    • Si Ajax est activé sur la vue, le chargement de plus ajoutera du contenu au bas de la liste
    • Si ajax est désactivé, la page s'actualisera et remplacera l'ancien contenu par le nouveau contenu
    • Il ne fait pas de demande de page complète lors du rappel ajax, il laisse les vues faire un rappel naturel et au lieu de remplacer le contenu qu'il y ajoute.
  • Si vous utilisez le module waypoint, la vue peut être configurée pour obtenir automatiquement un nouveau contenu lorsque l'utilisateur fait défiler vers le bas de la page.
  • Prend en charge les effets JQuery (pour le moment, seul l'effet de fondu est pris en charge, plus bientôt à venir).

J'espère que ça répond à ta question. Ceci est mon avis "impartial" ;-) sur toutes les vues charger plus de module.

ericduran
la source
Je suis allé avec Views Infinite Pager car nous sommes sur les vues 2. Va essayer de faire passer notre projet aux vues 3.
Lucy
J'ai apporté quelques modifications à la réponse afin de refléter les nouvelles fonctionnalités ajoutées à views_load_more et également de supprimer toute référence au projet sandbox car il s'agit désormais d'un projet entièrement pris en charge sur drupal.org
ericduran
Laissé un commentaire re: VIS en D8 sur le fil de question ^
Sam152
2

Une autre méthode utilisant https://github.com/paulirish/infinite-scroll dans Drupal est de transformer n'importe quel pager Drupal en un autopager - pager à défilement infini - charger plus de pager .

Étape 1

Téléchargez jquery.infinitescroll.min.js depuis https://github.com/paulirish/infinite-scroll et placez-le dans /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Étape 2

Ajoutez le fichier JavaScript au fichier .info de votre thème.

Étape 3

Créez un fichier JavaScript personnalisé /sites/all/themes/YOURTHEME/js/YOURTHEME.js contenant le code suivant.

/**
 * 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'
        }
      })
    })
  });
}

Étape 4

Ajoutez le CSS du chargeur de défilement infini

#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;
}

Étape 5

Assurez-vous que la version jquery est plus récente que 1.7.1. Utilisez l'une des méthodes décrites dans http://drupal.org/node/1058168 pour installer une version plus récente de jQuery dans Drupal.

Hans Rossel
la source
1

Je ne peux pas ajouter de commentaire sur la première réponse. Mais vous devez ajouter le nouveau module: https://www.drupal.org/project/gd_infinite_scroll Ce module vous permet de transformer n'importe quel contenu et pager en un défilement infini ou en charger plus de pager.

Depuis la page du module:

Fournir une administration pour utiliser le plugin jQuery à défilement infini: pageur automatique sur les pages personnalisées à l'aide de pager. Vous pouvez utiliser le chargement automatique sur défilement ou un bouton de chargement supplémentaire.

vincent
la source