Zum Inhalt springen

JavaScript in FE Plugin benutzen

Erstellt am 7. März 2008 · 7 Antworten · letzte Antwort am 14. März 2008

Tags: Frage

marces79 ·

Hallo Allerseits,

bei der Entwicklung eines FE-Plugins möchte ich z.B. für die Erstellung einer Baumstruktur JavaScript verwenden. Ich habe die Datei mittels

page.headerData.5 = TEXT
page.headerData.5.value = <script type="text/javascript" src="fileadmin/JS/my_Tree.js" language="JavaScript"></script>

eingebunden und rufe die Funktionen aus meinem Plugin z.B. mit:

$tree->printMenu();

auf. Das Problem ist nun, das der erzeugte Inhalt nicht wie gewünscht an der Stelle ausgegeben wir, wo ich ihn aufrufe. TYPO3 setzt die Ausgabe ganz an den Anfang der HTML-Seite (noch vor das HTML-Tag). Hat da jemand ne Ahnung was ich falsch mache???

Gruß Marces

marces79 ·

Erst mal danke für die schnelle Antwort.

Ich hab mir die Posts angeschaut, bin aber zu meinem Bedauern nicht schlauer geworden. Dort handelt es sich ja um einen JS Methoden-Aufruf.

Bei meinem Beispiel ist printMenu() jedoch eine Methode einer PHP Klasse und $tree ein Objekt, welches die Struktur als Array enthält.
Irgendwelche Vorschläge?

Gruß Marces

PS: Sorry für die ungenaue Beschreibung des Problems, aber ich befasse mich noch nicht sehr lange mit diesem Thema.

masterjcl ·

naja erst einmal solltest Du genau beschreiben was Du bezweckst bzw. was dabei rauskommen soll. Zum zweiten würde ich möglichst eine id wählen die größer 1000 ist um Konflikte mit dem Basissytem zu vermeiden.

page.headerData.5111 = TEXT

zB

mfg

marces79 ·

Hi,

also wie schon gesagt, es geht um die Erstellung einer Baumstruktur. Diese setzt sich aus von mir selbst erzeugten Content-Objekten zusammen, deren Hierarchische Struktur (Parent-Child Beziehung) in einer Tabelle gespeichert ist.
Um diese Struktur nun als hierarchisches Menü á la MS Explorer auf einer meiner T3-Seiten darzustellen, hab ich mich für die PEAR Klasse "HTML_TreeMenu" (http://pear.php.net/reference/HTML_TreeMenu-1.2.0/) entschieden. Diese PHP Klassen nutzten JS zur Erstellung der Baum-Struktur. Das mitgelieferte Beispiel (example.php) läuft bei mir mit einigen Anpassungen ohne Probleme.
Binde ich die JS-Datei nun aber über mein Root-Template in TYPO3 ein und übergebe in meinem FE-Plugin die Struktur-Daten aus der DB (via "HTML_TreeMenu_DHTML"-Objekt) an die Ausgabefunktion "printMenu()", funktioniert es nicht mehr:

$treeMenu = &new HTML_TreeMenu_DHTML($menu, array('images' => 'fileadmin/JSMenu/images', 'defaultClass' => 'treeMenuDefault'));
$my_menu = $treeMenu->printMenu();
return $my_menu;

Das erzeugte Menü wird an den Anfang der T3 Seite geschrieben und nicht in an die gewünschte Stelle im Body (das ist wohl auch der Grund wesshalb es im Browser nicht angezeigt und nur im Quelltext sichtbar ist).
Das Ergebnis im Browser sieht dann etwa so aus:

<script language="javascript" type="text/javascript">
//<![CDATA[
	objTreeMenu_1 = new TreeMenu("fileadmin/JSMenu/images", "objTreeMenu_1", "_self", "treeMenuDefault", true, false);
	 newNode = objTreeMenu_1.addItem(new TreeNode('First level', 'folder.gif', 'test.php', true, true, '', '', 'folder-expanded.gif'));
	 newNode.setEvent('onclick', 'alert(\'foo\'); return false');
	 newNode.setEvent('onexpand', 'alert(\'Expanded\')');
	 newNode_1 = newNode.addItem(new TreeNode('Second level', 'folder.gif', 'test.php', false, true, '', '', 'folder-expanded.gif'));
	 newNode_1_1 = newNode_1.addItem(new TreeNode('Third level', 'folder.gif', 'test.php', false, true, '', '', 'folder-expanded.gif'));
newNode_2 = newNode.addItem(new TreeNode('Second level, item 2', 'folder.gif', 'test.php', false, true, '', '', 'folder-expanded.gif'));
	 newNode_3 = newNode.addItem(new TreeNode('Second level, item 3', 'folder.gif', 'test.php', false, true, '', '', 'folder-expanded.gif'));

	objTreeMenu_1.drawMenu();
	objTreeMenu_1.writeOutput();
	objTreeMenu_1.resetBranches();
// ]]>
</script><!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is powered by TYPO3 
....
-->
	<link rel="stylesheet" type="text/css" href="fileadmin/styles/my_style.css" />
<script type="text/javascript" src="fileadmin/JSMenu/TreeMenu.js" language="JavaScript"></script>
	
<title>FTS 2</title>
<meta name="generator" content="TYPO3 4.1 CMS" />
<script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>

</head>
<body>

<div id="seite">
    <div id="kopf">
      <h1>PDM Tool</h1>
          <h2>FTS 2</h2>
	<!--
		BEGIN: Content of extension "pdm_test", plugin "tx_pdmtest_pi2"
	-->
	<div class="tx-pdmtest-pi2">

!!!! hier sollte eigentlich das erzeugt Menü (bzw. der JS Code stehen)

Ich hoffe, das ich mein Problem nun besser geschildert habe und mir jemand bei der Lösung behilflich sein kann.

MfG Marces

marces79 ·

und wo soll ich das einfügen?? Es handelt sich ja hier um JS Code.

Ich hab jedoch direkt nichts mit JS zu tun, da die PEAR Klasse HTML_TreeMenu zwar die Datei TreeMenu.js zur Darstellung benutzt, die Programmierung meinerseits(DB Abfrage, Erzeugen des Tree-Objekts und Ausgabe) ist aber komplett in PHP.

marces79 ·

Hi,

also ich hab immer noch kein Lösung für mein Problem gefunden. Ich hab die JavaScipt Dateien alle im Header korrekt eingebunden. Ich hab nun einen anderen Weg probiert die Struktur zu erstellen, allerdings mit einem ähnlich nicht-zufriedenstellenden Ergebnis.
Mit Hilfe dieser Funktion (my_build_hierarchy) wird ein Array erstellt (TREE_ITEMS), das später für eine JavaScript Methode verfügbar sein soll. Allerdings wird auch hier wieder der Code zu Beginn des HTML Dokuments ausgegeben; was natürlich keinen Sinn macht.
Hier die Funktion zur Array-Konstruktion:

function my_build_hierarchy($id, $vn, $tn, $idfn, $pidfn, $cfn, $lfn) {
		
		
	$select = 'tx_pdmtest_hparts.uid,' .
		'tx_pdmtest_hparts.name,' .
        	'tx_pdmtest_hparts.type,' .
		'tx_pdmtest_hparts.scope,' .
		'tx_pdmtest_hparts.properties,' .
		'tx_pdmtest_hparts.parent';
	$my_table = 'tx_pdmtest_hparts';
	$groupBy='';
	$orderBy='';
	$limit='';
	$where="$pidfn=$id";
		
	if ($id == 0) 
		echo 'var '.$vn.' = [';
		
		$result = $GLOBALS['TYPO3_DB']->exec_SELECTquery($select,$my_table,$where,$groupBy,$orderBy,$limit);   
		
		if (mysql_num_rows($result) == 0) return;
		while ($this->internal['currentRow'] = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($result)) {
			if(!$vn) echo ',';
			$vn = 0;
			$clink = $this->internal['currentRow']['name'];
			$cid = $this->list_id('uid');
			$cname = $this->internal['currentRow'][$cfn];
			echo " ['$cname', \"javascript:linkCheck('$clink')\", ";
			if($id == 0) echo "{'st':1}";
			else echo "0";
			$this->my_build_hierarchy($cid, $vn, $tn, $idfn, $pidfn, $cfn, $lfn);
			echo ']';
		}
		mysql_free_result($result);
		if($id == 0) echo "];";
		
		return;
		
	}

Hier wird die JS Methode tree aufgerufen, allerdings ist die Variable TREE_ITEMS hier nicht verfügbar, was sie aber sein sollte:

function my3_tree() {
		
		$out =
		'<div><script language="JavaScript">
			
			new tree (TREE_ITEMS, TREE_TPL);
		
  		</script></div>';
       return $out;
	}

Und so sieht dann das Ergebniss aus:

var TREE_ITEMS = [ ['Stapler', "javascript:linkCheck('Stapler')", {'st':1}, ['Fahrwerk', "javascript:linkCheck('Fahrwerk')", 0], ['Steuerung', "javascript:linkCheck('Steuerung')", 0], ['Räder', "javascript:linkCheck('Räder')", 0], ['Radmantel', "javascript:linkCheck('Radmantel')", 0], ['Radnabe', "javascript:linkCheck('Radnabe')", 0]]];<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is powered by TYPO3 - inspiring people to share!
...-->

<link rel="stylesheet" type="text/css" href="fileadmin/styles/my_style.css" />
<script type="text/javascript" src="fileadmin/tmenu/tree.js" language="JavaScript"></script>
<script type="text/javascript" src="fileadmin/tmenu/tree_tpl.js" language="JavaScript"></script>
<title>FTS 2</title>
	<meta name="generator" content="TYPO3 4.1 CMS" />
	<script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>

</head>
<body>
...

Ich bin echt für jeden Vorschlag dankbar, da ich echt nicht mehr weiter weiß #angry#

Gruß Marces