Zum Inhalt springen

T3Sports (cfcleague) mit rgtabs

Erstellt am 18. August 2008 · 44 Antworten · letzte Antwort am 31. August 2008 · Seite 2 von 3

Tags: Frage

digedag ·
bastians schrieb

http://www.fvloechgau.de/typo3/index.php?id=367
Mich wundert hier, wieso die Spiele nicht geladen werden wenn ich eine andere Saison auswähle. Ist in mootools viell. Ajax nicht aktiviert?
Normal müsste der Ansatz, den wir hier erarbeitet haben doch auch ohne rgtabs funktionieren, sofern die Ajax-Bibliotek aktiviert ist oder?

Naja, hier hast du das Problem, daß die mootools.js auf der Seite überhaupt nicht eingebunden ist. rgtabs macht das automatisch aus der Extension heraus. Ohne rgtabs musst du die Datei dann selbst einbinden. 🙂

digedag schrieb

Ja das ist im Prinzip das gleiche. Du legst per TS neuen Seiten mit jeweils anderem Seitentyp an und bereitest da die Ausgabe vor.

Ah okay, ich muss jeweils Seitentypen definieren. Was passiert wenn ich den selben Seitentyp nehme?

Dann überschreibt die zweite Seite einfach die erste. Bei Typoscript zählt immer die letzte Angabe.

Ohje und ich dachte immer ich nerve mit solchen Fragen, aber Respekt vor deiner Geduld, finde ich echt super 🙂

Ist doch ein interessantes Thema. Und ich finde solche Lösungen demonstrieren auch gut die Leistungsfähigkeit von TYPO3. Ich bin immer wieder begeistert, was man in dem CMS allein durch Konfiguration alles realisieren kann! 8-)

bastians ·

Naja, hier hast du das Problem, daß die mootools.js auf der Seite überhaupt nicht eingebunden ist. rgtabs macht das automatisch aus der Extension heraus. Ohne rgtabs musst du die Datei dann selbst einbinden. 🙂

Ist nun eingebunden, aber funktioniert noch nicht.

Habe es zuerst damit versucht (aus der T3mootools Doku):

### Mootools einbinden ###
includeLibs.t3mootools = EXT:t3mootools/class.tx_t3mootools.php
page.10 = USER
page.10.userFunc = tx_t3mootools->addMooJS

Aber dann kam nur eine weiße Seite, der Quelltexte zeigte mir im Body nichts an.

Und nun habe ich es so:

page.headerData.100 = TEXT
page.headerData.100.value = <script type="text/javascript" src="typo3conf/ext/t3mootools/res/mootoolsv1.11.js"></script>
page.headerData.100.value = <script type="text/javascript" src="fileadmin/templates/js/t3sportscontent.js"></script>

Aber bringt wie gesagt niente.
Hier nochmals der Link:http://www.fvloechgau.de/typo3/index.php?id=367

Ist doch ein interessantes Thema. Und ich finde solche Lösungen demonstrieren auch gut die Leistungsfähigkeit von TYPO3. Ich bin immer wieder begeistert, was man in dem CMS allein durch Konfiguration alles realisieren kann! 8-)

Das stimmt, ich merke immer mehr zu was TYPO3 eigentlich im Stande ist. wird ja von vielen nicht umsonst als zu umfangreich beurteilt 😉

So, dann fange ich mal an mit designen 🙂

digedag ·
bastians schrieb

Habe es zuerst damit versucht (aus der T3mootools Doku):

### Mootools einbinden ###
includeLibs.t3mootools = EXT:t3mootools/class.tx_t3mootools.php
page.10 = USER
page.10.userFunc = tx_t3mootools->addMooJS

Aber dann kam nur eine weiße Seite, der Quelltexte zeigte mir im Body nichts an.

Verwendest du automaketemplate? Dann ist die page.10 vermutlich schon "besetzt". Wenn die 22 noch frei ist, dann könnte das funktionieren: 🙂

