Contao: Artikel per Ajax nachladen?

Hey Hallo an alle :)

ich bin Webentwickler, jedoch relativ neu was Contao angeht, darum weiss ich noch nicht alles (und werde es wohl nie) aber einiges! :)

Ich hab folgendes Problem:
Der Kunde möchte, dass man über ein Individuelles Menü im Footer (schon erledigt), die Inhalte der Seiten "Contact" & "Imprint", in einen ausgeslideten Bereich unterhalb des eigentlichen Footers laden kann.

Heißt, was ich bisher gemacht habe:
1. Individuelle Navigation mit einem angepassten template ohne die <a>-tags aber mit eindeutigen class-namen (z.b .footer_contact und .footer_imprint).

2. Per jQuery fange ich den click auf dieses Element ab:

Code:

---

jQuery('li a.footer_contact').click(function(){
            jQuery('.subfooter').animate({height:'750px'}, 500);
            jQuery('html, body').animate({scrollTop: jQuery("h1.headline").offset().top},1500);
        return false;
   
    });

---

Dieses kleine Script, animiert und erweitert den subfooter (welcher unter dem eigentlichen liegt) auf 750px höhe und scrollt dann runter.
Soweit alles ok!

5. Jetzt aber, und das alles NACH dem Slide und Scroll, soll eben der Inhalt der Seiten ausgelesen werden. bestenfalls per Ajax / JQuery request.

Und hier die Frage:
Ist sowas möglich? Und wenn JA, wie? Wenn Nein, irgendwelche alternativideen?
Man könnte ja die Inhalte vorladen und dann ausgeben, aber das möchte ich nicht wg der performance. Außerdem würde der Code aufblähen, auch nicht so toll.

Ich hoffe ich konnte es so gut wie möglich beschreiben.

Vielen Dank und schönen Abend! :)

Als Hiilfe kannst du jedenfalls die Erweiterung ajax nehmen. Allerdings kannst du nur Inhaltselemente, Module und Formulare per Ajax nachladen.
Mit mootools sieht das dann so aus:

Code:

---

window.addEvent('domready', function(){
document.getElements('.button').addEvent('click', function(event){
          event.preventDefault();
          new Request.JSON({
                  method:'get',
                  data:'action=cte&id=<?php echo $this->id; ?>',
                  url:'ajax.php',
                  onComplete: function(responseText)
                      {
                          $('ID').set('html', responseText.content);
                      }
              }).send();
          return false;
    });
});

---

Zitat:

---

Zitat von lomex

Als Hiilfe kannst du jedenfalls die Erweiterung ajax nehmen. Allerdings kannst du nur Inhaltselemente, Module und Formulare per Ajax nachladen.
Mit mootools sieht das dann so aus:

Code:

---

window.addEvent('domready', function(){
document.getElements('.button').addEvent('click', function(event){
          event.preventDefault();
          new Request.JSON({
                  method:'get',
                  data:'action=cte&id=<?php echo $this->id; ?>',
                  url:'ajax.php',
                  onComplete: function(responseText)
                      {
                          $('ID').set('html', responseText.content);
                      }
              }).send();
          return false;
    });
});

---

---

Könnte man dies irgendwie umbauen für Artikel?
ich denke mal direkt in der ajax.php...

Hat keiner sonst eine Idee? Ich bin hier fast ratlos! :)

HTML-Code:

---

deinButton.addEvent('click', function(){
    var request = new Request.HTML({
      update: $('main'), // oder was immer du willst.
      url: deinButton.getProperty('href')
    });
    request.send({filter: '#main'});
  });

---

Und am besten noch mittels History-Api den Link in der Adresszeile anpassen :-)

Den Weg mit Filter kannte ich noch gar nicht. Ist aber unschön, da ja die ganze Seite geladen wird. Aber man könnte natürlich speziell hierfür ein eigenes Seitenlayout anlegen, wo sonst nix geladen wird. Für den Javascript Fallback bräuchtest du dann aber auch wieder jeweils zwei Seiten. Eine "normale" mit dem Artikel und eine mit dem abgespeckten Seitenlayout.

Eine Idee wäre noch, irgendwo in einer versteckten Seite einen Artikel mit einem Inhaltselement anzulegen und dort den korrekten Artikel zu inkludieren. Das Inhaltselement bekommst du mit der ajax.php ja geliefert. Keine Ahnung ob das geht. Ist nur eine Idee.

Zitat:

---

Zitat von lomex

