accordion javascript nach Ajax ausführen

Guten Tag,

hab eine Liste mit einträgen in denen jeweils ein Accordion mit Inhalt ausgegeben wird.
Diese Liste filtere ich mit AJAX und geb dann eine neue Liste (der aufbau ist identisch) aus. (natürlich ohne Pagereload)

Das Accordion funktioniert nach der AJAX abfrage nicht mehr (so als ob das Javascript nicht eingebunden wäre)
Meine vermutung ist, dass man irgendeine Function nach erfolgreicher Ajaxabfrage ausführen muss. Nur leider finde ich nicht die passende.

Könnt ihr mir helfen? Vielen Dank.

keiner einer Idee?

Nachdem du deinen Inhalt per AJAX geladen hast, musst du auch das Accordion wieder initialisieren lassen, da das ja neue DOM Elemente sind.

Zitat:

---

Zitat von Spooky

Nachdem du deinen Inhalt per AJAX geladen hast, musst du auch das Accordion wieder initialisieren lassen, da das ja neue DOM Elemente sind.

---

Hi danke! Ja genau :) Ich finde nur nicht den entscheidenden Code den ich ausführen muss. Hab es mit dem Js code aus dem j_accordion template beim Success der Ajax abfrage versucht. Funktioniert aber nicht - es passiert gar nichts. (das alert(test) wird aber (sofern einkommentiert) zur richtigen Zeit angezeigt.

Code:

---

                (function($) {
    $(document).ready(function() {
        //alert('test');
       
      $(document).accordion({
        // Put custom options here
      collapsible: true,
      active: false, 
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function() {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);

---

Nein, du musst, nachdem du deinen Inhalt per AJAX geladen hast, die Accordions aus den neu geladenen Inhalten initialisieren.

Hallo zusammen

Ich möchte mich gerne dieser Frage anschliessen.

Ich würde dem Javascript beim Öffnen gerne folgende Funktion hinzufügen:

HTML-Code:

---

$(function(){
  $(".toogle").click(function(){
      var videoelement= $(this).parent().parent().find("video").get(0);
      videoelement.play();
  });
});

---

Leider sehe ich im j_accordion template nicht, wie ich das unter bringen könnte. Ich habe das bereits auf alle möglichen Arten versucht.

Hätte vielleicht jemand hier eine Idee?


Vielen Dank im Voraus..


Edit: Ich sehe nicht, wie ich einen neuen Thread erstellen kann..

Zitat:

---

Zitat von aitana

Edit: Ich sehe nicht, wie ich einen neuen Thread erstellen kann..

---

https://community.contao.org/de/foru...wickler-Fragen => links oben "+ Thema erstellen"

ggf. in activate https://github.com/contao/contao/blo...dion.html5#L14

PHP-Code:

---

      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
        let videoelement = $('.toggler') ??? hier nochmal gucken im DOM .parent().parent().find("video").get(0);
        videoelement.play();
      } 


---

Vielen Dank für deine Antwort, zonky.
Leider startet mit diesem Script nur das 1. Video. Die Videos in den darauffolgenden Accordions dann nicht mehr.

Ich habe für diese Frage nun einen eigenen Thread erstellt, da es hier offtopic war.
https://community.contao.org/de/show...ordion-starten