### Mootools einbinden ###
includeLibs.t3mootools = EXT:t3mootools/class.tx_t3mootools.php
page.22 = USER
page.22.userFunc = tx_t3mootools->addMooJS

Und nun habe ich es so:

page.headerData.100 = TEXT
page.headerData.100.value = <script type="text/javascript" src="typo3conf/ext/t3mootools/res/mootoolsv1.11.js"></script>
page.headerData.100.value = <script type="text/javascript" src="fileadmin/templates/js/t3sportscontent.js"></script>

Auch hier überschreibst du einfach einen bestehenden Wert (siehe Kommentare):

# Hier wird in der 100 ein Typoscript TEXT-Objekt definiert
page.headerData.100 = TEXT
# Diesem wird nun ein Wert zugewiesen
page.headerData.100.value = <script type="text/javascript" src="typo3conf/ext/t3mootools/res/mootoolsv1.11.js"></script>
# Und jetzt wird der Wert wieder überschrieben:
page.headerData.100.value = <script type="text/javascript" src="fileadmin/templates/js/t3sportscontent.js"></script>

Entweder machst du es so:

page.headerData.100 = TEXT
page.headerData.100.value (
 <script type="text/javascript" src="typo3conf/ext/t3mootools/res/mootoolsv1.11.js"></script>
 <script type="text/javascript" src="fileadmin/templates/js/t3sportscontent.js"></script>
)

Oder so:

page.headerData.100 = TEXT
page.headerData.100.value = <script type="text/javascript" src="typo3conf/ext/t3mootools/res/mootoolsv1.11.js"></script>
page.headerData.101 = TEXT
page.headerData.101.value = <script type="text/javascript" src="fileadmin/templates/js/t3sportscontent.js"></script>

Die Zahlen kannst du übrigens frei wählen. Sie dürfen nur noch nicht in Verwendung sein. Um das zu überprüfen, hilft dann die Allzweckwaffe TS-Object-Browser! 🙂

bastians ·

TYPO3 für Anfänger ist das hier 🙂 Danke.

Aber: Funktioniert leder alles nicht. Ajax ist aber aktiviert in T3Mootools.

digedag ·

Firebug meldet, daß es kein DIV mit der ID "matchs" mehr auf der Seite gibt... Das hast du bestimmt aus deinem HTML-Template "rausoptimiert". 😉

bastians ·
digedag schrieb

Firebug meldet, daß es kein DIV mit der ID "matchs" mehr auf der Seite gibt... Das hast du bestimmt aus deinem HTML-Template "rausoptimiert". 😉

Haha, ja das ist mir vorhin als ich unterwegs war auch eingefallen. Geht nun, aber das Loading-Image fehlt.

Und noch etwas allgemeines: habe mein eigenes Template gebastelt und eingebunden. Eigene CSS (via TS eingebunden) und eigene Klassen definiert.
Wechselt man nun die Saison, wird die Änderung dort nicht angezeigt. Wechsel ich wieder zurück wird auch hier wieder das Standard-Template angezeigt und meine Formatierungen sind futsch.
Ist das bei dir auch so? Cache habe ich geleert.

Habe nun auch versucht, die ein Profil zu erstellen und den Saison-Switch eingebaut. Wenn du es mal testest siehst du, dass er beim Wechsel die Spiele lädt. Liegt daran, dass ich den Page-Type nicht geändert habe bzw. dass man bei den Berichten kein Scope-Template angeben kann.
Absicht oder habe ich es übersehen? Bei der Ligaverwaltung gibt es ja ein extra Feld.

digedag ·
bastians schrieb

Und noch etwas allgemeines: habe mein eigenes Template gebastelt und eingebunden. Eigene CSS (via TS eingebunden) und eigene Klassen definiert.
Wechselt man nun die Saison, wird die Änderung dort nicht angezeigt. Wechsel ich wieder zurück wird auch hier wieder das Standard-Template angezeigt und meine Formatierungen sind futsch.
Ist das bei dir auch so? Cache habe ich geleert.

Also bei der Optik habe ich keine Probleme gesehen. Aber nach paarmal in den Tabs hin und her wechseln, erfolgt in der Select-Box kein Ajax-Request mehr... :o