Den Weg mit Filter kannte ich noch gar nicht. Ist aber unschön, da ja die ganze Seite geladen wird. Aber man könnte natürlich speziell hierfür ein eigenes Seitenlayout anlegen, wo sonst nix geladen wird. Für den Javascript Fallback bräuchtest du dann aber auch wieder jeweils zwei Seiten. Eine "normale" mit dem Artikel und eine mit dem abgespeckten Seitenlayout.

Eine Idee wäre noch, irgendwo in einer versteckten Seite einen Artikel mit einem Inhaltselement anzulegen und dort den korrekten Artikel zu inkludieren. Das Inhaltselement bekommst du mit der ajax.php ja geliefert. Keine Ahnung ob das geht. Ist nur eine Idee.

---

Das hört sich für mich jedenfalls leichter an, ich versuche das gleich mal. Danke!

Hab das nun auf jQuery umgebaut:

Code:

---

    jQuery('#nav_footer li a.footer_contact').click(function(){
            jQuery('.subfooter').animate({height:'750px'}, 500);
            jQuery('div.copyright').animate({position:'relative',bottom:'-800px'}, 1500);
            jQuery('ul.social').animate({position:'relative',bottom:'-800px'}, 1500);
            jQuery('html, body').animate({scrollTop: jQuery("#nav_footer").offset().top - 100}, 1500);
                jQuery.ajax({
                        type:"GET",
                        url:"ajax.php",
                        data:"action=cte&id=288",
                        dataType:"json",
                        success:function(data){
                                jQuery('.subfooter').html(data);
                        }});
    });

---

Leider bekomm ich einen Internal Error 500... Rechte sind auf 777... und ohne die Parameter kann ich ajax.php auch aufrufen, bekomme "nur" einen Response ala "Invalid AJAX call." was ja OK ist.
Idee? Sehr komisch!

EDIT:
g=1 hat es behoben, Inhalt kommt dennoch nicht.. ich bin dran. Jedoch sage ich nicht nein, zu Tipps & Tricks! ;)

EDIT: 2

Here we go:

Code:

---

{"token":"2e32c6881c5949a817128f3d6e0f3656","content":"\n
\n\n
Test<\/p>\n<\/div>\n\n

Hallo<\/h1>\n"}

---

Das sieht besser aus! ;)
Danke schon mal! Ich bearbeite das mal und gebe dann laut wenn alles "Ok" ist.

Genau. Du bekommst mit der ajax.php ein JSON zurückgeliefert.
Ich glaube du solltest jQuery.getJSON nehmen und dann response.content ausgeben.

Zitat:

---

Zitat von lomex

Den Weg mit Filter kannte ich noch gar nicht. Ist aber unschön, da ja die ganze Seite geladen wird

---

Das stimmt natürlich :-) Sollte aber kein großes Problem sein, vorallem wenn die Seite schon im Servercache liegt?! Und danach liegt sie im Cache.

Zitat:

---

Zitat von lomex

Eine Idee wäre noch, irgendwo in einer versteckten Seite einen Artikel mit einem Inhaltselement anzulegen und dort den korrekten Artikel zu inkludieren. Das Inhaltselement bekommst du mit der ajax.php ja geliefert. Keine Ahnung ob das geht. Ist nur eine Idee.

---

Hört sich interessant und funktionierend an. Allerdings fraglich ob das sauberer ist als meine Idee :-)

Der sauberste Web wäre wohl die ajax.php um Artikel zu erweitern?!

Ich denke beide Varianten sind nicht ganz sauber. Ist auch egal. Ist eh geschmacksache.

Falls es noch von Interesse ist. Auch ich habe gerade versucht einen Artikel via [ajax] zu laden. Ging erfreulicherweise wunderbar einfach:

ajax.php ca. Z.180 eine action erweitern:

Code:

---

if ($this->Input->get('action') == 'atc')
                {
                        $this->output($this->getArticleById($this->Input->get('id')));
                }

---

Dann fehlt noch die Funktion getArticleById() in der ajax.php

Code:

---

/**
        * Generate an article return it as HTML string
        * @param integer
        * @return string
        */
        protected function getArticleById($intId)
        {
                //check if param is valid
                if (!strlen($intId) || $intId < 1)
                {
                        header('HTTP/1.1 412 Precondition Failed');
                        return 'Missing content article ID';
                }
                else
                {
                        return $this->getArticle($intId, false, true, 'main');
                }
               
        }

---

Im Controller wird die Funktion getArticle(...) bereitgestellt. Meine getArticleById() ist sicher noch ausbaubar und resistenter gegen Fehler baubar, aber es funktioniert. Juhu.