codefog/news_categories - nach dem Filtern soll Seite "stehen" bleiben

Hallo,

folgender Seitenaufbau:

Code:

---

<div wrapper>
  <div page-header>
  <div container>
    <div main>

---

Im <div main> habe ich einen Kategorien-Filter und gleich darunter eine Newslist.
<div page-header> hat 100vh, sodass erst beim runterscrollen die Filter-buttons sichtbar werden.
Verwende ich nun den Filter und die Seite lädt neu, dann rutscht die Seite wieder hinauf und <div page-heder> ist wieder im sichtbaren Bereich. Nun muss man erst wieder runter scrollen, damit man zum gefilterten Ergebnis kommt.

Wie kann ich das "Raufscrollen" verhindern? Sprich, dass die Seite trotz neuem Laden dort stehen bleibt wo man sich gerade befindet?
Hier wäre ich bereits dankbar, wenn mir jemand die richtigen Suchbegriffe für Freund Google mitteilen könnte, oder links zur Thematik geben könnte.

vielen Dank schon mal

Naja, entweder speicherst du dir die Scroll Position und stellst sie dann wieder her - oder du verwendest AJAX.

mmh - aber die Seite "reloaded" ja eigentlich nicht wirklich, sondern es wird ein komplett neuer Link erzeugt, somit befinde ich mich ja auf einer "andere Webseite".

aus
meinedomain.at
wird
meinedomain.at/index/category/fotografie

Ja schon klar. Das ändert nichts an der Antwort :D. Bei AJAX könnte dir richardhj/contao-ajax_reload_element helfen.

AJAX ... hierzu habe ich die Erweiterung, die du angeführt hast installiert.
Die Einrichtung dürfte geklappt haben, da die Seite auch reagiert, aber leider nicht so, wie es sein sollte.

ich fasse meine Konstellation zusammen:

Code:

---

<mod_newscategories>
  <ul>
    <li>
      <a class="nav-link">

<mod_newslist>
  <div>

---

Die mod_newscategories beinhaltet die Liste der Kategorien.
In der <mod_newslist> stehen die teaser mit Bild und 'weiterlesen'.

• Häkchen AJAX zulassen ist gesetzt
• j_cat-ajaxreload.html5 ist im Layout eingebunden und hat folgenden Inhalt

Code:

---

