Einzelne Content-Bereiche mit Ajax (MooTools) nachladen

[minstyle]

Hallo zusammen,

ich habe auf einer Seite u.a. zwei Inhaltselemente eingebunden:

1. Foto
2. dazugehöriger Beschreibungstext mit Link

Ich möchte gerne, dass bei einem Klick auf den entsprechenden Link im Beschreibungstext, sich das Foto wie auch der dazugehörige Beschreibungstext sich ändert und durch anderen Inhalt ausgetauscht wird (siehe Schaubild im Anhang).

Bei meinen Recherchen zu diesem Thema bin ich auf folgendes Tutorial gestoßen:
Seiten via Ajax nachladen [hier die dazugehörige Demo]

Allerdings wird bei diesem Tutorial die ganze Seite neu geladen. Ich möchte allerdings nur einzelne Contentbereiche neu geladen haben!

Wie genau lässt sich dies umsetzen und ist diese Methode später auch leicht über das Backend von Typolight zu verwalten (auch für Nutzer ohne Programmiererfahrung)?

[Toflar]

Eine ganze Seite neu laden ist ohnehin sinnlos. Das ist nämlich synchron und hat dann nichts mehr mit Ajax zu tun.

Du musst also gezwungenermassen mittels einem Modul gewisse Bereiche nachladen. Aber hilfreich könnte dir die geniale Erweiterung von andreas.schempp sein: https://contao.org/erweiterungsliste...000039.de.html

[minstyle]

Danke für deine Antwort.
Da ich allerdings im Umgang mit Mootools (noch) keine Erfahrungen gesammelt habe, kann ich mit dieser Erweiterung nichts anfangen.

Ich brauche eigentlich genau den Effekt, der wie oben im Tutorial gezeigt wird, nur nicht auf eine komplette Seite angewendet, sondern nur auf 1-2 Inhaltselemente innerhalb der Seite. Das sollte doch irgendwie machbar sein ...

[Toflar]

Wie gesagt, einfach so geht es nicht.
Machbar ist es, aber nicht mit Boardmitteln so schnell, schnell

Ergänze mal dein Template um diesen Code:

<script>
window.addEvent('domready', function() {

	var myRequest = new Request({
		method: 'get',
		url: 'ajax.php'
	});

	$('myLink').addEvent('click', function(event){
		event.stop(); 
		myRequest.send('act=cte&id=9999');
	});

});
</script>

Die 9999 ersetzt du bitte durch die ID des ContentElements, welches geladen werden soll.

Auslösen kannst du die Funktion mittels

<a id="myLink" href="#" alt="alt text">CE laden</a>

[minstyle]

Muss ich dazu vorher die Erweiterung von andreas.schempp installieren?

[Toflar]

Ah ja klar, sorry!

[minstyle]

Nach der Installation der Erweiterung von Andreas Schempp und der Einbindung deines JavaScripts (inklusive Anpassung der ID) in den Header des Templates, sowie der Einbindung des Links passiert leider nichts.

[Toflar]

Ja klar, weil ich in der Eile die Resultatbehandlung vergessen hab^^

Wie gesagt, so schnell, schnell geht's eben nicht!

Bin gerade unterwegs, schau mir das später an!

[minstyle]

Klasse! Dann bin ich mal gespannt ...

[Toflar]

Hmm scheint was nicht zu gehen mit der Erweiterung von andreas

Muss ihn mal kontaktieren

[andreas.schempp]

Immer die Schuld auf mich schieben!

Die ajax.php ist nur gedacht um Ajax-Daten zu laden, und nicht Inhaltselemente. Allerdings könnte man das dahingehend erweitern

[andreas.schempp]

Ehm...

Im Anhang ne neue Version. Einfach g=1 als GET-Parameter anhängen, dann wird die generate() und nicht generateAjax()-Funktion aufgerufen. Funktioniert bei Modulen und Inhaltselementen.

[Toflar]

Hab ja geschrieben "scheint was nicht zu gehen"

Nicht, "andreas' Erweiterung ist schuld"

Ich finde die neue ajax.php eigentlich ziemlich praktisch ER?

[Toflar]

Ach so und äh minstyle!

Mit der neuen ajax.php von Andy hier im Thread solltest du eigentlich dann mit folgendem Code zu einem sichtbaren Ergebnis kommen:

<script>
window.addEvent('domready', function() {

	var myRequest = new Request.HTML({
		method: 'get',
		url: 'ajax.php',
		onSuccess: function(html) {
			$('main').set('text', '');
			$('main').adopt(html);
		}
	});

	$('myLink').addEvent('click', function(event){
		event.stop(); 
		myRequest.send('action=cte&id=9999&g=1');
	});

});
</script>

$('main') bezieht sich auf id=main. Das musst du halt ersetzen, wenn du das z.B. in <div id="meineid"> haben willst: $('meineid')

Fast hätt ich's vergessen

[Thomas]

Halli, hallo!

Geht sowas auch ohne es selbst auslösen zu müßen?

Scenario:
Bundesligaticker, der über RSS eingelesen wird, soll sich alle paar Minuten selbst neu laden.

Muß nicht von jetzt auf gleich sein!

Das Problem welches ich sehe, es gibt einen Haupt DIV, der mehrere DIVs umgibt, die aus den RSS items gebildet werden. Hier müßten, nach meinem Verständnis, die Items neu geladen werden und nicht der umgebende DIV!?

[Toflar]

Ich weiss jetzt nicht, wie das genau aussieht mit diesem Ticker, aber möglich ist es auf jeden Fall.

Man muss sich einfach ein bisschen in mootools und Javascript einarbeiten (ich kann überhaupt kein Javascript eigentlich, hab halt einfach gezwungenermassen mal mit mootools angefangen und da liest man sich dann so rein...)

Eine Funktion schreiben, die diese <div>'s nachlädt und dann regelmässig ausführen lassen: http://mootools.net/docs/core/Native...ion:periodical

[Thomas]

Danke zunächst!

Zum Ticker:
Der RSS Reader holt sich die Daten von kicker.de, die dann in einem angepaßten Template verarbeitet werden.

Wenn ich das richtig verstanden habe, sollte es genügen, den umschließenden DIV in Intervallen neu laden zu lassen. Im Moment ist es so, dass er sich immer aktuallisiert, wenn man sich auf der Seite bewegt.

Ich habe das mal vor einiger Zeit mit AJAX versucht zu machen, was aber nicht funktionierte. Was mootools damit jetzt zutun haben soll, ist für mich nicht nach zu vollziehen, dazu bräuchte ich eine Erklärung.
Leider fehlt mir auch die Zeit, mich in mootools einzuarbeiten.

Ich habe das auch nicht weiter verfolgt, da noch andere Dinge auf meinem Zettel standen/stehen.

[Toflar]

Zu Mootools: Mootools ist ein browserübergreifendes, objektorientiertes JavaScript-Framework.

Du kannst damit einfach sehr viel einfacher Javascript-Code schreiben. Das ist alles

[Thomas]

Soweit habe ich das auch verstanden.
Nur habe ich von Java so viel Ahnung wie die Kuh vom Eier legen.

Ich habe das Thema eh erstmal ganz hinten angestellt, dachte nur, es hätte schonmal einer gemacht.

[Toflar]

Warum mootools was mit Ajax zu tun haben soll? Ist das also die Frage?
Dann solltest du dich mal auf Wikipedia nach Ajax umsehen

Und merke: Java != JavaScript

[Thomas]

Ja, das weiß ich ja alles!

Ich habe im Moment weder Lust noch Zeit mich dort zu 100% einzuarbeiten.

Irgendwo habe ich ein Tutorial gesehen, wo man einzelne DIVs anhand der ID nachladen kann. Das habe ich mal probiert und nicht hin bekommen.

[Toflar]

Ja das gibt's aber das kann so nur schwer funktionieren, weil es eben nicht Ajax ist.

Das Tutorial dort lädt die ganze Seite, filtert dann den Content raus und versucht diesen zu ersetzen. Aber das ist eigentlich schon nicht mehr Ajax, weil eben die ganze Seite angefragt wird und nicht nur ein Inhalt, also ist das eben nicht mehr asynchron

[Thomas]

Du meinst das Tut von Andreas?

Ich hatte auch mal eins im Netz gefunden!
Da ich aber aus dem Ganzen nicht wirklich schlau werde, wohl auch eher wegen derzeitigem Desinteresse und Zeit, ist es für mich allerdings überhaupt schwierig in der Kürze nachzuvollziehen.

[minstyle]

@Toflar und Andreas

Vielen Dank für eure Hilfe!

Es tut mir Leid das ich erst jetzt antworte, aber ich habe hier von dem Forum keine Benachrichtigungs-E-Mail erhalten, dass neue Antworten zu diesem Thread vorhanden sind.

Ich habe Toflars JavaScript in die Seite eingebunden und die AJAX-Erweiterung von Andreas auf die aktuelle Version (1.0.4 stable/Build 3) aktualisiert.

Mein Haupttemplate sieht nun vereinfacht folgendermaßen aus:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
  <base href="<?php echo $this->base; ?>"></base>
  <?php echo $this->framework; ?>
  <link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
  <?php echo $this->stylesheets; ?>
  <script type="text/javascript" src="plugins/mootools/mootools.js"></script>
  <script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
  <?php echo $this->head; ?>

<script>
window.addEvent('domready', function() {

    var myRequest = new Request.HTML({
        method: 'get',
        url: 'ajax.php',
        onSuccess: function(html) {
            $('ajax_profil').set('text', '');
            $('ajax_profil').adopt(html);
        }
    });

    $('myLink').addEvent('click', function(event){
        event.stop(); 
        myRequest.send('action=cte&id=325&g=1');
    });

});
</script>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

    
<div id="container">

         
         <!-- ajax START -->
         <?php if(!isset($_GET['request'])): ?>
         <div class="ansprechpartner" id="ajax_profil">
          <?php echo $this->right; ?>
         </div>
         <?php else: echo $this->$_GET['request']; endif; ?>
         <!-- ajax ENDE -->
      
    </div> <!-- ENDE: container -->    

  </body>
</html>

Mit welcher Funktion kann ich nun das AJAX-Feature starten bzw. aufrufen?
Im Backend möchte ich nämlich gerne in das Textfeld einen Link einfügen, der den AJAX-Bildwechsel durchführt ...

[Toflar]

<a id="myLink">Blabla</a>

führt in diesem Falle das Script einmalig aus.

[minstyle]

Super, es funktioniert!

Jetzt habe ich allerdings das Problem das zwei DIV-Container gleichzeitig geändert werden müssten. Ist dies auch möglich?

[Toflar]

Klar, was müsste denn noch geändert werden?

Welche divs und welcher kriegt welchen Inhalt?

[minstyle]

Die HTML-Quelltextausgabe sieht derzeit folgendermaßen aus:

<div class="ansprechpartner" id="ajax_profil">

  <div class="mod_article block" id="rechte-spalte-ansprechparter">
    <div class="ce_image block">
    <h1>&Uuml;berschrift</h1>
      <div class="image_container">
        <img src="xxx.jpg" alt="xxx">
      </div>
    </div>
    
    <div class="ce_text block">
      <h2>Personenname</h2>
      <p>text</p>
    </div>
    
    <div class="ce_text sonstige block" id="weitere_personen">
      <h2>Weitere Personen:</h2>
      <p>
      <a id="myLink">Person B</a>
      <a id="myLink">Person C</a>
      <a id="myLink">Person D</a>
      </p>
    </div>
  
  </div>
</div>

Beispielsweise soll bei einem Klick auf "Person B" sich der DIV-Container "ce_image" wie auch der Container "ce_text" ändern. Das heisst hier wird das Bild wie auch der dazugehörige Beschreibungstext ausgetauscht (siehe meine Entwurfsskizze am Anfang dieses Threads).

Diese Container sind allerdings mit CSS-Klassen versehen und nicht mit IDs. Ich hoffe das ist kein Problem ...

[Toflar]

Das Problem ist, woher kommen die Daten?
Wahrscheinlich aus dem gleichen Artikel, dann wird's ganz schön komplex, weil du zuerst die Ajax-Antwort parsen und splitten musst, damit das Bild und der Text separat geliefert werden.

Diese Container sind allerdings mit CSS-Klassen versehen und nicht mit IDs. Ich hoffe das ist kein Problem ...

Nein ist es nicht, id's sind einfach eindeutig, weil sie nur einmal vorkommen können. Klassen gibt's mehrere und deshalb werden die als Array geliefert.

[minstyle]