Habe nun auch versucht, die ein Profil zu erstellen und den Saison-Switch eingebaut. Wenn du es mal testest siehst du, dass er beim Wechsel die Spiele lädt. Liegt daran, dass ich den Page-Type nicht geändert habe bzw. dass man bei den Berichten kein Scope-Template angeben kann.
Absicht oder habe ich es übersehen? Bei der Ligaverwaltung gibt es ja ein extra Feld.

Nee das ist keine Absicht. Das ist mir noch gar nicht aufgefallen. Wenn du schon ein Typoscript-Tab in deinem Plugin hast, dann kannst du das Template dort angeben:

scopeTemplate = fileadmin/datei.html
bastians ·
digedag schrieb
bastians schrieb

Und noch etwas allgemeines: habe mein eigenes Template gebastelt und eingebunden. Eigene CSS (via TS eingebunden) und eigene Klassen definiert.
Wechselt man nun die Saison, wird die Änderung dort nicht angezeigt. Wechsel ich wieder zurück wird auch hier wieder das Standard-Template angezeigt und meine Formatierungen sind futsch.
Ist das bei dir auch so? Cache habe ich geleert.

Also bei der Optik habe ich keine Probleme gesehen. Aber nach paarmal in den Tabs hin und her wechseln, erfolgt in der Select-Box kein Ajax-Request mehr... :o

Wenn du in den Select-Boxen hin- und herwechselst ist das bei dir nicht so, dass meine Formatierung überschrieben wird?
Bist du selbst erstaunt, wieso das so ist oder wie darf ich das Smiley deuten? 😉
Ich habe am Wochenende das DIV in welches geladen wird umbenannt, aber sowohl JS-Datei und das Spielplan-Template angepasst. Cache habe ich geleert. Habe auch mal das Modul für das Mannschaftsprofil entfernt, aber es ist immernoch da, obwohl gelöscht, Cache geleert...irgendwas läuft hier schief?!

Nee das ist keine Absicht. Das ist mir noch gar nicht aufgefallen. Wenn du schon ein Typoscript-Tab in deinem Plugin hast, dann kannst du das Template dort angeben:

scopeTemplate = fileadmin/datei.html

Okay, super, werde ich einbauen.
Werde auch mal eine Sammlung von TS-Code für T3sports anfertigen.

digedag ·
bastians schrieb
digedag schrieb

Also bei der Optik habe ich keine Probleme gesehen. Aber nach paarmal in den Tabs hin und her wechseln, erfolgt in der Select-Box kein Ajax-Request mehr... :o

Wenn du in den Select-Boxen hin- und herwechselst ist das bei dir nicht so, dass meine Formatierung überschrieben wird?
Bist du selbst erstaunt, wieso das so ist oder wie darf ich das Smiley deuten? 😉

Ja ich hab mich gewundert, warum mal geladen wird und dann wieder nicht. Zumal kein JS-Fehler auftritt. Ich hab die Ursache aber gefunden: Der neue Spielplan wird dann einfach in einem anderen Tab geladen. Also ich hab erst in Profile die Saison gewechselt. Danach das gleich unter Spielplan und nichts tut sich - anscheinend! Tatsächlich wird der Spielplan unter Profile wieder gewechselt. Da verschwinden übrigens auch die CSS-Formatierungen.

Ein Problem ist definitiv die Antwort des Ajax-Request. Schau dir mal den Quellcode dieser Seite an:
http://www.fvloechgau.de/typo3/index.php?id=herren1&cfc_league_fe[saison]=5&cHash=94b5a95a6e&type=500
In dieser Antwort ist wieder das DIV mit der ID matchs enthalten. Das ist falsch. Denn dieses gibt es ja schon auf der Seite. Es ist der Zielcontainer für den Ajax-Call. Nach dem Request ist es doppelt in der Seite enthalten. Damit hast du schon keinen validen HTML-Code mehr, da ID ausdrückt, daß es nur genau einmal auf der Seite vorhanden ist.

Also pack das DIV aus dem Template für den Ajax-Call raus. Außerdem benötigst du für jedes Tab ein eindeutiges DIV als Zielcontainer. Damit die Daten auch immer im richtigen Tab landen. Hier musst du dann die JS-Funktion searchUrl nochmal anpassen. Das Ziel-DIV muss mit als Parameter übergeben werden:

function searchUrl(url, divId) {
  var listDiv = $(divId).empty().addClass('rgtabs-ajax-loading');
  new Ajax(url, {
  method: 'get',
  update: $(divId),
  evalScripts: true,
  onComplete: function() {listDiv.removeClass('rgtabs-ajax-loading');}
  }).request();
}

Für den Spielplan muss der Aufruf dann in der Selectbox so aussehen:

<select name="action" onchange="searchUrl(this.options[this.selectedIndex].value, 'matchs');">

Bevor das nicht in Ordnung ist, brauchst du dich über andere Nebeneffekte nicht zu wundern... 😉

bastians ·

Aah, okay, ich brauche für jedes Tab einen eigenen DIV, okay.

Habe ich so umgesetzt, auch einen neuen Seiten-Typ angelegt (501) und das im Scope für das Profil hinterlegt. Irgendwie bekomme ich das DIV matchs aber nicht mehr heraus. Ich habe die DIVs der Tabs nun so benannt, dass immer ein "ajax_" davor steht, d.h. das DIV matchs existiert gar nicht mehr. Außerdem zeigt mir Firebug das DIV ja innerhalb meiner neuen "ajax_..."-DIVS an?!

Ich habe den Templates-Ordner von T3sports aus dem Hauptverzeichnis nach "fileadmin/templates/t3sports" kopiert. Im Hauptverzeichnis existieren sie noch. Anfangs hatte ich da das DIV "matchs" mal eingebaut, aber auch wieder gelöscht.

bastians ·

Jetzt lädt er nicht mehr den Spielplan bei den Profilen.
Ich hatte den neuen Seiten kopiert und die Zahl abgeändert, nicht jedoch den spezifischen TS-Code.
Alter Code:

profiles = PAGE
profiles {
  typeNum=501
  config.disableAllHeaderCode = 1
  config.metaCharset = utf-8
  config.additionalHeaders = Content-Type:text/html;charset=utf-8
  config.xhtml_cleaning = 0
  config.admPanel = 0
  config.sendNoCacheHeaders = 1
  config.no_cache = 1
  10 < plugin.tx_cfcleaguefe_competition
  10.action = tx_cfcleaguefe_actions_MatchTable
  10.clubSelection = 3
  10.groupSelection = 33
  10.saisonSelectionInput = 1
}

neuer Code:

profiles = PAGE
profiles {
  typeNum=501
  config.disableAllHeaderCode = 1
  config.metaCharset = utf-8
  config.additionalHeaders = Content-Type:text/html;charset=utf-8
  config.xhtml_cleaning = 0
  config.admPanel = 0
  config.sendNoCacheHeaders = 1
  config.no_cache = 1
}

Was mir hier auffällt.
Dieser Code:

  10 < plugin.tx_cfcleaguefe_competition
  10.action = tx_cfcleaguefe_actions_MatchTable
  10.clubSelection = 3
  10.groupSelection = 33
  10.saisonSelectionInput = 1

Der ist ja für ein bestimmtes Team.
Heißt das, dass ich am Ende für jedes Team pro DIV einen Seiten-Typ anlegen muss? D.h. bei 20 Teams und 4 Tabs 80 Seiten-Typen?

digedag ·
bastians schrieb

Habe ich so umgesetzt, auch einen neuen Seiten-Typ angelegt (501) und das im Scope für das Profil hinterlegt.

Von der Seite kommt aber noch kein Ergebnis:
http://www.fvloechgau.de/typo3/index.php?id=herren1&cfc_league_fe[saison]=6&cHash=61fdae8971&type=501

Irgendwie bekomme ich das DIV matchs aber nicht mehr heraus.

