Contao-Camp 2024
Ergebnis 1 bis 16 von 16

Thema: richardhj/contao-ajax_reload_element und cal_default.html5

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

    Support Contao

    Standard richardhj/contao-ajax_reload_element und cal_default.html5

    Hallo,

    lokale Installation 4.11.5
    Die Erweiterung [richardhj/contao-ajax_reload_element] installiert.
    Die cal_default.html5 angepasst
    PHP-Code:
    <table class="calendar">
    <thead>
      <tr>
        <th colspan="2" class="head previous calendar__prev"><?php if ($this->prevHref): ?><a href="<?= $this->prevHref ?>" title="<?= $this->prevTitle ?>"><?= $this->prevLink ?></a><?php else: ?>&nbsp;<?php endif; ?></th>
        <th colspan="3" class="head current"><?= $this->current ?></th>
        <th colspan="2" class="head next calendar__next"><?php if ($this->nextHref): ?><a href="<?= $this->nextHref ?>" title="<?= $this->nextTitle ?>"><?= $this->nextLink ?></a><?php else: ?>&nbsp;<?php endif; ?></th>
      </tr>
      <tr>
        <?php foreach ($this->days as $day): ?>
          <th class="label<?= $day['class'?>"><?= Patchwork\Utf8::substr($day['name'], 0$this->substr?><span><?= Patchwork\Utf8::substr($day['name'], $this->substr?></span></th>
        <?php endforeach; ?>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($this->weeks as $class => $week): ?>
        <tr class="<?= $class ?>">
          <?php foreach ($week as $day): ?>
            <td class="<?= $day['class'?>">
              <div class="header"><?= $day['label'?></div>
              <?php foreach ($day['events'] as $event): ?>
                <div class="event cal_<?= $event['parent'?><?= $event['class'?>" itemscope itemtype="http://schema.org/Event">
                  <a href="<?= $event['href'?>" title="<?= $event['title'?> (<?php if ($event['day']): ?><?= $event['day'?><?php endif; ?><?= $event['date'?><?php if ($event['time']): ?> <?= $event['time']?><?php endif; ?>)"<?= $event['target'?> itemprop="url"><span itemprop="name"><?= $event['link'?></span></a>
                </div>
              <?php endforeach; ?>
            </td>
          <?php endforeach; ?>
        </tr>
      <?php endforeach; ?>
    </tbody>
    </table>


    <script>
      $(".calendar__next, .calendar__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>
    Im Artikel "Ajax-Reload erlauben" erlaubt.
    Im Contentelement 'Modul' selbst wird "Ajax-Reload erlauben" nicht angeboten.
    Im Modul/Modultyp 'Kalender' wird kein "Ajax-Reload erlauben" angeboten.

    Im Frontend wird der click-event auch ausgeführt, denn nach dem Klick wird die class hinzugefügt
    PHP-Code:
    <div class="mod_calendar events-calendar block ajax-reload-element-overlay"
    ... aber mehr passiert nicht.
    Im Devtool bekomme ich keinen Fehler angezeigt.

    Also der Kalender verbleibt am aktuellen Monat und ein vor- und zurückklicken funktioniert nicht.

    Kann mir jemand weiterhelfen?
    vielen Dank
    Grüsse
    Bernhard


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

    Support Contao

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    Im Modul/Modultyp 'Kalender' wird kein "Ajax-Reload erlauben" angeboten.
    kann hier der Fehler liegen?
    Grüsse
    Bernhard


  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.897
    Partner-ID
    10107
    » sponsor me via GitHub or PayPal or Revolut

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

    Support Contao

    Standard

    Update auf 2.1.9
    trotzdem bewegt sich der Kalender noch nicht vor oder zurück.

    Im CE 'Modul' befindet sich keine Checkbox für "Ajax-Reload erlauben".
    Im Modul selbst befindet sich die Checkbox und ich habe sie auch angehakt.

    Das div von mod_calendar sieht nun so aus:
    PHP-Code:
    <div class="mod_calendar events-calendar block ajax-reload-element-overlay" data-ajax-reload-element="mod::15"
    Grüsse
    Bernhard


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

    Standard

    Poste mal einen Link zur Seite.
    » sponsor me via GitHub or PayPal or Revolut

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

    Support Contao

    Standard

    die Erweiterung selbst ist noch in einer lokalen Installation am Testen.
    Die Live-Seite (hier ist die Erweiterung aber noch nicht eingebunden) wäre diese hier:
    https://www.horn-ist-vorn.at/veranst...skalender.html
    Grüsse
    Bernhard


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

    Standard

    Wenn dann würde ich natürlich einen Link zu einer Seite benötigen, wo man das Problem sieht
    » sponsor me via GitHub or PayPal or Revolut

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

    Support Contao
    Grüsse
    Bernhard


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

    Standard

    Also der JavaScript Code stimmt so jedenfalls nicht. Du selektierst .calendar__prev und .calendar__next und nimmst von diesen Elementen dann das href Attribut. In deinem Fall sind diese Elemente aber nicht die Vor und Zurück Links, sondern nur die Table-Headers. Statt $(".calendar__next, .calendar__prev").click sollte es also eher $(".calendar .head.previous a, .calendar .head.next a").click sein.
    Geändert von Spooky (22.07.2021 um 10:35 Uhr)
    » sponsor me via GitHub or PayPal or Revolut

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

    Support Contao

    Standard

    OK Danke, habe den Fehler erkannt, aber ...

    jetzt aber passiert bei click Folgendes:
    aus
    PHP-Code:
    <div class="mod_calendar events-calendar block" data-ajax-reload-element="mod::15"
    wird
    PHP-Code:
    <div class="mod_calendar block" data-ajax-reload-element="mod::15"
    sprich, die eigene class aus dem CE 'Modul' wird entfernt und somit greifen die CSS-Anweisungen nicht mehr

    Hast du hierzu auch noch eine Idee?
    Grüsse
    Bernhard


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

    Standard

    Mja, das ist tatsächlich eine Limitation. Du musst die CSS Klasse im Modul selbst hinterlegen.
    » sponsor me via GitHub or PayPal or Revolut

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

    Support Contao

    Standard

    prima! alles klar und klappt nun!
    vielen DANK für deine Geduld und Hilfestellung!
    Grüsse
    Bernhard


  13. #13
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Danke für diese Anleitung, hatte so etwas mal mit https://extensions.contao.org/?q=aja...ination-bundle umgesetzt, falls jemand noch eine Alternative sucht .

    @derRenner
    wie hast Du das mit dem "zum aktuellen Monat springen.." umgesetzt?

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

    Support Contao

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    wie hast Du das mit dem "zum aktuellen Monat springen.." umgesetzt?
    cal_default.html5
    PHP-Code:
    <?php 
    $nowUrl 
    preg_replace('/\?.*$/'''Environment::get('request'));
    $nowMonth $this->parseDate('F Y'$this->time); 
    $nowLYear $this->parseDate('Y'$this->time);
    $nowLMonth $this->parseDate('m'$this->time);
    $toCurMonth $nowUrl '?month=' $nowLYear $nowLMonth;

    ?>
    <table class="calendar">
    <thead>
      <tr>
        <th colspan="2" class="head previous"><?php if ($this->prevHref): ?><a class="calendar__prev" href="<?= $this->prevHref ?>" title="<?= $this->prevTitle ?>"><?= $this->prevLink ?></a><?php else: ?>&nbsp;<?php endif; ?></th>
        <th colspan="3" class="head current">
          <?= $this->current ?> 
          <?php if ($nowMonth !== ($this->current)): ?>
          <a class="calendar__now" href="<?= $toCurMonth ?>"><?= ' (zum aktuellen Monat ' $nowMonth ' springen)' ?></a>
          <?php endif; ?>
        
        </th>
        <th colspan="2" class="head next"><?php if ($this->nextHref): ?><a class="calendar__next" href="<?= $this->nextHref ?>" title="<?= $this->nextTitle ?>"><?= $this->nextLink ?></a><?php else: ?>&nbsp;<?php endif; ?></th>
      </tr>
      <tr>
        <?php foreach ($this->days as $day): ?>
          <th class="label<?= $day['class'?>"><?= Patchwork\Utf8::substr($day['name'], 0$this->substr?><span><?= Patchwork\Utf8::substr($day['name'], $this->substr?></span></th>
        <?php endforeach; ?>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($this->weeks as $class => $week): ?>
        <tr class="<?= $class ?>">
          <?php foreach ($week as $day): ?>
            <td class="<?= $day['class'?>">
              <div class="header"><?= $day['label'?></div>
              <?php foreach ($day['events'] as $event): ?>
                <div class="event cal_<?= $event['parent'?><?= $event['class'?>" itemscope itemtype="http://schema.org/Event">
                  <a href="<?= $event['href'?>" title="<?= $event['title'?> (<?php if ($event['day']): ?><?= $event['day'?><?php endif; ?><?= $event['date'?><?php if ($event['time']): ?> <?= $event['time']?><?php endif; ?>)"<?= $event['target'?> itemprop="url"><span itemprop="name"><?= $event['link'?></span></a>
                </div>
              <?php endforeach; ?>
            </td>
          <?php endforeach; ?>
        </tr>
      <?php endforeach; ?>
    </tbody>
    </table>


    <script>
      $(".calendar__next, .calendar__prev, .calendar__now").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>
    • Zeile 15 bis 17 eine Abfrage ob aktueller Monat - falls nein, dann erzeuge einen Link
    • und in <script> dann nochmals 'calendar__now' mit in den click-event gepackt, damit auch hier sauber nachgeladen wird
    Grüsse
    Bernhard


  15. #15
    Contao-Fan Avatar von mapfei
    Registriert seit
    11.05.2010.
    Ort
    Much
    Beiträge
    692

    Frage

    Hi zusammen,

    ich möchte mit der Erweiterung "weitere Referenzen" einblenden lassen. Hierzu habe ich zwei Module vom Typ Nachrichtenleser angelegt. Die Referenzen 1-6 werden immer angezeigt. Das zweite Modul überspringt die ersten 6 und soll den "Rest" anzeigen, nachdem man auf einen Button "mehr laden" geklickt hat. Das Nachrichtenlisten-Modul für den "Rest" hat den Haken bei "Ajax reload erlauben".

    Wie müsste das Script nun aussehen, welches ich einbinden muss? Muss das zweite Nachrichtenmodul direkt auf der Seite eingebunden werden?

    Grüße,
    mapfei

  16. #16
    Contao-Fan Avatar von mapfei
    Registriert seit
    11.05.2010.
    Ort
    Much
    Beiträge
    692

    Standard

    Vermutlich recht simple, aber ich stehe leider auf dem Schlauch...

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
  •