Ajax mit prototype und eID

Hier folgt ein kleines Beispiel, um eine selectbox mit Ajax zu füllen. In meinem Beispiel werden Städte nachgeladen, das Ereignis wird durch eine andere Selectbox ausgelöst.

Als erstes muss prototype geladen werden - ab TYPO3 4.x ist die Bibliothek dabei:

HTML
<script type="text/javascript" src="http://www.sk-typo3.de/typo3/contrib/prototype.js"></script>
 

Nun braucht es 2 JS-Funktionen im Head der Seite:

Javascript
function getCities() {
    var url = "index.php";
    var par1 = 2;
    var par2 = document.getElementById('some_id').value;
    var pars = "eID=myext_ajax&par1="+par1+"&par2="+par2;
    var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onComplete: updateCities});
}
 
 
function updateCities(orgRequest) {
    var xmldoc = orgRequest.responseXML;
    var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;
    document.getElementById('citydiv').innerHTML = result;
}
 
 

Um den Ajaxrequest einzuleiten, benutze ich eine Selectbox, in der im onchange-event die JS-Funktion getCities() aufgerufen wird.

Als letztes brauchen wir eine entsprechende php-Datei, die im Request ausgeführt wird, diese muss zuvor in der ext_localconf.php angemeldet werden:

PHP
$TYPO3_CONF_VARS['FE']['eID_include']['myext_ajax'] = 'EXT:myext/ajax.php';

und zum Abschluss noch die ajax.php, die das Ergebnis als XML-Dokument ausgibt:

PHP
<?php
 
// Exit, if script is called directly (must be included via eID in index_ts.php)
if (!defined ('PATH_typo3conf')) die ('Could not access this script directly!');
// Initialize FE user object:
$feUserObj = tslib_eidtools::initFeUser();
// Connect to database:
tslib_eidtools::connectDB();
 
$par1 = intval(t3lib_div::_GET('par1'));
$par2 = intval(t3lib_div::_GET('par2'));
 
// now generating the output
$res = '<select><option value="">alle</option></select>';
 
// and fire ...
$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Length: '.strlen($ajax_return_data));
header('Content-Type: text/xml');
 
echo $ajax_return_data;
exit;
?>

Das war schon alles. Bei Selectboxen sollte man darauf achten, das die komplette Selectbox zurückgegeben wird, da sonst der IE nicht mitspielt. Als Trick sitzt hier ein div mit einer ID drumrum, das upgedated wird.

15 Kommentare
#14 rockit schrieb am 26.02.2010 09:19

Vielen Dank!

Die Ajax-Request PHP-Datei muss, denke ich, nicht in der ext_localconf.php registriert werden, sondern im ordner typo3conf in der localconf.php

#15 Pedro Julio schrieb am 11.02.2011 10:40

Hallo Leute,

 

wieso muss den eID in localconf.php sein? Ich lese über all das dem eID in ext_localcof in myExt sein muss oder nicht?

 

Vielen Dank

#12 katjusha schrieb am 05.01.2010 19:33

stimmen denn die einzelnen codes überein? im JS-Block die Zeile

"var pars = eID=myextpar1=+par1+par2=+par2;" würde doch bedeuten, das eID=myext ist oder? und in der ext_localconf dann myext_ajax?

#13 steffen schrieb am 06.01.2010 18:55

korrekt. ich korrigiere es.

 

var pars = "eID=myext_ajax&par1="+par1+"&par2="+par2;

#11 Matthias schrieb am 15.09.2009 09:27

Vielen Dank für das super Tutorial, evtl. wäre es aber gut es noch zu überarbeiten und die vielen Syntax Fehler auszubessern?

Sicher bekommt man das als Programmierer so oder so hin, aber angenehmer wäre es, wenn es funktioniert wenn man es hier einfach mal 1:1 rauskopiert smile

#10 Andreas schrieb am 16.04.2008 01:28

Natürlich hats den Tag verschluckt. Also der richtige Pfad zum JS ist/typo3/contrib/prototype/prototype.js

 

TYPO3 V4.1.6

#9 Andreas schrieb am 16.04.2008 01:26

Super Anleitung! Vielen Dank.

 

Kleine Korrektur:

 

 

@Alexander, Frage 2:

$piVars = t3lib_div::_GET('extKey');

schreibt alle Variablen wie bekannt ins piVars.

#8 annett schrieb am 15.02.2008 11:09

Kann man das mal irgendwo im Einsatz sehen?

#7 Sebastian schrieb am 01.02.2008 13:50

Ich würde gerne die Ajax Funktionalität im BE nutzen, leider gibt es für BE Ext keine ext_localconf.php , wie und wo kann ich das so einbinden, das das auch in BE Modulen nutzen kann.

 

cu

basti

#6 Chris schrieb am 30.11.2007 16:38

Ich bin ein totaler js und ajax Anfänger. Ich komme überhaupt nicht klar.

 

Könnte vielleicht jemand von euch netterweise alles komplett Posten, mit den Selectboxen usw. Vielleicht überreise ich dann das Ganze.

 

Wäre total nett von euch.

 

:-)

 

Grüße Chris

#5 Ural Genc schrieb am 29.10.2007 16:57

Hallo Leute,

 

super Anleitung erstmal, funktioniert super.

 

Jetzt wollte ich während dem Ladeprozess ein Ladebildchen anzeigen lassen.

Habs mit Ajax.Request.Events = 'Complete'; probiert funtzt aber überhaupt nicht.

 

Habt ihr einen Rat?

 

VG

Ural

#3 Andre schrieb am 05.10.2007 16:57

Hallo zusammen,

 

hat jemand wie ich ebenfalls Probleme mit dem IE, der sich schwer tut, im responseXML Inhalt zu finden ...? Egal was ich mache, mein xmldoc.getElementsByTagName("data")[0] ist immer leer ...

#4 Andre schrieb am 05.10.2007 17:28

Ok, damit auch wirklich jeder blöde IE damit klar kommt, sollte die Ausgabe so aussehen:

 

// return

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');

header('Cache-Control: no-cache, must-revalidate');

header('Pragma: no-cache');

header('Content-Type: text/xml; charset=iso-8859-1');

header('Content-Length: '.strlen($content));

header('Content-Disposition: inline; filename=sample.xml');

 

echo '<?xml version="1.0" encoding="ISO-8859-1"?>';

echo $content;

exit;

einen Kommentar schreiben
Typo3