Das Problem ist, woher kommen die Daten?
Wahrscheinlich aus dem gleichen Artikel, dann wird's ganz schön komplex, weil du zuerst die Ajax-Antwort parsen und splitten musst, damit das Bild und der Text separat geliefert werden.

Das Bild wird derzeit als Artikel in Typolight eingebunden.
Der dazugehörige Beschreibungstext wird im Backend als seperates Textelement eingebunden (d.h. nicht im Artikel, wo das Bild eingebunden ist!).

Lässt sich dies bewerkstelligen?

[Toflar]

Wäre möglich ja. Das Bild hat also eine andere ID?
Sprich es ist ein andere Inhaltselement?

BTW: Ich sehe gerade dass du so eine Art Wechsel zwischen den Personen machen willst. Warum lädst du nicht alles von Anfang an und versteckst dann die Personen und veränderst die CSS-Eigenschaften (visibility: hidden der Elemente?

[minstyle]

Wäre möglich ja. Das Bild hat also eine andere ID?
Sprich es ist ein andere Inhaltselement?

Es gibt derzeit zwei Inhaltselemente (siehe HTML-Quelltext weiter oben):
1. Bild
2. Text

Komischerweise wird die ID des Bild-Artikels nicht angezeigt und stattdessen nur die CSS-Klasse "image_container".

[Toflar]

Das ist nicht komisch, du kannst eine ID vergeben, wenn du willst

Hast du mein "BTW" gelesen?

[minstyle]

Das ist nicht komisch, du kannst eine ID vergeben, wenn du willst

Die ID habe ich vergeben. Diese wird allerdings nicht im HTML-Quelltext angezeigt.

Hast du mein "BTW" gelesen?

Jetzt schon
Keine Ahnung wie das gehen soll ...

[Toflar]

Dann pass das Template analog demjenigen des Texts an. Müsste irgenwas mit $this->cssID oder so sein, das da stehen sollte Weiss ich nicht auswendig.

Hmmm, ich glaube da gab's so eine ähnliche Extension...ist ja wie Tabs.

Ansonsten werde ich evtl. mal ein Tutorial schreiben. Jetzt erst mal Feierabend

[minstyle]

Hmmm, ich glaube da gab's so eine ähnliche Extension...ist ja wie Tabs.

Das war das Zauberwort! Mit der Erweiterung [tabcontrol] konnte ich meine Bedürfnisse nun in die Tat umsetzen. Nochmals vielen Dank für deine/eure Hilfe!

[PixxelFriend]

Hallo,

ich habe alles wie hier beschrieben eigebunden und es funktioniert auch alles einwandfrei. Ich möchte aber bei jedem klick auf den Link das betreffende Inhaltselement neu nachladen.

Hat jemand eine Idee, wie ich das realisieren könnte?

[Toflar]

Könntest du noch ein bisschen konkreter werden?

[PixxelFriend]

Ich möchte die Zufallsbildfunktion von Typolight über die Oben genannte Funktionsweise aufrufen.

Folgender Code in mein Template integriert:

window.addEvent('domready', function() {
	var myRequest = new Request.HTML({
		method: 'get',
		url: 'ajax.php',
		onComplete: function(html) {
			$('RandomImage').set('text', '');
			$('RandomImage').adopt(html);
		},
		onFailure: function() {
			$('RandomImage').set('text', 'Es ist ein Fehler aufgetreten.');
		}
	});
  $('NextImage').addEvent('click', function(event){
	 event.stop();  
		myRequest.send('action=fmd&id=36&g=1');
	});
});

Ich habe ein Modul "Zufallsbild" angelegt und es im Seitenlayout einer Position zugewiesen:

<?php if(!isset($_GET['request'])): ?>
       <div id="RandomImage">
      		<?php echo $this->sections['RandomImage']; ?>
	</div>  
<?php else: echo $this->$_GET['request']; endif; ?>

Dann rufe ich wie hier beschrieben die Funktion über den Link mit der id="NextImage" auf. Das funktioniert auch, aber leider nur einmalig. Ich hätte aber gerne, dass man so oft man will auf den Link klickt und immer ein neues Bild angezeigt bekommt.

Lg Steffen

[Toflar]

1. Der Ajax-Request wird bei jedem Klick ausgeführt.

2. Was soll der ganze komische php-Kram in deinem Template?