Probleme mit AJAX im eigenen FE-Modul trotz JSON u. REQUEST_TOKEN

[lomex]

Hallo,

ich habe ein (eigenes) Modul, wo ich mir im Template eine Liste mit einer Paginierung ausgebe. Diese soll per AJAX neu geladen werden. Dies klappt auch genau 1x. Beim Ajax-Reload wird das Script nicht erneut verarbeitet. Dadurch wird der Link in der Paginierung ohne Ajax mit dem alten Request_Token aufgerufen, und nicht mit dem neuen Request_Token per Ajax.

evalResponse: true bringt auch keine Verbesserung.
Das Script wird nach dem Ajax-Reload nicht erneut verarbeitet.

Ich bin seit Tagen am verzweifeln und benötige dringend Hilfe, auch gegen Geld.
Hier die Live-Seite zum testen.

Hier mein Javascript:

<script type="text/javascript">
window.addEvent('domready', function(){
  var jobAccordion = new Fx.Accordion($('jobliste'), '#jobliste h2', '#jobliste .content', {
      display:-1,
      onActive: function(toggler, element) {
          toggler.addClass('active');
      },
      onBackground: function(toggler, element) {
          toggler.removeClass('active');
      }
  })
  document.getElements('.pagination a').addEvent('click', function(event){
      event.preventDefault();
      var page = event.target.get('href').match('page=[0-9]')
      new Request.JSON({
          method:'get',
          data:'g=1&action=fmd&id=<?php echo $this->id; ?>&REQUEST_TOKEN=<?php echo $this->request_token; ?>&' + page,
          url:'ajax.php',
          evalScripts: true,
          onSuccess: function(responseText) {
              $('jobs').set('html', responseText.content);
              new Fx.Accordion($('jobliste'), '#jobliste h2', '#jobliste .content', {
                  display: -1
              });
          }
      }).send();
      return false;
  });
});
</script>

Bin für jeden Tipp dankbar.

lomex

[Toflar]

Joa, Du kriegst ja den neuen Token zurück, damit Du weisst, was Du beim nächsten Mal mitschicken musst

Hier ein Vorschlag:

<script type="text/javascript">
window.addEvent('domready', function(){
  var jobAccordion = new Fx.Accordion($('jobliste'), '#jobliste h2', '#jobliste .content', {
      display:-1,
      onActive: function(toggler, element) {
          toggler.addClass('active');
      },
      onBackground: function(toggler, element) {
          toggler.removeClass('active');
      }
  })
  document.getElements('.pagination a').addEvent('click', function(event){
      event.preventDefault();
      var page = event.target.get('href').match('page=[0-9]');
      var token = '<?php echo $this->request_token; ?>';
      new Request.JSON({
          method:'get',
          data:'g=1&action=fmd&id=<?php echo $this->id; ?>&REQUEST_TOKEN=' + token + '&' + page,
          url:'ajax.php',
          evalScripts: true,
          onSuccess: function(responseText) {
              $('jobs').set('html', responseText.content);
              // update token
              token = responseText.token;
              new Fx.Accordion($('jobliste'), '#jobliste h2', '#jobliste .content', {
                  display: -1
              });
          }
      }).send();
      return false;
  });
});
</script>

[lomex]

Deinen Vorschlag habe ich drin. Aber das Javascript wird nach dem Ajax-Request nicht ausgeführt (mit oder ohne deine Änderungen).
Siehe eingebautes console.log. Daher wird hier beim zweiten Mal immer der normale Link aufgerufen.

[joc]

Hi!

Ich habe dein Script auch gerade mal getestet.
Das Javascript wird schon ausgeführt.

Allerdings kommt der Rückgabe-String aus dem JSON-array beim zweiten Mal "maskiert" mit slashes und "" an...

Auszug aus deinem generierten Quellcode nach dem zweiten KLick auf die Pagination:

Duisburg<\/span>Elektromeister<\/h2>\n

Wenn dies vielleicht nicht sogar der Hauptgrund dafür ist, dass dein Skript nicht funktioniert, so ist es auf jeden Fall
noch ein weiterer Fehler.

Ich hatte ein ähnliches Problem ja auch schon mal hier:
http://www.contao-community.de/showt...ajax-neu-laden

[lomex]

Das Ajax Galerie Thema habe ich verfolgt und nachgebaut. Allerdings liegt dort das Script außerhalb des nachgeladenen HTMLs. Wollte das eigentlich vermeiden. Und da sich die Pagination ja auch jedesmal ändert, macht z.B. die generateAjax keinen Sinn, da alles drei (Liste, Pagination und Script) voneinander abhängt und ich eh alles komplett neu Laden muss.

Bezüglich der extra Maskierung beim zurückgegeben Json weiß ich noch nicht, wie ich damit umgehen muss. Da wäre ich noch um einen Tipp verlegen.

[lomex]

Habe es jetzt mit einem Kniff hinbekommen. Habe alles, was vorher in window.addEvent('domready') war, in eine eigene Funktion ausgelagert und diese neben domready auch nochmal onSuccess aufgerufen.

Dadurch wird der Pagination explizit das addEvent zugeordnet und meine Welt ist in Ordnung.
Fraglich ist für mich jedoch immer noch, warum das per Ajax geladene Script nicht ausgeführt wird.

@joc
Wurde es wirklich nicht. Sonst hätte er es ja per console.log ausgeworfen. Es wurde nur der normale Link aufgerufen.

Mein Tag (Nacht) ist gerettet :-)

lomex

PS
Hier das Ergebnis:

<script type="text/javascript">
function jobajax(){
    var jobAccordion = new Fx.Accordion($('jobliste'), '#jobliste h2', '#jobliste .content', {
          display:-1,
          onActive: function(toggler, element) {
              toggler.addClass('active');
          },
          onBackground: function(toggler, element) {
              toggler.removeClass('active');
          }
      })
      document.getElements('.pagination a').addEvent('click', function(event){
          event.preventDefault();
          var page = event.target.get('href').match('page=[0-9]')
          var token = '<?php echo $this->request_token; ?>';
          new Request.JSON({
              method:'get',
              data:'g=1&action=fmd&id=<?php echo $this->id; ?>&REQUEST_TOKEN=' + token + '&' + page,
              url:'ajax.php',
              evalScripts: true,
              evalResponse: true,
              onSuccess: function(responseText) {
                  $('jobs').set('html', responseText.content);
                  // update token
                  token = responseText.token;
                  new Fx.Accordion($('jobliste'), '#jobliste h2', '#jobliste .content', {
                      display: -1
                  });
                  jobajax();
              }
          }).send();
          return false;
      });
}

window.addEvent('domready', function(){
   jobajax();
});
</script>

[joc]

Respekt, dass du das geschafft hast!
Und vielen Dank für die Veröffentlichung deiner Lösung.

Das hat mir nun auch geholfen, in einer Bildgalerie mit Pagination
die jeweils nächsten und vorigen Bilder per ajax neu zu laden.
So macht das Durchblättern einer Galerie mehr Spass, da die Seite nicht
immer neu geladen wird und man dann wieder zur Galerie scrollen muss.

[lomex]

Und vielen Dank für die Veröffentlichung deiner Lösung

Ich bekomme mehr als ich geben kann. Aber ich tue was ich kann.