Home | 2008 | 11 | 04 | TYPO3 Typoscript AJAX Service HowTo

TYPO3 Typoscript AJAX Service HowTo

4. November 2008 von pulponair

Wer 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.

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 =

|

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:

    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:

    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:

$('#my_div').load('index.php', {type : '4711', catuid:xx});

In Prototype etwa so

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 :)

2 Reaktionen zu “TYPO3 Typoscript AJAX Service HowTo”

  1. Damian

    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

  2. webmaster

    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…

Einen Kommentar schreiben