JS-Menü mit Daten aus SQL-DB per PHP füllen - Javascript & Ajax @ tutorials.de: Forum & Hilfe

BG-Tomson · 18.11.09, 13:23

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-Code:
                  
<?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-Code:
                  
                   	<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.11.09, 23:06

Moin,

du kannst solche Datenstrukturen in PHP bequem per json_encode() in eine direkt von JS verwendbare Form umwandeln.

BG-Tomson · 19.11.09, 02:49

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.11.09, 03:02

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.11.09, 03:15

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.11.09, 03:27

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.11.09, 00:20

Erstmal vielen Dank.

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

und dann folgendes probieren.

            
                    PHP-Code:
                  
<?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.11.09, 00:25

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.11.09, 13:23

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-Code:
                  
<?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-Code:
                  
                   	<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-Code:
                  
<?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.11.09, 16:40

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.

BG-Tomson · 22.11.09, 15:51

irgendwe habe ich das gefühl die funkton get_sub_menu() ist in der zeitbanner.php überhaupt nicht verfügbar. ich bekomme dort auch nix ausgegeben. hatte auch in der zeitbanner.php nochmal mit include(funktionen.php); die funktion an der stelle einzubinden, aber irgendwie ist das alles erfolglos.

BG-Tomson · 22.11.09, 20:24

Graube ich werde es morgennochmal versuchen und den ganzen js kram so gering wie möglich halten, also die zeitbanner.php ganz weg und die menuskript.js dann in menuskript.php umwandeln, so kmme ich nicht weiter, keine ahnung

**Sven Mintel** · 22.11.09, 22:07

Da lässt sich irgendwie nur schwer helfen, ich weiss ja nicht mal, wo du die Funktion stehen hast.

BG-Tomson · 23.11.09, 03:43

Jetzt ist es irgendwie ne unschöne Vermischung von JS und PHP

            
                    PHP-Code:
                  
<?php 

$totalButtons = 5;

$subInfo = get_sub_menu(1);

/*** SET BUTTONS' FILENAMES HERE ***/

for($i=0; $i<$totalButtons;$i++){

if ($i!=($zahl-1)) $f="r"; else $f="g";

$upSources[$i] = $f."button".($i+1)."up.png";

$overSources[$i] = $f."button".($i+1)."over.png";

}

// GENERATE SUB MENUS

for ($x=1; $x<=$totalButtons; $x++) {

    // SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU

    if (sizeof($subInfo[$x]) < 1 ) {

                ?><script type="text/javascript"> 

        document.write('<?php echo'<div id="submenu'.$x.'">';?>');

                </script><?php

    // SET DIV FOR BUTTONS WITH SUBMENU

    } 

        else 

        {

                ?><script type="text/javascript"> 

        document.write('<?php echo'<div id="submenu'.$x.'" class="dropmenu"';?>');

        document.write('onMouseOver="overSub=true;');

        document.write('setOverImg(\'' + (<?php echo $x; ?>) + '\',\'\');"');

        document.write('onMouseOut="overSub=false;');

        document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (<?php echo $x; ?>) + '\\\')\',delay);');

        document.write('setOutImg(\'' + (<?php echo $x; ?>) + '\',\'\');">');

        document.write('<ul>');

                </script><?php

        for ($k=0; $k<sizeof($subInfo[$x]); $k++ ) {

                ?><script type="text/javascript"> 

            document.write('<li>');

        document.write('<?php echo '<a href="'.$subInfo[$x][$k][menu_sub_url].'"';?>');

        document.write('<?php echo 'target="'.$subInfo[$x][$k][menu_sub_target].'"';?>');

        document.write('<?php echo $subInfo[$x][$k][menu_sub_text].'</a>';?>');

        document.write('</li>'); 

                </script><?php

       }    

                ?><script type="text/javascript"> 

              document.write('</ul>');

                </script><?php

      } 

     ?><script type="text/javascript"> 

     document.write('</div>');

     </script><?php

}

?>

Dann wird die Funktion aufgerufen und auch der Aufbau der Arrays ist Korrekt.

Nur Funktion ist weiter keine Vorhanden.

Weiß auch nicht so recht.

**Sven Mintel** · 23.11.09, 04:17

Schon vergessen?

Zitat:

Zitat von Sven Mintel

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