<script>
    $(".mod_newscategories a.nav-link").click(function (event) {
        var element;
       
        // 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: location.href,
            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>

---

Und was passiert nach Klick:
• die Seite bleibt auf der Scrollposition stehen ... soll sie auch
• die Seite wird nicht auf den erstellen Filter-link weiter geleitet
• ohne link nun auch keine Filterung ... soll nicht sein


ABer eigentlich sollte ja 'mod_newslist' ersetzt werden ... aber der click-event erfolgt auf 'mod_newscategories'
Aus dieser Überlegung raus habe ich noch diese Zeile abgeändert:

Code:

---

element = $(this).css('mod_newslist');

---

Mit dem Ergebnis, dass sich bei Klick gar nichts tut

Habe ich etwas vergessen/übersehen?

Ich muss nun dies doch nochmals hochholen.

Nachdem die Recherchen über AJAX und vielen Stunden der Umsetzung gescheitert sind, hatte ich mich an zwei weitere Lösungsversuche (eigene Elemente über RSCE) herangetastet, die aber auch schlussendlich wegen weiterer auftretender Probleme verworfen wurden.

Nun bin ich bei der Variante gelandet: Scroll-Position abfragen und ausgeben - doch auch hier scheitere ich.
Angelehnt an gefühlt unendlichen Blogeinträgen ergab sich dieses Konstrukt für die Abfrage (ich glaube, das war sogar mal ein Eintrag aus dem Contao-Forum ^^):

PHP-Code:

---

<script>
jQuery(document).ready(function() {
    if (localStorage) {
        var posReader = localStorage["posStorage"];
        if (posReader) {
            jQuery(window).scrollTop(posReader);
            localStorage.removeItem("posStorage");
        }
        jQuery("#refresh").find("li").click(function() {    
            localStorage["posStorage"] = jQuery(window).scrollTop();
        });
    }
});    
</script> 


---

welches ich in den 'Eigener JavaScript-Code' im Layout platziert habe.
das HTML dazu

PHP-Code:

---

<div id="refresh" class="mod_newscategories container-fluid block">
   <ul class="level_1 nav">
      <li class="reset even first nav-item">
         <a class="nav-link" href="" itemprop="url" title="Zeigt Nachrichten aus allen Kategorien"><span itemprop="name">Alle Kategorien</span></a>
      </li>
      <li class="news_category_2 category_2 fotografie odd nav-item">
         <a class="nav-link" href="index/category/fotografie" itemprop="url" title="Fotografie"><span itemprop="name">Fotografie</span></a>
      </li>
      <li class="news_category_5 category_5 videoproduktion active even nav-item">
         <strong class="active nav-link" itemprop="name" title="Videoproduktion">Videoproduktion</strong>
      </li>
      <li class="news_category_4 category_4 webdesign odd nav-item">
         <a class="nav-link" href="index/category/webdesign" itemprop="url" title="Webdesign"><span itemprop="name">Webdesign</span></a>
      </li>
      <li class="news_category_1 category_1 werbeagentur even nav-item">
         <a class="nav-link" href="index/category/werbeagentur" itemprop="url" title="Werbeagentur"><span itemprop="name">Werbeagentur</span></a>
      </li>
      <li class="news_category_3 category_3 werbung odd last nav-item">
         <a class="nav-link" href="index/category/werbung" itemprop="url" title="Werbung"><span itemprop="name">Werbung</span></a>
      </li>
   </ul>
</div> 


---

Bei Klick scrollt die Seite immer auf Anfang zurück und ich muss wieder runterscrollen ...

Gerne übergebe ich diese für mich nicht lösbare Aufgabe als 'bezahlten Kleinauftrag' weiter - bei Interesse, bitte ich um PN


Vielen Dank

Zitat:

---

Zitat von derRenner

AJAX ... hierzu habe ich die Erweiterung, die du angeführt hast installiert.
Die Einrichtung dürfte geklappt haben, da die Seite auch reagiert, aber leider nicht so, wie es sein sollte.

ich fasse meine Konstellation zusammen:

Code:

---

<mod_newscategories>
  <ul>
    <li>
      <a class="nav-link">

<mod_newslist>
  <div>

---

Die mod_newscategories beinhaltet die Liste der Kategorien.
In der <mod_newslist> stehen die teaser mit Bild und 'weiterlesen'.

• Häkchen AJAX zulassen ist gesetzt
• j_cat-ajaxreload.html5 ist im Layout eingebunden und hat folgenden Inhalt

Code:

---

<script>
    $(".mod_newscategories a.nav-link").click(function (event) {
        var element;
       
        // 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: location.href,
            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>

---

Und was passiert nach Klick:
• die Seite bleibt auf der Scrollposition stehen ... soll sie auch
• die Seite wird nicht auf den erstellen Filter-link weiter geleitet
• ohne link nun auch keine Filterung ... soll nicht sein


ABer eigentlich sollte ja 'mod_newslist' ersetzt werden ... aber der click-event erfolgt auf 'mod_newscategories'
Aus dieser Überlegung raus habe ich noch diese Zeile abgeändert:

Code:

---

element = $(this).css('mod_newslist');

---

Mit dem Ergebnis, dass sich bei Klick gar nichts tut

Habe ich etwas vergessen/übersehen?

---

Dein JavaScript wird vermutlich so nicht stimmen. Das Default Beispiel der Erweiterung geht ja davon aus, dass du innerhalb des Moduls, welches du per AJAX neu laden lassen möchtest, irgendeinen Button hast, mit dem das passieren soll.

Aber bei dir ist das ja anders: bei einem Klick auf den Kategorie Link des mod_newscategories Modul, soll das mod_newslist Modul neu geladen werden. Das musst du dann auch dementsprechend so umsetzen. Wahrscheinlich reicht es, wenn du

Code:

---

element = $(this).closest('[class^="ce_"],[class^="mod_"]');

---

mit

Code:

---

element = $('mod_newslist[data-ajax-reload-element]');

---

ersetzt (vorausgesetzt auf deiner Seite gibt es nur das eine Newslist Modul, wo du das AJAX reloading erlaubt hast).

Zitat:

---

Zitat von derRenner

Nun bin ich bei der Variante gelandet: Scroll-Position abfragen und ausgeben - doch auch hier scheitere ich.

---

Probier es doch einmal einfach mit einem Ankerlink.

aktuelles HTML nach Aktivierung AJAX

PHP-Code:

---



<div class="mod_article overview container first last block" id="article-1" data-ajax-reload-element="art::1">
   <div class="ce_bs_gridStart first row">
      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
         <!-- indexer::stop -->
         <div id="refresh" class="mod_newscategories container-fluid block">
            <ul class="level_1 nav">
               <li class="reset even first nav-item">
                  <a class="nav-link" href="" itemprop="url" title="Zeigt Nachrichten aus allen Kategorien"><span itemprop="name">Alle Kategorien</span></a>
               </li>
               <li class="news_category_2 category_2 fotografie odd nav-item">
                  <a class="nav-link" href="index/category/fotografie" itemprop="url" title="Fotografie"><span itemprop="name">Fotografie</span></a>
               </li>
               <li class="news_category_5 category_5 videoproduktion even nav-item">
                  <a class="nav-link" href="index/category/videoproduktion" itemprop="url" title="Videoproduktion"><span itemprop="name">Videoproduktion</span></a>
               </li>
               <li class="news_category_4 category_4 webdesign odd nav-item">
                  <a class="nav-link" href="index/category/webdesign" itemprop="url" title="Webdesign"><span itemprop="name">Webdesign</span></a>
               </li>
               <li class="news_category_1 category_1 werbeagentur even nav-item">
                  <a class="nav-link" href="index/category/werbeagentur" itemprop="url" title="Werbeagentur"><span itemprop="name">Werbeagentur</span></a>
               </li>
               <li class="news_category_3 category_3 werbung active odd last nav-item">
                  <strong class="active nav-link" itemprop="name" title="Werbung">Werbung</strong>
               </li>
            </ul>
         </div>
         <!-- indexer::continue -->    
      </div>
   </div>
   <div class="ce_bs_gridStart row">
      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
         <!-- indexer::stop -->
         <div class="mod_newslist container block">
            <div class="row">
               <div class="col-12 col-md-4 layout_latest arc_3 block  first even news_category_5 category_5 videoproduktion news_category_1 category_1 werbeagentur news_category_3 category_3 werbung" itemscope="" itemtype="http://schema.org/Article">
                  <figure class="image_container float_above">
                     <img class="img-fluid" src="files/layout/_company/namovie/logo_v04_ot_400x400.png" alt="Namovie Logo" title="Namovie e.U." itemprop="image" width="400" height="400">
                  </figure>
                  <h2 itemprop="name"><a href="namovie" title="Den Artikel lesen: Namovie e.U." itemprop="url">Namovie e.U.</a></h2>
                  <div class="ce_text block" itemprop="description">
                  </div>
                  <p class="more"><a href="namovie" title="Den Artikel lesen: Namovie e.U." itemprop="url">Weiterlesen …<span class="sr-only"> Namovie e.U.</span></a></p>
               </div>
               <div class="col-12 col-md-4 layout_latest arc_3 block  odd news_category_2 category_2 fotografie news_category_5 category_5 videoproduktion news_category_1 category_1 werbeagentur news_category_3 category_3 werbung" itemscope="" itemtype="http://schema.org/Article">
                  <figure class="image_container float_above">
                     <img class="img-fluid" src="files/layout/_company/fokuspunkt/Fokuspunkt_darkbackground.png" alt="Fokuspunkt Logo" title="Fokuspunkt" itemprop="image" width="1000" height="600">
                  </figure>
                  <h2 itemprop="name"><a href="fokuspunkt" title="Den Artikel lesen: Fokuspunkt" itemprop="url">Fokuspunkt</a></h2>
                  <div class="ce_text block" itemprop="description">
                  </div>
                  <p class="more"><a href="fokuspunkt" title="Den Artikel lesen: Fokuspunkt" itemprop="url">Weiterlesen …<span class="sr-only"> Fokuspunkt</span></a></p>
               </div>
               <div class="col-12 col-md-4 layout_latest arc_3 block  last even news_category_4 category_4 webdesign news_category_1 category_1 werbeagentur news_category_3 category_3 werbung" itemscope="" itemtype="http://schema.org/Article">
                  <figure class="image_container float_above">
                     <img class="img-fluid" src="files/layout/_company/beRecont/logo-3500x3500.png" alt="" itemprop="image" width="3500" height="3500">
                  </figure>
                  <h2 itemprop="name"><a href="berecont" title="Den Artikel lesen: beRecont" itemprop="url">beRecont</a></h2>
                  <div class="ce_text block" itemprop="description">
                  </div>
                  <p class="more"><a href="berecont" title="Den Artikel lesen: beRecont" itemprop="url">Weiterlesen …<span class="sr-only"> beRecont</span></a></p>
               </div>
            </div>
         </div>
         <!-- indexer::continue -->    
      </div>
   </div>
</div> 


---

und die j_cat-ajaxreload.html5

PHP-Code:

---

<script>
    $(".mod_newscategories .nav-item").click(function (event) {
        var element;
        
        // 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 = $('mod_newslist[data-ajax-reload-element]');

        // 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: location.href,
            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({{env::request}});
                }
                else {
                    // Reload the page as fallback
                    location.reload();
                }
            });
    });

</script> 


---

klappt nicht ... :mad:

Für mein Verständnis:
• '.mod_article data-ajax-reload-element' ist der angesprochene Wrapper, weil ich ja nur dort die Möglichkeit habe für einen Artikel das Häkchen zu setzen
• bei click auf '.mod_newscategories .nav-item' wird der click-event gestartet
• und über 'element = $('mod_newslist[data-ajax-reload-element]');' wird die '.mod_newslist' zum reload angesprochen?

[raunzermodus an]
... wenn ich das mal loswerden darf ... ich bin echt am Verzweifeln ...
[/raunzermodus aus]

Zitat:

---

Zitat von Flox

Probier es doch einmal einfach mit einem Ankerlink.

---

?? kann dir nicht folgen

Bei deiner mod_newslist scheint das AJAX Reloading nicht aktiv zu sein.

Außerdem musst du das JavaScript noch dahingehen anpassen, dass nicht die location.href URL geladen wird, sondern der href des Links, auf den geklickt wurde.