Contao-Camp 2024
Ergebnis 1 bis 11 von 11

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

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.853
    Contao-Projekt unterstützen

    Support Contao

    Standard 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
    Grüsse
    Bernhard


  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.059
    Partner-ID
    10107

    Standard

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

  3. #3
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.853
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Grüsse
    Bernhard


  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.059
    Partner-ID
    10107

    Standard

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

  5. #5
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.853
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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?
    Grüsse
    Bernhard


  6. #6
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.853
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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">
             <
    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">
             <
    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">
             <
    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">
             <
    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">
             <
    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
    Grüsse
    Bernhard


  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.059
    Partner-ID
    10107

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    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).

  8. #8
    Contao-Nutzer
    Registriert seit
    04.12.2013.
    Ort
    Reutlingen
    Beiträge
    221

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    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.

  9. #9
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.853
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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">
                      <
    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">
                      <
    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">
                      <
    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">
                      <
    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">
                      <
    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>
                      <
    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>
                      <
    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>
                      <
    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',
                
    urllocation.href,
                
    data: {
                    
    // The data- attribute is set automatically
                    
    ajax_reload_elementelement.attr('data-ajax-reload-element')
                }
            })
                .
    done(function (responsestatusxhr) {
                    if (
    'ok' === response.status) {
                        
    // Replace the DOM
                        
    element.replaceWith({{env::request}});
                    }
                    else {
                        
    // Reload the page as fallback
                        
    location.reload();
                    }
                });
        });

    </script> 
    klappt nicht ...

    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]
    Grüsse
    Bernhard


  10. #10
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.853
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Flox Beitrag anzeigen
    Probier es doch einmal einfach mit einem Ankerlink.
    ?? kann dir nicht folgen
    Grüsse
    Bernhard


  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.059
    Partner-ID
    10107

    Standard

    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •