Zum Inhalt springen

Javascript Mootools läuft statisch, aber nicht über TS

Erstellt am 12. August 2012 · 3 Antworten · letzte Antwort am 13. August 2012

Tags: JavaScript & AJAX, Frage

Ideegestalten ·

Hallo zusammen,

ich habe eine statische HTML Seite als Template für einen Kunden angelegt.
Das eingebundene Accordion Menü funktioniert auch Wunderbar, solange ich das Menü nicht als HMENU generieren lassen.

Ich binde dafür wie folgt ein:

page.includeJS {
  file10 = fileadmin/rotator/js/mootools.js
  file20 = fileadmin/rotator/js/accordion.js
  }

Wie gesagt.. solange ich das Menu nicht über SUBPARTS definiert habe funktioniert es wunderbar.

Die Ausgabe über das HMENU ist auch identisch mit meiner Vorgabe. Also alle zu definierenden CLASS gesetzt. Augenscheinlich sieht man keinen Unterschied zwischen
meinem Template Source und dem gerenderten TS.

Gibt es hier was "ganz blödes" zu beachten oder hat einer ne Idee?! Wie gesagt.. alle Klassen, etc.. sind richtig gesetzt... JS lässt sich per Link im Source auch aufrufen.. daran kann es also nicht liegen.

Besten Danke euch

homy ·
Ideegestalten schrieb

Das eingebundene Accordion Menü funktioniert auch Wunderbar, solange ich das Menü nicht als HMENU generieren lassen.

Ohne HMENU kein Menü, das HMENU bildet die Basis der Menüs, es stellt dann dem T- oder G- Menü die Daten zur Verfügung. Hat dein TS-Code kein HMENU Konstruktor dürfte es nicht funktionieren.

Ideegestalten schrieb

Wie gesagt.. solange ich das Menu nicht über SUBPARTS definiert habe funktioniert es wunderbar.

Wie gesagt?? Vorhin sagtest du HMENU. Evtl. verwechselt du hier zwei Dinge, das HMENU ist für die Erstellung der Menüs zuständig, die SUBPARTS ordnen den Content (Menü, Texte, Bilder, Plugins, usw.) in dein HTML-Template ein.

Es wäre gut, wenn du uns deinen TS-Code zur Verfügung stellen würdest und außerdem sagst wie dein Menü nicht funktioniert, also zeigt es nur den Text an (dann Probl mit Javascript / CSS) oder zeigt es gar nix an (falscher SUB-Part im Template) usw.

Danke!

Ideegestalten ·

Moin,
macht natürlich Sinn den Source zu Posten, sorry.

Also mein Typoscript sieht so aus:

page.10 = TEMPLATE
page.10 {
      subparts {
               MENU_PRODUKTE = HMENU
  		MENU_PRODUKTE {
			special = directory
			special.value = 17
    		1 = TMENU
    		1 {
				
      			wrap = <ul>|</ul>
      			expAll = 1
      			NO {
        			allWrap = <li class="toggler">|</li>
      				}
     			ACT = 1
      			ACT {
        			allWrap = <li class="toggler active">|</li>
      				}
    			}
			2 < .1
			2 {
				wrap = <ul class="element">|</ul>
				NO {
        			allWrap = <li>|</li>
      				}
				ACT = 1
      			ACT {
        			allWrap = <li class="active">|</li>
      				}
				}
  		}
      }
}

Der HTML Source auf der Seite wird dann wie folgt, bedingt durch die Navi-Struktur auch richtig ausgeben:

<div id="accordion">
<ul>
<li class="toggler">
<a href="index.php?id=18" onfocus="blurLink(this);"  >Bohren</a></li>
<ul class="element">
<li><a href="index.php?id=40" onfocus="blurLink(this);"  >Produktgruppe 1</a></li>
<li><a href="index.php?id=41" onfocus="blurLink(this);"  >Produktgruppe 2</a></li>
<li><a href="index.php?id=42" onfocus="blurLink(this);"  >Produktgruppe 3</a></li>
</ul>
<li class="toggler"><a href="index.php?id=19" onfocus="blurLink(this);"  >Fräsen</a></li>
<ul class="element">
<li><a href="index.php?id=43" onfocus="blurLink(this);"  >Produktgruppe 1</a></li>
<li><a href="index.php?id=44" onfocus="blurLink(this);"  >Produktgruppe 2</a></li>
</ul>
<li class="toggler"><a href="index.php?id=22" onfocus="blurLink(this);"  >Messen</a></li>
<li class="toggler"><a href="index.php?id=23" onfocus="blurLink(this);"  >Schleifen & Trennen</a></li>
<li class="toggler"><a href="index.php?id=24" onfocus="blurLink(this);"  >Werkstattbedarf</a></li>
<li class="toggler"><a href="index.php?id=25" onfocus="blurLink(this);"  >Betriebseinrichtung</a></li>
</ul>		
</div>

Das Javascript wird auch richtig eingebunden und zeigt laut Web-Konsole
zwei Fehler an:

[08:29:22.736] TypeError: setting a property that has only a getter @ http: mootools.js
[08:29:22.183] TypeError: window.addEvent is not a function @ accordion.js

Das merkwürdige ist, dass ich den identischen Source als statische Vorlage angelegt habe. Ich bin die Ausgabe Zeile für Zeile durchgegangen und hab hier keinen Unterschied festgestellt. Mit anderen Worten... meine statische Vorlage funktioniert.. die identische Ausgabe via Typo3 generiert funktioniert nicht.

Bei der statischen Seite meldet das Javascript dann auch keinen Fehler. Daher meine wage Vermutung dass hier beim Rendern vielleicht eine "falsche" Reihenfolge stattfindet oder sowas.

Besten Dank noch mal

homy ·

Vielen Dank schonmal.

Also das erste was ich erkenne ist, dass er die Mootools JS nicht richtig lädt.

Fehler

[08:29:22.183] TypeError: window.addEvent is not a function @ accordion.js

Evtl. resultiert der Fehler aus CoolURL oder RealURL. Versuch mal die Pfadangaben in Verbindung mit deiner Domain:

page.includeJS {
  file10 = http://www.deinedomain.de/fileadmin/rotator/js/mootools.js
  file20 = http://www.deinedomain.de/fileadmin/rotator/js/accordion.js
  }

Außerdem achte darauf dass dein Initialisierungsskript

window.addEvent('domready', function(){
  new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
});

NACH den JS-Files kommt!

Ich hoffe das hilft weiter.