JS-Menü mit Daten aus SQL-DB per PHP füllen

BG-Tomson · 18. November 2009

Hallo Leute

Ich habe ein JS-Menü, welches ich nun dynamisch über eine Datenbank füllen möchte.
Leider bekomme ich die Übergabe der Daten von PHP zu JS nicht hin.

Der ganze Quelltext

Schritt für Schritt:
Hier wird die Datenbank ausgelesen:

Funktion der Datenbank

PHP:

<?php

if (!function_exists('get_sub_menu')){
	function get_sub_menu($menu_id){
		global $DB, $db_tab;	  
		$getsubmenu=$DB->query("
		SELECT menu_sub_id, menu_sub_order, menu_sub_text, menu_sub_url, menu_sub_target 
		FROM ".$db_tab['sub_menu']."
		WHERE menu_id=".$menu_id);
   	while ($submenu=$DB->fetch_array($getsubmenu)){
   	$sub_menu[]=$submenu;
		}
		return $sub_menu;
	}
}
?>

Zum anzeigen der Seite werden die JS Datein im head eingefügt.
/templates

HTML:

<html>
 <head>
  ...
  <script src="menu/zeitbanner.js" language="javascript" type="text/javascript"></script>
  <script src="menuscript.js" language="javascript" type="text/javascript"></script>
 </head>

Der Code in den Arrays soll aus der Datenbank kommen.
/menu/zeitbanner.js

Code:

upSources = new Array("button1up.png","button2up.png");

overSources = new Array("button1over.png","button2over.png");

// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
subInfo = new Array();
subInfo[1] = new Array();
subInfo[2] = new Array();


//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[2][1] = new Array("Mix 1","http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=1","");
subInfo[2][2] = new Array("Mix 2","http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=2","");
subInfo[2][3] = new Array("Mix 3","http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=11","");

Hier werden die Arrays verwendet.
/menuscript.js

Code:

...
//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if ( subInfo[x+1].length < 1 ) { 
		document.write('<div id="submenu' + (x+1) + '">');
	// SET DIV FOR BUTTONS WITH SUBMENU
	} else {
		document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
		document.write('setOutImg(\'' + (x+1) + '\',\'\');">');


		document.write('<ul>');
		for ( k=0; k<subInfo[x+1].length-1; k++ ) {
			document.write('<li>');
			document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
			document.write('target="' + subInfo[x+1][k+1][2] + '">');
			document.write(subInfo[x+1][k+1][0] + '</a>');
			document.write('</li>');
		}
		document.write('</ul>');
	}
	document.write('</div>');
}
...

Also nochmal:
also die Funktion

$menu = get_sub_menu(2);

Soll in die Daten für das Menü aus der Datenbank holen.

Ich habe dann

$menu[0][menu_sub_id] = 2;
$menu[0][menu_sub_order] = 1;
$menu[0][menu_sub_text] = "Mix 1";
$menu[0][menu_sub_url] ="http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=1";
$menu[0][menu_sub_target] = "";

$menu[1][menu_sub_id] = 2;
$menu[1][menu_sub_order] = 2;
$menu[1][menu_sub_text] = "Mix 2";
$menu[1][menu_sub_url] ="http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=2";
$menu[1][menu_sub_target] = "";

Zur Verfügung

Dieses soll nun vom Server (PHP) an den Clinet (JS) geschickt werden.

In der HTML-Datei habe ich die JS-Datei "/menuscript.js" aufgerufen, die benötigten Daten bekomme ich aber dort nicht rein, so habe ich sie vorerst in einer anderen JS-Datei per Hand reingeschrieben. Das ist natürlich nicht im Sinne des Erfinders. Diese Datei, hier "/menu/zeitbanner.js" genannt müsste umgeschrieben werden. Die Frage ist nur wie ich das mache.

Im Grunde müsste es in die Zeile:
subInfo[2][1] = new Array($menu[0][menu_sub_text], $menu[0][menu_sub_url], $menu[0][menu_sub_target]);
subInfo[2][2] = new Array($menu[1][menu_sub_text], $menu[1][menu_sub_url], $menu[1][menu_sub_target]);

Sven Mintel · 18. November 2009

Moin,

du kannst solche Datenstrukturen in PHP bequem per [phpf]json_encode[/phpf] in eine direkt von JS verwendbare Form umwandeln.

BG-Tomson · 19. November 2009

Könntest Du mir mal ein Beispiel schreiben, wie ich das mache? Kenn mich mit JS leider sogut wie gar nicht aus. Auch wenn das nun eine PHP-Fumkzion ist, weiß ich gerade nicht wie ich sie anwenden soll.

Vielen Dank im Vorraus.

Sven Mintel · 19. November 2009

Jo, ist halbsowild

Code:

<script type="text/javascript">
<!--
var menu=<?php echo json_encode($menu);?>;
//-->
</script>

...das ist schon alles

Du hast damit in JS eine Variable menu, welche quasi ein Clone des PHP-Arrays ist.
Beachte dabei, dass es in JS keine assoziativen Arrays gibt.
Du erhältst also ausgehend von deinem Beispiel mit

Code:

$menu[0][menu_sub_id] = 2;
$menu[0][menu_sub_order] = 1;
$menu[0][menu_sub_text] = "Mix 1";
$menu[0][menu_sub_url] ="http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=1";
$menu[0][menu_sub_target] = "";

$menu[1][menu_sub_id] = 2;
$menu[1][menu_sub_order] = 2;
$menu[1][menu_sub_text] = "Mix 2";
$menu[1][menu_sub_url] ="http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=2";
$menu[1][menu_sub_target] = "";

...einen Array mit 2 Elementen, diese beiden Elemente selbst sind jedoch Objekte.

BG-Tomson · 19. November 2009