Also, ich kann es nicht mehr entdecken...

Ich habe die DIVs der Tabs nun so benannt, dass immer ein "ajax_" davor steht, d.h. das DIV matchs existiert gar nicht mehr. Außerdem zeigt mir Firebug das DIV ja innerhalb meiner neuen "ajax_..."-DIVS an?!

Paßt ja auch. Der Spielplan wird ja nun immer im richtigen Tab geladen.

Deine CSS-Formatierung geht übrigens verloren, weil in den Ajax-Templates die falschen Klassen verwendet werden: cfcleague-matchtable-row1. Du hast aber Formatierungen für matchtable1-row1...
Da kannst du dir mal die Web-Developer-Extension für Firefox mit installieren. Damit findet man die Ursache für solche Probleme auch schnell. 🙂

bastians ·

Da habe ich den Code gepostet, weiß nicht, ob du es vielleicht übersehen hast:
#8077140

Also, ich kann es nicht mehr entdecken...

Liegt wohl daran, dass ich den TS-Code vom Spielplan noch drin hatte.

Deine CSS-Formatierung geht übrigens verloren, weil in den Ajax-Templates die falschen Klassen verwendet werden: cfcleague-matchtable-row1. Du hast aber Formatierungen für matchtable1-row1...
Da kannst du dir mal die Web-Developer-Extension für Firefox mit installieren. Damit findet man die Ursache für solche Probleme auch schnell. 🙂

Ja, habe die Klassen in meinen Templates umbenannt. Auf der ersten Seite übernimmt er die ja auch, aber beim Wechsel nicht mehr. Wieso?

digedag ·
bastians schrieb

Da habe ich den Code gepostet, weiß nicht, ob du es vielleicht übersehen hast:
#8077140

Du musst jeweils einen anderen View einbauen. Der "View" wird durch "action" bestimmt. Beim Spielplan ist die action tx_cfcleaguefe_actions_MatchTable. Weitere Views sind:

  • tx_cfcleaguefe_actions_LeagueTableShow - Ligatabelle
    tx_cfcleaguefe_actions_Statistics - Statistik
    tx_cfcleaguefe_actions_TeamList - Teamliste
    tx_cfcleaguefe_actions_MatchCrossTable - Kreuztabelle
    tx_cfcleaguefe_actions_LeagueTableAllTime - Langzeittabelle

Die komplette Liste findest du in den XML-Dateien flexform_competition.xml und flexform_report.xml
Bei Report ist das Plugin dann aber plugin.tx_cfcleaguefe_report

bastians schrieb

Deine CSS-Formatierung geht übrigens verloren, weil in den Ajax-Templates die falschen Klassen verwendet werden: cfcleague-matchtable-row1. Du hast aber Formatierungen für matchtable1-row1...

Ja, habe die Klassen in meinen Templates umbenannt. Auf der ersten Seite übernimmt er die ja auch, aber beim Wechsel nicht mehr. Wieso?

Du hast doch bestimmt zwei HTML-Templates für den Spielplan. Eines für die Erstanzeige und ein zweites für die Ajax-Antwort. In letzterem sind die Klassen noch falsch...

bastians ·

Du musst jeweils einen anderen View einbauen. Der "View" wird durch "action" bestimmt. Beim Spielplan ist die action tx_cfcleaguefe_actions_MatchTable. Weitere Views sind:

  • tx_cfcleaguefe_actions_LeagueTableShow - Ligatabelle
    tx_cfcleaguefe_actions_Statistics - Statistik
    tx_cfcleaguefe_actions_TeamList - Teamliste
    tx_cfcleaguefe_actions_MatchCrossTable - Kreuztabelle
    tx_cfcleaguefe_actions_LeagueTableAllTime - Langzeittabelle

Die komplette Liste findest du in den XML-Dateien flexform_competition.xml und flexform_report.xml
Bei Report ist das Plugin dann aber plugin.tx_cfcleaguefe_report

Okay, die Teamliste habe ich in der Doku nicht gefunden, dann weiß ich ja nun, wo ich schauen muss.
Noch zwei Fragen zum Verständnis, dann sollte ich es kapiert haben:
1. Ich habe die Seiten-Typen im Setup des Haupttemplates eingefügt. Ist das richtig, oder soll ich für jede Unterseite ein eigenes Template anlegen?
2. Diesen Code gebe ich in jedem Seitentyp mit an:

10.clubSelection = 3
10.groupSelection = 33
10.saisonSelectionInput = 1

D.h. dann, dass ich für 20 Mannschaften, 4 Seiten-Typen anlegen muss (Profil, Spiele, Saison, Statistik)? Oder kann ich diesen Code auch ins TS-Feld des Plugins einbauen?

Du hast doch bestimmt zwei HTML-Templates für den Spielplan. Eines für die Erstanzeige und ein zweites für die Ajax-Antwort. In letzterem sind die Klassen noch falsch...

Nein, ich habe nur ein HTML-Template, wo und wie würde ich dann das für die AJAX-Antwort angeben? Per TS im Plugin?

Ohoh, danke danke für deine Geduld und Hilfe!

digedag ·
bastians schrieb

Noch zwei Fragen zum Verständnis, dann sollte ich es kapiert haben:
1. Ich habe die Seiten-Typen im Setup des Haupttemplates eingefügt. Ist das richtig, oder soll ich für jede Unterseite ein eigenes Template anlegen?

Das kannst du halten, wie du willst. Hauptsache die Templates sind am Ende im Haupttemplate mit eingebunden. Ich würde für den Ajax-Kram ein extra Template anlegen...

2. Diesen Code gebe ich in jedem Seitentyp mit an:

10.clubSelection = 3
10.groupSelection = 33
10.saisonSelectionInput = 1

D.h. dann, dass ich für 20 Mannschaften, 4 Seiten-Typen anlegen muss (Profil, Spiele, Saison, Statistik)? Oder kann ich diesen Code auch ins TS-Feld des Plugins einbauen?

Ähm, also du hast insgesamt zwei Plugin. Bei rgtabs gibst du ja deine Plugins an, indem du sie irgendwo in eine Seite legst. (Ich kenne rgtabs nur oberflächlich.). Mit dem Typoscript-Code für Ajax legst du ebenfalls nochmal Plugins an. Nur eben per Typoscript. Wenn du nun vier verschiedene Tabs hast, dann musst du auch vier Ajax-Seiten mit den entsprechenden Plugins/Views anlegen.

# Hier wird eine neue Seite angelegt
profiles = PAGE
profiles {
  # sie erhält einen speziellen TYP, der in der URL per Parameter type=501 mit angegeben werden muss.
  typeNum=501
  # Jetzt wird ein Inhalt in die Seite gelegt. In diesem Fall ein Plugin von T3sports
  10 < plugin.tx_cfcleaguefe_competition
  # Hier sagen wir dem Plugin, welcher View gezeigt werden soll
  10.action = tx_cfcleaguefe_actions_TeamList
  # Und hier wird der Scope festgelegt
  10.clubSelection = 3
  10.groupSelection = 33
  10.saisonSelectionInput = 1
}

Also alles, was du normalerweise per Flexform angibst, kannst und musst du hier per Typoscript konfigurieren. 🙂

digedag schrieb

Du hast doch bestimmt zwei HTML-Templates für den Spielplan. Eines für die Erstanzeige und ein zweites für die Ajax-Antwort. In letzterem sind die Klassen noch falsch...

Nein, ich habe nur ein HTML-Template, wo und wie würde ich dann das für die AJAX-Antwort angeben? Per TS im Plugin?

Im Code oben kannst du das Template für die Teamliste so angeben:

profiles {
  10.teamlistTemplate = fileadmin/teamliste.html
}

Schau dir mit dem TS-Objectbrowser die Konfiguration der beiden Plugins plugin.tx_cfcleaguefe_competition und plugin.tx_cfcleaguefe_report an. Dort findest du eigentlich alle notwendigen Informationen...