web-dev-qa-db-fra.com

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

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?

views6ajax
15
Lucy

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.

Les vues chargent 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 du nouveau contenu lorsque l'utilisateur fait défiler vers le bas de la page.
  • Prend en charge les effets JQuery (actuellement, 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.

26
ericduran

Une autre méthode utilisant https://github.com/paulirish/infinite-scroll in Drupal is Transform any Drupal pager dans 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.

2
Hans Rossel

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 chargeant plus de pager.

Depuis la page du module:

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

1
vincent