TYPO3 Typoscript AJAX Service HowTo
4. November 2008 von pulponairWer keine Lust hat sich für nen kleinen Ajax Service jedesmal ne Extension zu Schreiben kann das auch bequem per Typoscript machen. Im Folgenden ein kleines Beispiel, welches den letzten News Artikel einer übergebenen Kategorie (tt_news) anhand eines entsprechenden GET Parameters zeigt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | my_ajax_service = PAGE my_ajax_service { // Beliebige Typen Nummer typeNum = 4711 config { //Keinen Header, Keinen Body, kein Admin Panel disableAllHeaderCode = 1 xhtml_cleaning = 0 admPanel = 0 } // INT, da nicht gecached werden soll. 10 = COA_INT 10 { 10 = CONTENT 10 { table=tt_news select { selectFields = tt_news.uid,tt_news.title,single_pid // Wichtig die PID auf der die News liegen pidInList = 41 // Wir wollen ja latest orderBy = tt_news.tstamp DESC // jeweils nur den letzten. Und auch nur einen. max = 1 //Die Categorie Relation wird gejoind andWhere = uid_foreign= //und zwar anhand der GET Variablen catuid andWhere.dataWrap = |{GPvar:catuid} join = tt_news_cat_mm ON (tt_news.uid=tt_news_cat_mm.uid_local) JOIN tt_news_cat ON (tt_news_cat.uid=tt_news_cat_mm.uid_foreign) } //nun zur Darstellung renderObj.10 = TEXT renderObj.10.wrap = <h2>|</h2> renderObj.10.field = title renderObj.10.typolink { parameter.data = {field:single_pid} additionalParams = &tx_ttnews[tt_news]={field:uid} &tx_ttnews[backPid]={TSFE:id} additionalParams.stdWrap.insertData = 1 useCacheHash=1 } } } } |
Soweit so gut. Einen Hacken hat die Sache allerdings noch. Das ganze ist weder besonders gefeit gegen SQL injection noch fängt es fehlerhafte Parameter ab. Dem kann Abhilfe geschaffen werden:
15 16 17 18 19 | 10 = CONTENT 10 { if.isTrue.prioriCalc = intVal if.isTrue.data = GPvar:catuid ... |
Damit wird der CONTENT Block nur gerendert, wenn catuid gesetzt, nummerisch und grösser als Null ist.
Fein wäre jetzt auch noch eine Fehlermeldung, falls catuid ungültig ist. Auch das ist kein Problem:
57 58 59 60 61 62 | 20 = TEXT 20.value = FEHLER 20.if.isFalse.prioriCalc = intVal 20.if.isFalse.data = GPvar:catuid } } |
Damit wird dem COA ein weiter Block hinzugefügt, der nur angezeigt wird, wenn catuid ungültig ist.
Das Beispiel, speziel die Darstellung ist extrem simple gehalten. Natürlich lässt sich das beliebig erweitern. In diesem Fall wird einfach nur die Überschrift der entsprechenden News mit der auf der Kategorie hinterlegten Detailseite verlinkt.
Nun bedarf es nur noch des Passende JS codes um das betreffenden DIV auf ein Event hin upzudaten.
In jQuery sieht sowas dann so aus:
1 | $('#my_div').load('index.php', {type : '4711', catuid:xx}); |
In Prototype etwa so
1 2 3 | new Ajax.Updater('my_div', '/index.php', { parameters: { type : '4711', catuid:xx} }); |
“xx” muss natürlich durch die entsprechende Kategorie UID ersetz werden. Sinnvoller weise kapselt man das ganze noch in eine parameterisierbare Funktion und hängt es an ein Event (z.b. change von ner Selectbox oder click von nem Link)
Voila 
Am 9. September 2009 um 16:50 Uhr
Ich finde diesen Beitrag grandios!
Dennoch zwei Fragen:
Erste Frage:
Ist in Zeile zwei
1. my_ajax_service = PAGE
2. my_ajax_service_ajax {…..
das zweite _ajax im Namen richtig, oder Flüchtigkeitsfehler?
Zweite Frage:
Wenn ich Prototype nutzen will muss ich doch zunächst das Javascript einbinden:
page = PAGE
page.headerData {
10 = TEXT
10.value =
}
Doch wo rufen ich den von Dir beschriebenen Teil auf?:
new Ajax.Updater(’my_div’, ‘/index.php’, {
parameters: { type : ‘4711′, catuid:xx}
});
Ein Hinweis wäre klasse!
dp
Am 1. Oktober 2009 um 16:33 Uhr
Mja, das war in der tat ein flüchtigkeitsfehler….
Das Abfeuern des Ajax requests erledigst Du irgendwo auf der seite in dem Du dir bspw ein weiters TS snippet baust…