Events nachladen statt Paginierung

Ich habe eine lange Eventliste, die mit Paginierung ausgegeben wird, z.B. 10 Events pro Seite. Durch Klick auf einen Link in der Paginierung wird ja die Seite neu geladen und es werden 10 andere Events angezeigt.

Besser wäre es für mich jedoch, wenn man anstelle der Paginierung ein Button "mehr laden" hätte, der die jeweils 10 nächsten Events nachläd, ohne dass die komplete Seite neu geladen werden muss. Wenn man also den Button unter den ersten 10 Events klickt, werden darunter die nächsten 10 Events angezeigt (insgesamt dann 20 Events), dann nach Klick 30 Events usw. Ohne dass die komplette Seite neu geladen wird. Das ist vor allem auch in der Ansicht auf dem Smartphone besser und intuitiver als eine Paginierung. Geht in die Richtung "Infinite Scroll", aber eben nicht automatisch, sondern manuell ausgelöst.

Kann mir jemand einen Tipp geben, wie ich das umsetzen kann? Hat das schon jemand umgesetzt? Habe keine Erweiterung oder Anleitung dafür gefunden.

Danke!

JavaScript bzw. poor man's AJAX Request ;). Soll heißen:

1. Du gestaltest die Paginierung per Template Änderung und/oder CSS und/oder JavaScript so um, sodass nur mehr der Button für die nächste Seite angezeigt wird und alle anderen Bedienelemente nicht mehr sichtbar sind.
2. Per JavaScript machst du einen click listener auf den Button für die nächste Seite und machst einen AJAX Request auf die im Button angegebene URL.
3. Du selektierst dir aus dem HTML Response die Event Einträge und fügst sie in die bestehende Event Liste hinzu.
4. Du aktualisiert die URL des Buttons mit der URL aus dem Button aus dem AJAX Response.

Den AJAX Response kannst du mit https://github.com/fritzmg/contao-ajax-layout ein klein wenig effizienter gestalten.

Beispiel: https://www.intomedia.at/de/magazin.html

Hallo, genau das möchte ich so umsetzen, wie auf dieser Beispielseite.

Mit klick auf "MEHR" sollen darunter die weiteren News erscheinen. Punkt 1 hab ich umgesetzt. Auch das Modul installiert, aber jetzt scheitet es ab Punkt 2. Kannst du mir das bitte genauer erklären?

ggf. kommst Du mit dem https://github.com/richardhj/contao-...#ajax-calendar auch gut zurrecht...

Ich hab es mal bis auf einen Punkt so gemacht.

Ich versteht diesen Satz nicht ganz: Add this to the cal_default.html5 template and add the CSS classes .calendar__next and .calendar__prev to the next and previous month links.

Ich hab den Code in "news_short.html5" eingebaut, denn dort brauch ich es ja und die CSS Klassen umbenannt: .blog__next and .blog__prev

Wo aber bitte bau ich jetzt die CSS-Klassen ein?

wie sieht Dein Template von news_short.html5 aus?

Zur Zeit so:

Code:

---

<script>
    $(".blog__next, .blog__prev").click(function (event) {
        var element;
        //Get url of next Month
        var $url = window.location.origin + '/' + $(this).attr('href');
        // Don't follow the link
        event.preventDefault();
        // This is the elements div container like ".mod_my_module". "Allow ajax reload" has to be ticket for this element in the backend
        element = $(this).closest('[class^="ce_"],[class^="mod_"]');
        // Add a css class to this element. An overlay and spinning icon can be set via css
        element.addClass('ajax-reload-element-overlay');
       
        $.ajax({
            method: 'POST',
            url: $url,
            data: {
                // The data- attribute is set automatically
                ajax_reload_element: element.attr('data-ajax-reload-element')
            }
        })
            .done(function (response, status, xhr) {
                if ('ok' === response.status) {
                    // Replace the DOM
                    element.replaceWith(response.html);
                } else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });
</script>
<div class="layout_short arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">

  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->parseDate("d.", $this->timestamp) ?><br><?= $this->parseDate("M.", $this->timestamp) ?><br><?= $this->parseDate("Y", $this->timestamp) ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
  <?php endif; ?>

  <h2 itemprop="name"><?= $this->linkHeadline ?></h2>

  <div class="ce_text block" itemprop="description">
    <?= \Contao\StringUtil::substrHtml($this->teaser, 150) ?>
  </div>

  <?php if ($this->hasText || $this->hasTeaser): ?>
    <p class="more"><?= $this->more ?></p>
  <?php endif; ?>
 
  <?php if ($this->addImage): ?>
        <?php $this->insert('image', $this->arrData); ?>
  <?php endif; ?>
</div>

---

Es gibt auch noch das Modul mod_newslist.html5 dazu. Darin ist dann die Pagination eingebunden

Zitat:

---

Zitat von m-werk

Es gibt auch noch das Modul mod_newslist.html5 dazu. Darin ist dann die Pagination eingebunden

---

=> dort müssen wir hin... poste mal was da drinnen steht

Code:

---

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?php if (empty($this->articles)): ?>
    <p class="empty"><?= $this->empty ?></p>
  <?php else: ?>
    <?= implode('', $this->articles) ?>
    <?= $this->pagination ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

---

Da wird auch nur "pagination.html5" eingebunden. Ich kann doch nicht dieses script in "pagination.html5" einbinden, dann würde es bei jeder pagination, die ich verwende, dies eingebunden sein.

Ne andere Frage: was ist, wenn ich das Script in mod_newslist.html5 einbaue und anstelle von <?= $this->pagination ?> den Code der pagination.html5 (bzw. nur einen Teil davon) einbaue?

Zitat:

---

Zitat von m-werk

Code:

---

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?php if (empty($this->articles)): ?>
    <p class="empty"><?= $this->empty ?></p>
  <?php else: ?>
    <?= implode('', $this->articles) ?>
    <?= $this->pagination ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

---

Da wird auch nur "pagination.html5" eingebunden. Ich kann doch nicht dieses script in "pagination.html5" einbinden, dann würde es bei jeder pagination, die ich verwende, dies eingebunden sein.

Ne andere Frage: was ist, wenn ich das Script in mod_newslist.html5 einbaue und anstelle von <?= $this->pagination ?> den Code der pagination.html5 (bzw. nur einen Teil davon) einbaue?

---

Schade, dass die Paginierung nicht mit einem Template aufgerufen wird - ich würde mal ein dump auf $this machen und gucken, was alles so geliefert wird und die Paginierung selbst einbauen - bei den Links muss dann eine CSS-Klasse rein, auf die das Script für den onClick-Event reagieren kann... btw: die Scriptsachen unterhalb der Templateangaben einfügen

Nun sieht mein Code so aus, aber immer wenn ich auf "weiter..." klicke, kommt die Startseite. Er geht immer zurück auf die Startseite. Irgendwie wird das <a> nicht richtig erkannt, dass es hier noch eine weitere Seite gibt.

Code:

---

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?php if (empty($this->articles)): ?>
    <p class="empty"><?= $this->empty ?></p>
  <?php else: ?>
    <?= implode('', $this->articles) ?>
    <ul>
                <li class="blog__next"><a href="<?= $this->next['href'] ?>" class="blog__next" title="weiter...">weiter...</a></li>
        </ul>
  <?php endif; ?>

<?php $this->endblock(); ?>

<script>
    $(".blog__next").click(function (event) {
        var element;
        //Get url of next Month
        var $url = window.location.origin + '/' + $(this).attr('href');
        // Don't follow the link
        event.preventDefault();
        // This is the elements div container like ".mod_my_module". "Allow ajax reload" has to be ticket for this element in the backend
        element = $(this).closest('[class^="ce_"],[class^="mod_"]');
        // Add a css class to this element. An overlay and spinning icon can be set via css
        element.addClass('ajax-reload-element-overlay');
       
        $.ajax({
            method: 'POST',
            url: $url,
            data: {
                // The data- attribute is set automatically
                ajax_reload_element: element.attr('data-ajax-reload-element')
            }
        })
            .done(function (response, status, xhr) {
                if ('ok' === response.status) {
                    // Replace the DOM
                    element.replaceWith(response.html);
                } else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });
</script>

---

PHP-Code:

---

<li class="next"><a href="<?= $this->next['href'] ?>" class="blog__next" title="weiter...">weiter...</a></li>

---

Da hat sich ja nur das <i class="next" .... geändert. Leider funktioniert das weiterhin noch nicht :-(

PHP-Code:

---

$(".blog__next").click(function (event) {... 


---

zündet beim ersten Element mit "blog__next" - das li hat kein href ;-)

gibts ne Seite zum Ansehen?

Debug mal das JS und setze einen Haltepunkt

ja, es ist aktuell noch ne testseite:

LINK

Ich hab die original Pagination auch noch zusätzlich eingebaut

view-source:https://www.absolutsauber.at/blog.html suche mal nach blog__next ... wo ist das JS?

href ist auch leer!

btw: während der Entwicklung die HTML-Komprimierung abstellen - alle Einrückungen sind weg :(

Zitat:

---

btw: während der Entwicklung die HTML-Komprimierung abstellen - alle Einrückungen sind weg

---

Das kann ich jetzt nicht. Die Homepage ist schon online. Nur der BLOG-Bereich ist noch nicht ersichtlich im Menü.

Ich hab es auch schon gemerkt, dass das JS nicht ersichtlich ist. Ich versteh nur nicht, warum? Ich hab das Template, wie oben gepostet, online.

PHP-Code:

---

<?php $this->endblock(); ?>

---

muss ganz ans Ende!

Zitat:

---

Zitat von m-werk

Das kann ich jetzt nicht. Die Homepage ist schon online.

---

Das würde ja keine große Rolle spielen.

Ok, die Komprimierungen sind OFF.

PHP-Code:

---

 <?php $this->endblock(); ?>

---

hab ich nun auch am Ende.

Aber jetzt geht's ja mal daran, dass das <a href befüllt wird.

So, ich müsste jetzt irgendwie an die werte der pagination herankommen, dann könnte ich den link nachbauen.

Zu Testzwecken habe ich mal mein <li> wie folgt befüllt:

HTML-Code:

---

        <li class="next"><a href="blog.html?page_n9=2" class="blog__next" title="weiter...">weiter...</a></li>

---

Der Link funktioniert, aber das Nachladen funktioniert nicht so wie gewollt. Ich möchte nicht Weiterblättern, sondern dass die newsliste bei weiter... um die Anzahl, die im Modul eingetragen ist, erweitert wird. Im Modul hab ich Ajax aktiviert, aber es tut sich nichts

So, nun hab ich auch einen Fehler gefunden, und zwar hat das jetzt mit AXAX mit dem installierten Modul zu tun. Firefox sagt folgendes:

Zitat:

---

Die Ressource von "https://www.absolutsauber.at/bundles/richardhjcontaoajaxreloadelement/jquery.ajax-reload-form.js" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff).
Laden fehlgeschlagen für das <script> mit der Quelle "https://www.absolutsauber.at/bundles/richardhjcontaoajaxreloadelement/jquery.ajax-reload-form.js".
Uncaught TypeError: $(...).ajaxReloadForm is not a function
<anonymous> https://www.absolutsauber.at/blog.html:392
<anonymous> https://www.absolutsauber.at/blog.html:393

Code:

---

<script src="bundles/richardhjcontaoajaxreloadelement/jquery.ajax-reload-form.js"></script>
<script>
    $(function () {
        $(document).ajaxReloadForm({});
    }(jQuery));
</script>

---

---

In Firefox ist .ajaxReloadForm im Code rot unterstrichen!

Weiters hab ich bemerkt, dass im Ordner "bundle" dieser Ordner, welcher hier genannt wird, inkl. der JS-Datei gar nicht existiert.

Ich hab dies jetzt mal manuell angelegt und auch die Datei dann in diesen Ordner. Jetzt kommt die Fehlermeldung NICHT mehr, aber es funktioniert auch nicht so wie gewollt. Es tut sich nichts

ich sehe nur ein Error vom mmenu und die zwei fehlenden Icons...

ansonsten tut das Script m. E. was es soll und kommt bei

PHP-Code:

---

element.replaceWith(response.html); 


---

an

So, nun hab ich den Original-Zustand wieder hergestellt und den Ordner entfernt, welcher von mir angelegt wurde. Wie gesagt, im Ordner "bundle" fehlt der Ordner "richardhjcontaoajaxreloadelement". Daher kann auch die jquery.ajax-reload-form.js nicht gefunden werden.

Bitte, jetzt nochmals testen, denn jetzt hab ich den Originalen Zustand wieder hergestellt!

Zitat:

---

Zitat von m-werk

So, nun hab ich den Original-Zustand wieder hergestellt und den Ordner entfernt, welcher von mir angelegt wurde. Wie gesagt, im Ordner "bundle" fehlt der Ordner "richardhjcontaoajaxreloadelement". Daher kann auch die jquery.ajax-reload-form.js nicht gefunden werden.

Bitte, jetzt nochmals testen, denn jetzt hab ich den Originalen Zustand wieder hergestellt!

---

ist die Installtion sauber durchgelaufen?

ggf. Ticket bei Richard machen

wenn die Datei da ist, hats wie gesagt m.E. funktioniert

Ja, die installation ist sauber durchgelaufen. Ich verwende Contao 4.11.2 hab aber ein downgrade von symfony auf die version ^4.4.* gemacht. Leider komm ich nicht mehr auf die 4.10.x zurück. Da kommt immer eine Fehlermeldung. Vielleicht liegts an der 4.11er Version?

Auch als ich die Datei dort hineinkopiert hatte, hat es bei mir nicht funktioniert. Die Seite wurde nicht nachgeladen, sondern geblättert. (wie eben bei einer pagination).

Weiters hab ich das Problem noch, dass ich mit dem Link nicht zusammenkomme. Ich weiß nicht wo ich den Wert hernemen soll, dass der link auch immer hochzählt (wie bei der Pagination)

Zitat:

---

Zitat von m-werk

A) Ja, die installation ist sauber durchgelaufen. Ich verwende Contao 4.11.2 hab aber ein downgrade von symfony auf die version ^4.4.* gemacht. Leider komm ich nicht mehr auf die 4.10.x zurück. Da kommt immer eine Fehlermeldung. Vielleicht liegts an der 4.11er Version?

B) Auch als ich die Datei dort hineinkopiert hatte, hat es bei mir nicht funktioniert. Die Seite wurde nicht nachgeladen, sondern geblättert. (wie eben bei einer pagination).

C) Weiters hab ich das Problem noch, dass ich mit dem Link nicht zusammenkomme. Ich weiß nicht wo ich den Wert hernemen soll, dass der link auch immer hochzählt (wie bei der Pagination)

---

A: mach mal Ticket oder Frag auf Slack

B: das JS lief bei mir in den richtigen Zweig

C: was steht in "$this" - da mal ein dump machen und reingucken ob was brauchbares dabei

Also bei pagination steht folgendes:

HTML-Code:

---

^ """
<!-- indexer::stop -->

<nav class="pagination block" aria-label="Seitenumbruch-Menü">

  <p>Seite 1 von 4</p>

  <ul>

                  <li><strong class="active">1</strong></li>
                        <li><a href="blog.html?page_n9=2" class="link" title="Gehe zu Seite 2">2</a></li>
                        <li><a href="blog.html?page_n9=3" class="link" title="Gehe zu Seite 3">3</a></li>
                        <li><a href="blog.html?page_n9=4" class="link" title="Gehe zu Seite 4">4</a></li>

          <li class="next"><a href="blog.html?page_n9=2" class="next" title="Gehe zu Seite 2">Vorwärts</a></li>

          <li class="last"><a href="blog.html?page_n9=4" class="last" title="Gehe zu Seite 4">Ende</a></li>

      </ul>

</nav>

<!-- indexer::continue -->
"""

---

hmm... wenn es ansonsten nicht woanders die Infos gibt zu der Artikel-ID wäre ein Workaround den GET-Parameter "page_n9" abzufragen und +1 / -1 zu zählen - den max. Wert kann man ggf. aus count($this->articles) ermitteln

So, nun hab ich es geschaft, auf die 4.10er Version downzugraden.

Jetzt wurde auch im Ordner "bundle" der Ordner mit der js-Datei angelegt. keine Fehlermeldung mehr. ABER wenn ich auf weiter... klicke, kommt zwar der 2. Newseintrag, aber der 1. verschwindet. Es soll aber nachgeladen werden, so dass dann immer einer dazukommt, wenn ich auf weiter klicke. Die anderen sollen dann weiterhin ersichtlich bleiben

Zitat:

---

Zitat von m-werk

A) So, nun hab ich es geschaft, auf die 4.10er Version downzugraden.

Jetzt wurde auch im Ordner "bundle" der Ordner mit der js-Datei angelegt. keine Fehlermeldung mehr.

B) ABER wenn ich auf weiter... klicke, kommt zwar der 2. Newseintrag, aber der 1. verschwindet. Es soll aber nachgeladen werden, so dass dann immer einer dazukommt, wenn ich auf weiter klicke. Die anderen sollen dann weiterhin ersichtlich bleiben

---

A) bitte Bug-Ticket zu C 4.11 bei Richard machen!

B) dafür ist die Erweiterung nicht gemacht - sollte aber nicht so schwierig sein, das im JS anzupassen... kannst ja ein FR-Ticket machen und ggf. gleich das Sponsoring übernehmen

Ich möchte es genau so, wie hier im 2 Beitrag das Beispiel: https://www.intomedia.at/de/magazin.html

Auch mit dem Layout!

Zitat:

---

Zitat von m-werk

Ich möchte es genau so, wie hier im 2 Beitrag das Beispiel: https://www.intomedia.at/de/magazin.html

Auch mit dem Layout!

---

... dann mach das so - oder lass machen