In welcher Datei kann ich denn die PHP-Funktion die die Datenbank ausließ aufrufen? Das müsste dann doch schon in der new.php (siehe Quelltextdatei) passieren?

Sven Mintel · 19. November 2009

Du kannst das in der JS-Datei machen

Gebe der JS-Datei einfach die Endung *.php , und sende dort eingangs einen js-header:

Code:

<?php header('Content-Type:text/javascript');?>

Durch die geänderte Dateiendung wird die Datei nun auch von PHP verarbeitet.
Für den Clienten spielt die Dateiendung überhaupt keine Rolle, der bezieht seine Information darüber, was für eine Art Datei er geliefert bekommt, vom Server....und diese Information lieferst du über den header()

(nicht vergessen, die neue Dateiendung auch in den Pfadangaben in der HTML-Datei anzupassen)

BG-Tomson · 20. November 2009

Erstmal vielen Dank.

Ich habe die "menu/zeitbanner.js" umbenannt in "menu/zeitbanner.php"

und dann folgendes probieren.

PHP:

<?php 
header('Content-Type:text/javascript');
$menu = get_sub_menu(2);
?>

<script type="text/javascript">
<!--
var subInfo=<?php echo json_encode($menu);?>;
//-->
</script>

leider klappt das nicht

Sven Mintel · 20. November 2009

In einer externen JS-Datei darfst du keine HTML-Tags/Kommentare notieren.

Also nur dies:

Code:

<?php 
header('Content-Type:text/javascript');
$menu = get_sub_menu(2);
?>
var subInfo=<?php echo json_encode($menu);?>;

(die Funktion get_sub_menu() muss dort natürlich auch noch rein )

BG-Tomson · 20. November 2009

Wenn ich den Quelltext nun aufrufe, sehe ich das "Array" als objekt, nur wie könnten meine Funtionen in der "/menuskript.js" dort nun wieder drauf zugreifen?

Nochmal der Überbrick, was ich geändert habe.

Schritt für Schritt:
Hier wird die Datenbank ausgelesen:

Funktion der Datenbank

PHP:

<?php

if (!function_exists('get_sub_menu')){
	function get_sub_menu($menu_id){
		global $DB, $db_tab;	  
		$getsubmenu=$DB->query("
		SELECT menu_sub_id, menu_sub_order, menu_sub_text, menu_sub_url, menu_sub_target 
		FROM ".$db_tab['sub_menu']."
		WHERE menu_id=".$menu_id);
   	while ($submenu=$DB->fetch_array($getsubmenu)){
   	$sub_menu[]=$submenu;
		}
		return $sub_menu;
	}
}
?>

Zum anzeigen der Seite werden die JS Datein im head eingefügt.
/templates

HTML:

<html>
 <head>
  ...
  <script src="menu/zeitbanner.php" language="javascript" type="text/javascript"></script>
  <script src="menuscript.js" language="javascript" type="text/javascript"></script>
 </head>

Der Code in den Arrays soll aus der Datenbank kommen.
/menu/zeitbanner.php

PHP:

<?php 
header('Content-Type:text/javascript');
$sub_info = get_sub_menu(1);
?>
var subInfo=<?php echo json_encode($sub_info);?>;

upSources = new Array("button1up.png","button2up.png");

overSources = new Array("button1over.png","button2over.png");

Hier werden die Arrays verwendet.
/menuscript.js

Code:

...
//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if ( subInfo[x+1].length < 1 ) { 
		document.write('<div id="submenu' + (x+1) + '">');
	// SET DIV FOR BUTTONS WITH SUBMENU
	} else {
		document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
		document.write('setOutImg(\'' + (x+1) + '\',\'\');">');


		document.write('<ul>');
		for ( k=0; k<subInfo[x+1].length-1; k++ ) {
			document.write('<li>');
			document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
			document.write('target="' + subInfo[x+1][k+1][2] + '">');
			document.write(subInfo[x+1][k+1][0] + '</a>');
			document.write('</li>');
		}
		document.write('</ul>');
	}
	document.write('</div>');
}
...

Sven Mintel · 21. November 2009

Da wären ein paar Anpassungen notwendig, damit das mit dem json läuft, denn auf Objekte haben nicht die selben Eigenschaften wie Arrays(bspw. keine length, welche das Skript nutzt).

1.zeitbanner.php

Das müsste so aussehen, du benötigst ja 2 Submenues:

Code:

<?php 
header('Content-Type:text/javascript');

$subInfo=array(get_sub_menu(1),get_sub_menu(2))
?>
var subInfo=<?php echo json_encode($subInfo);?>;
upSources = new Array("button1up.png","button2up.png");

overSources = new Array("button1over.png","button2over.png");

2. menuskript.js

Code:

//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;


// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if ( subInfo[x].length < 1 ) { 
		document.write('<div id="submenu' + (x) + '">');
	// SET DIV FOR BUTTONS WITH SUBMENU
	} else {
		document.write('<div id="submenu' + (x) + '" class="dropmenu" ');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(\'' + (x) + '\',\'\');"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x) + '\\\')\',delay);');
		document.write('setOutImg(\'' + (x) + '\',\'\');">');


		document.write('<ul>');
		for ( k=0; k<subInfo[x].length; k++ ) {
			document.write('<li>');
			document.write('<a href="' + subInfo[x][k].menu_sub_url + '" ');
			document.write('target="' + subInfo[x][k].menu_sub_target + '">');
			document.write(subInfo[x][k].menu_sub_text + '</a>');
			document.write('</li>');
		}
		document.write('</ul>');
	}
	document.write('</div>');
}

Inwiefern da an den anderen beteiligten Funktionen etwas zu ändern ist, kann ich erst sagen, wenn ich sie kenne.

JS-Menü mit Daten aus SQL-DB per PHP füllen

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge