T3Sports (cfcleague) mit rgtabs

bastians · 18. August 2008 10:12

Hallo,

ich versuche gerade T3sports mit rgtabs einzusetzen. Habe drei Reiter (Profil, Spiele, Saison).
Folgendes Problem: wenn ich auf den Seiten eine Auswahl einbaue für die verschiedenen Saisons und diese anklicke, so springt er immer wieder zum ersten Reiter. das ist ungünstig für eine Saisonauswahl im zweiten Reiter "Spiele".
Was könnte man hier tun, dass er nicht mehr springt sondern die Aktualisierung direkt im ausgewählten Reiter vornimmt?

bastians · 18. August 2008 13:10

Ich denke, das Problem liegt daran, dass bei Auswahl einer anderen Saison, die Seite nicht via JavaScript sondern die Seite komplett neu geladen wird.

Kann man die Templates hier entsprechend anpassen?

digedag · 18. August 2008 17:14

Der Spielplan muss hier auch per Ajax geladen werden. Allerdings gibt es natürlich keinen fertigen JS-Code dafür. Für den Ajax-Request musst du eine neue Seite per TS einrichten, die ungefähr so aussehen muss:

company_list = PAGE
company_list {
  typeNum=500
  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
}

Diese Seite musst du mit dem zusätzliche type-Parameter ausrufen: index.php?id=1&type=500

Aber Vorsicht: Ohne weitere Parameter bekommst du einen Spielplan aller Spiele in der DB! 😉

bastians · 18. August 2008 17:23

Okay, aber wie ruft der die Seite automatisch auf? Geht das überhaupt oder muss ich sie direkt verlinken?

Wäre das nicht auch eine feature für zukünftige Versionen? Man kann im BE angeben, ob die Seite via AJAX geladen werden soll oder nicht.

digedag · 18. August 2008 18:32

bastians schrieb
Okay, aber wie ruft der die Seite automatisch auf? Geht das überhaupt oder muss ich sie direkt verlinken?

Na das ist genau die Stelle, an der du per JS einsetzen musst. Ein Ansatz wäre es, in die Selectboxen einen Event-Listener reinzusetzen, der bei einer Änderung aufgerufen wird. Das ist ja jetzt auch schon so. Nur das der Listener jetzt das Formular abschickt:

<select name="action" onchange="window.location=(this.options[this.selectedIndex].value);">

Statt dessen sollte ein Ajax-Request gestartet werden. Am besten solltest du dafür eine Bibliothek wie Prototype oder Mootools verwenden. Da musst du mal schauen, was rgtabs einsetzt. Die Bibliotheken kann man nämlich nicht parallel einsetzen.

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

/**
 * Start einer Suchanfrage per Ajax
 */
function searchUrl(url) {
  var listDiv = $('rgtabdiv').empty().addClass('ajax-loading');
  new Ajax(url, {
		method: 'get',
		update: $('rgtabdiv'),
		evalScripts: true,
		onComplete: function() {listDiv.removeClass('ajax-loading');}
  }).request();
}

Keine Garantie das der Code direkt funktioniert, aber die Richtung sollte schon stimmen. Der JS-Code funktioniert mit Mootools. Den Namen des DIVs (rgtabdiv) musst du natürlich anpassen!

Wäre das nicht auch eine feature für zukünftige Versionen? Man kann im BE angeben, ob die Seite via AJAX geladen werden soll oder nicht.

Das ist halt in der Einrichtung alles bissl umfangreich. Ich würde da einen Anleitung im Wiki bevorzugen. 🙂

bastians · 18. August 2008 18:37

Okay, vielen Dank. Der Ansatz hilft mir hoffentlich weiter.

Noch was anderes:
Deine Kenntnisse sowie deine Geduld sind vorbildlich 🙂

bastians · 19. August 2008 10:20

Kurz nochmal zum Verständnis:
den Beispielcode von dir, muss ich den komplett direkt in das T3Sports-Template einbauen oder nur die die Anweisung in die Selectboxen und den JS-Code in mein Haupt-Template?

digedag · 19. August 2008 11:10

bastians schrieb
Kurz nochmal zum Verständnis:
den Beispielcode von dir, muss ich den komplett direkt in das T3Sports-Template einbauen oder nur die die Anweisung in die Selectboxen und den JS-Code in mein Haupt-Template?

Das bleibt dir überlassen! Hauptsache die JS-Funktion ist am Ende im FE vorhanden. Andernfalls bekommst du nämlich einen JS-Fehler. Ich packe solche Javascript-Funktionen normalerweise in eine extra JS-Datei.
Hast du Firebug installiert? Das ist für solche Arbeiten ganz nützlich. 🙂

bastians · 20. August 2008 08:37

Ich habe Probleme das DIV zu finden, in das ich den Content laden soll. Firebug bringt mir folgenden Fehler:

$("rgtabs-container") is null
searchUrl("/index.php?id=herren1&no_cache=1&cfc_league_fe[saison]=5&cHash=94b5a95a6e")index.ph...1fdae8971 (Linie 529)
onchange(change )

Mein Scope-Template sieht so aus:

<!-- ###SCOPE_SELECTION### start -->

		<script>
		/**
		 * Start einer Suchanfrage per Ajax
		 */
		function searchUrl(url) {
		  var listDiv = $('rgtabs-wrapper').empty().addClass('ajax-loading');
		  new Ajax(url, {
		                method: 'get',
		                update: $('rgtabs-wrapper'),
		                evalScripts: true,
		                onComplete: function() {listDiv.removeClass('ajax-loading');}
		  }).request();
		}
		</script>
<div class="cfcleague-scopeselection">
<form style="margin:0; padding:0;" action="dummy.php" method="get">


<!-- Auswahl der Saison -->
###SAISON_SELECTION###
<div class="cfcleague-scopeselection-saison">
<!--
###SAISON_LINK_FIRST#### ##SAISON_NAME### ###SAISON_LINK_FIRST###
###SAISON_LINK_PREV#### ##SAISON_NAME### ###SAISON_LINK_PREV###
-->
   <select name="action" onchange="searchUrl(this.options[this.selectedIndex].value);"> 
###SAISON_SELECTION_2###
    <option ###SAISON_ISCURRENT### value="/###SAISON_LINK_URL###">###SAISON_NAME###</option>
###SAISON_SELECTION_2###
  </select>
<!--
###SAISON_LINK_NEXT#### ##SAISON_NAME### ###SAISON_LINK_NEXT###
###SAISON_LINK_LAST#### ##SAISON_NAME### ###SAISON_LINK_LAST###
-->
</div>
###SAISON_SELECTION###

digedag · 20. August 2008 10:10

Ich glaube den kompletten Container von rgtabs solltest du nicht austauschen. Da liegt ja auch die Auswahlbox mit drin. Leg einfach ein zusätzliches DIV um die Spielplanausgabe. Dieses DIV kannst du dann immer aktualisieren.

Das sollte schon mal klappen. Allerdings wirst du dann auf ein anderes Problem treffen: Die Auswahlboxen werden bald nicht mehr funktionieren... Aber schau erstmal, daß es überhaupt einmal klappt! 🙂

bastians · 20. August 2008 10:59

Ich vergaß das JS im Header. Habe prototype.js genommen, das kollidert nun glaube ich mit den rgtabs, da diese nun weg sind.

EDIT: mootools und prototype mögen sich ja nicht. Hmm...was nun?

digedag · 20. August 2008 12:58

Tja, du musst dich für eine Bibliothek entscheiden. 🙂
Da allerdings rgtabs Mootools verwendet, hast du kaum eine andere Wahl. Oder du programmierst rgtabs mit Prototype nach. 😉
Die Mootools sind aber eh besser!

bastians · 20. August 2008 13:06

Gut, dann versuche ich mich damit mal.
War dein Code auf prototyp ausgerichtet oder läuft der auch unter mootools?

bastians · 20. August 2008 16:20

bastians schrieb
Gut, dann versuche ich mich damit mal.
War dein Code auf prototyp ausgerichtet oder läuft der auch unter mootools?

auf mootools, wie auf Seite 1 zu lesen ist 😉

Habe die aktuellste Version mal hochgeladen:
http://www.fvloechgau.de/typo3/index.php?id=herren1&no_cache=1
Irgendwie tut sich nichts, sofern ich eine Lösung habe, kommt es in das Wiki, versprochen.

Du meintest, dass die Auswahlboxen nicht mehr richtig funktionieren würden. Inwiefern?

digedag · 20. August 2008 21:17

bastians schrieb
Habe die aktuellste Version mal hochgeladen:
http://www.fvloechgau.de/typo3/index.php?id=herren1&no_cache=1
Irgendwie tut sich nichts, sofern ich eine Lösung habe, kommt es in das Wiki, versprochen.

Ich schau's mir morgen früh mal an.

Du meintest, dass die Auswahlboxen nicht mehr richtig funktionieren würden. Inwiefern?

Erstmal sehen wir, daß der Ajax-Request überhaupt funktioniert und dann kümmern wir uns um die Lösung der Detailprobleme. 😉

digedag · 20. August 2008 21:58

Also die URL für den Ajax-Request ist schon mal falsch:

/index.php?id=herren1&amp;no_cache=1&amp;cfc_league_fe[saison]=6&amp;cHash=61fdae8971

Dein TYPO3 liegt in einem Unterverzeichnis, also musst du dieses in den Pfad mit aufnehmen. Außerdem fehlt der Parameter für den PageType, damit du wirklich die Ajax-Seite aufrufst.

Es sollte dann ungefähr in diese Richtung gehen:

/typo3/index.php?id=herren1&type=500&amp;no_cache=1&amp;cfc_league_fe[saison]=6&amp;cHash=61fdae8971

Beim Seitentyp musst du natürlich die Nummer nehmen, die du konfiguriert hast. Die 500 wie im Beispiel ist es ja anscheinend nicht. TYPO3 meldet nämlich Page not configured.

bastians · 21. August 2008 09:53

Sorry, vielen Dank für dein Bemühen aber irgendwie stehe ich auf dem Schlauch bzw. meine Kenntnisse sind zu beschränkt.

Ich muss zuerst eine Seite anlegen mit z.B. type=500 wie auf Seite 1 beschrieben.
Ich schaffe es aber nicht einen Bezug herzustellen bzw den type im Link unterzubringen...
Ich sollte es wohl lassen, wenn man sich zu wenig auskennt... #angry#

digedag · 21. August 2008 10:17

Ja ich hab's gestern Abend ja auch nur sehr grob skizziert. :o
Also die Zielseite für den Ajax-Request musst du schon einrichten, wie im Beispiel angegeben. Das sollte eigentlich soweit passen. Der Code kommt mit ins Typoscript-Template.

Mit dieser URL solltest du dann einen Spielplan erhalten:
http://www.fvloechgau.de/typo3/index.php?id=herren1&no_cache=1&cfc_league_fe[saison]=6&type=500

(Wie bekommt man eigentlich im Parameter id den Seitennamen rein, anstatt der Seiten-UID?? Das hab ich ja noch nie gesehen... :o )

Nun müssen die Links in der Selectbox angepaßt werden. Im HTML-Template sollte es dann so aussehen:

<option ###SAISON_ISCURRENT### value="/typo3/###SAISON_LINK_URL###&type=500">###SAISON_NAME###</option>

Es wird also das Unterverzeichnis noch mit integriert und am Ende der URL hängst du einfach noch den Typ fest mit ran. Das ist die einfachste Lösung.

Mir ist aufgefallen, daß bei ersten Laden der Seite das DIV mit dem Spielplan nicht mehr angezeigt wird. Es ist zwar im Quellcode vorhanden, aber unsichtbar. Das solltest du natürlich beheben. Hast du eventuell ein DIV nicht wieder richtig geschlossen?

bastians · 21. August 2008 10:59

Wenn du bei den Seiteneigenschaften unter "alias" einen Wert eingibst, wird dieser statt der UID ausgegeben 🙂

Welches DIV meinst du genau? Ich finde es nicht.

http://www.fvloechgau.de/typo3/index.php?id=herren1&no_cache=1

Jetzt klappt es, er lädt nur relativ lange, da er alle Spiele ausgibt.

digedag · 21. August 2008 12:32

Wenn du bei den Seiteneigenschaften unter "alias" einen Wert eingibst, wird dieser statt der UID ausgegeben 🙂

Haha, wieder was dazu gelernt! 🙂

Welches DIV meinst du genau? Ich finde es nicht.

Also wenn ich auf "Spiele" klicke erscheint bei mir im Firefox nur die Auswahlbox für die Saison, nicht aber die zugehörigen Spiele. Beim ersten Laden werden diese ja ohne Ajax eingebunden. Wenn ich mir den Quelltext der Seite anschaue, dann gibt es am Seitenende ein DIV mit der id="matchs". Und dort ist auch ein Spiel drin...

Jetzt klappt es, er lädt nur relativ lange, da er alle Spiele ausgibt.

Das war zu erwarten, weil du ja nur per Parameter die Saison einschränkst. Zusätzlich muss nun auch noch der Club gesetzt werden. Man könnte das per Request machen, wenn du aber eh nur die Spiele deines Vereins zeigen willst, dann kannst du das auch per TS machen:

spielplan = PAGE
spielplan {
  typeNum=500
  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 = 1
  10.groupSelection = 1
}

Also den clubSelection und groupSelection sind hier neu drin. Du musst jeweils die entsprechende UID eintragen. Die Alterklasse brauchst du natürlich nur, wenn du mit mehreren Alterklassen arbeitest.

Um das an der Stelle nochmal kurz zu verdeutlichen: In dem Objekt 10 liegt ganz normal das Wettbewerbsplugin von T3sports drin. Hier können nun alle Konfiguration und Formatierungen des Plugins vorgenommen werden. Du kannst also auch das HTML-Template wechseln oder die Größe der Logos setzen.

Aber weiter mit deiner Seite: Wenn ich die Selectbox anklicke, dann erhalte ich nun auch den JS-Fehler, daß kein Objekt Ajax gefunden wurde. Ich dachte ja die rgtabs arbeiten schon mit Ajax. Dem ist aber wohl nicht so.
Du hast doch bestimmt die Mootools-Extension installiert. Geh mal in deren Backend-Modul. Da kannst du auswählen, welche Teilbibliotheken geladen werden sollen. Mach da mal noch ein Häkchen bei Ajax mit rein und lass die Datei neu erstellen. Das sollte helfen. 🙂