Antworten zum Thema „Javascript-Problem - Nur Online“

CoffeeToGo · 23.05.2009

Hi,

ich habe folgendes sehr seltsames Javascript-Problem (bzw. jquery). Ich habe ein Lader-Script, das aus einer XML Datei ein Menü lädt. Dieses Script sieht so aus:

Code:

$(document).ready(function(){
						   
			$.get('data/data.xml', function(d){
											
					var myList = $('<ul/>').attr('id', 'menu')
											
					$(d).find('menu').each(function(){
													
						
				   
						var $menu = $(this);
						var title = $menu.attr("title");  
						var link = $menu.attr("link");
						
						var item = $('<li/>');
						$('<a/>').attr('href', link).text(title).appendTo(item);
						item.appendTo(myList);	
					   
						
					});
				$('#left').append(myList);
				   
			},'xml');
 
});

Lokal ausgeführt, d.h. die zugehörige Seite mit Firefox oder Safari geöffnet, funktioniert alles problemlos. Lade ich das ganze auf einen Server ist dem nicht mehr so. Stattdessen gibt es folgenden Fehler in Firefox (Konsole):

Code:

Fehler: $('<a/>').attr('href', link) is undefined

Warum das so ist, ist mir völlig schleierhaft, denn nach meinem Verständnis wird ein Javascript immer lokal ausgeführt und müsste dann doch am gleichen Rechner immer gleich funktionieren. Wer weiß Hilfe?

Alexander

P.s.: Ich hoffe es ist nicht so schlimm, dass ich die Frage bereits im XHTML Subforum gestellt habe, aber ich dachte, da es ein explizites Scriptproblem ist, wäre ein Thread gerechtfertigt.

bigpaul · 23.05.2009

AW: Javascript-Problem - Nur Online

Kannst du mal den Link zur Datei reinstellen?
Dann könnte man sich das mal angucken.
Wär einfacher..

CoffeeToGo · 23.05.2009

AW: Javascript-Problem - Nur Online

Selbstverständlich. Das ganze ist zu bewundern. Merci.

devilofcrash007 · 24.05.2009

AW: Javascript-Problem - Nur Online

wo issen da nen menü? hab das im mozilla 3 und im IE8 geöffnet, und kann kein menü finden...

CoffeeToGo · 24.05.2009

AW: Javascript-Problem - Nur Online

Genau das ist das Problem. Es ist kein Menü da. Das sollte per Javascript erzeugt werden, was lokal auch funktioniert. Online erzeugt das Script leider einen Fehler (s.o.) und es erscheint kein Menü.

Ich verstehe nur nicht warum.

devilofcrash007 · 24.05.2009

AW: Javascript-Problem - Nur Online

aber warum willst de des denn als javascript einblenden lassen? gibt doch einige varianten wie man das machen kann... oder versteh ich dein sin grad ned..

r3nt5ch3r · 24.05.2009

AW: Javascript-Problem - Nur Online

devilofcrash007 schrieb:
aber warum willst de des denn als javascript einblenden lassen? gibt doch einige varianten wie man das machen kann... oder versteh ich dein sin grad ned..

Stimmt, das frag ich mich auch. Damit schließt du (total grundlos) alle User aus die kein JavaScript aktiviert haben. Desweiteren wird die xml über einen Ajax Request geladen, welcher ein weiterer sinnloser Server-Request darstellt.

Zu deinem Problem: Ich kann auch nichts finden, lokal läuft es und auf einem Server von mir läuft es auch nicht. Also es liegt schonmal nicht an deinem Server...

devilofcrash007 · 24.05.2009

AW: Javascript-Problem - Nur Online

so wie ich das mal vermute willst du mit javascript die links erzeugen lassen / anzeigen lassen, diese nur als normale textlinks sichtbar sind korrekt?, dann mach das doch einfach als text datei... wenn du mit dem gedanken spielst, mehr links in naher zukunft rein zusetzen und das ned unbedingt ins design oder so eintragen wollst, dann mach das ganze doch in php und include ne datei inder dann die links stehen...

CoffeeToGo · 24.05.2009

AW: Javascript-Problem - Nur Online

Hey,

zuerst einmal vielen Dank für eure große Hilfe und Bemühen. Ich habe das ganze mit JS und XML gelößt, da ich in Zukunft noch Links hinzufügen werde und so umgehen wollte, dass ich das immer in den einzelnen HMTL-Dateien ändern muss.
Meine PHP Kenntnisse sind leider noch schlechter als die von JS. Wenn PHP die bessere Lösung ist, dann würde ich das ändern (wenn mir jemand die Stichworte gibt, nach denen ich suchen muss wäre ich dem sehr dankbar).

Oder gibt es noch einfacherer Lösungen (Frames sind für mich eigentlich keine), mit denen man das Menü nicht direkt in den Quelltext schreibt?

Alexander

r3nt5ch3r · 24.05.2009

AW: Javascript-Problem - Nur Online

PHP:

<?
$xmlMenu = simplexml_load_file('./data/data.xml');
foreach ($xmlMenu as $menu){
    ?><a href="<? echo $menu['link'] ?>" class="<? echo $menu['class'] ?>" title="<? echo $menu['title'] ?>"><? echo $menu['title'] ?></a><?
}
?>

PHP:

<?
$xmlMenu = simplexml_load_file('./data/data.xml');
foreach ($xmlMenu as $menu){
    echo '<a href="' . $menu['link'] . '" class="' . $menu['class'] . '" title="' . $menu['title'] . '">' . $menu['title'] . '</a>';
}
?>

Such es dir aus (oben für die Menschen die Template-basiert denken, unten für die Normalos die gerne auch mal im PHP Code HTML ausgeben xD)

CoffeeToGo · 25.05.2009

AW: Javascript-Problem - Nur Online

Vielen Dank für die große Mühe.
Leider habe ich von php tatsächlich noch weniger Ahnung als ich dachte. Wie bindet man sowas überhaupt sinnvoll ein? einfach als Script in den jeweiligen Container schreiben erscheint mir doch wenig sinnvoll. Wie macht das der Fachmann?
Ich würde mich auch schon wahnsinnig über eine Quelle freuen, wo ich solche Basics nachlesen kann (die sollte allerdings Dummy-geeignet sein ;-)).

Alexander

Sturmkraehe · 25.05.2009

AW: Javascript-Problem - Nur Online

r3nt5ch3r schrieb:
PHP:

<? $xmlMenu = simplexml_load_file('./data/data.xml'); foreach ($xmlMenu as $menu){ ?><a href="<? echo $menu['link'] ?>" class="<? echo $menu['class'] ?>" title="<? echo $menu['title'] ?>"><? echo $menu['title'] ?></a><? } ?>

PHP:

<? $xmlMenu = simplexml_load_file('./data/data.xml'); foreach ($xmlMenu as $menu){ echo '<a href="' . $menu['link'] . '" class="' . $menu['class'] . '" title="' . $menu['title'] . '">' . $menu['title'] . '</a>'; } ?>

Such es dir aus (oben für die Menschen die Template-basiert denken, unten für die Normalos die gerne auch mal im PHP Code HTML ausgeben xD)

doch, diesen code (eins von beiden) musst du einfach anstelle deines JS codes einfügen!

also so:
<div id="left">
<?php
$xmlMenu = simplexml_load_file('./data/data.xml');
foreach ($xmlMenu as $menu){
?><a href="<? echo $menu['link'] ?>" class="<? echo $menu['class'] ?>" title="<? echo $menu['title'] ?>"><? echo $menu['title'] ?></a><?
}
?>
</div>

lg
Sturmi

CoffeeToGo · 25.05.2009

AW: Javascript-Problem - Nur Online

Mein Javascript steht extern und ich fand, dass das eigentlich eine gute Lösung ist, da ich das ganze dann nicht immer in allen Dateien ändern muss. Aber php-Scripte kann man nicht einfach wie JS in den Header schreiben oder?

Alexander

r3nt5ch3r · 25.05.2009

AW: Javascript-Problem - Nur Online

Mein Javascript steht extern und ich fand, dass das eigentlich eine gute Lösung ist, da ich das ganze dann nicht immer in allen Dateien ändern muss.

Mit meinem Vorschlag kannst du genau dieselbe xml-Datei benutzen und du hast es auch nur an einer Stelle (wenn du es richtig machst)?!

Aber php-Scripte kann man nicht einfach wie JS in den Header schreiben oder?

Nein, PHP ist rein serverseitig (zum Glück).

Du solltest dir wirklich ein paar Tutorials zu php anschauen.
-> Einstieg wenn du Erfahrung in irgendeiner Programmiersprache hast:
-> Anfänger:

Sturmkraehe · 25.05.2009

AW: Javascript-Problem - Nur Online

Hallo,
also ich habs dir mal "hingebastelt",
2 Anmerkungen:
1. Das Menü weiß doch garnicht das es in "links" sein muss, du solltest es schon aufrufen...!
2. Was hast du bitte hier gemacht:

PHP:

<script src="php/menu.php" type="text/php"></script>

PHP ist serverseitig, das hat mit dem browser nichts zu tun, mit PHP kann man HTML code generieren oder verändern.

index.php

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ulmer und Ulbricht | Rechtsanwälte und Steuerberater</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>


</head>

<body>
	<div id="container">
    	<div id="header"><h1>Ulmer &amp; Ulbricht</h1><h2>Rechtsanwälte &amp; Steuerberater</h2>
        </div>
        
         <div id="left">
<?
$xmlMenu = simplexml_load_file('./data/data.xml');
foreach ($xmlMenu as $menu){
    ?><a href="<? echo $menu['link'] ?>" class="<? echo $menu['class'] ?>" title="<? echo $menu['title'] ?>"><? echo $menu['title'] ?></a><br /><?
}
?> 
      </div>

        
        <div id="content">
          <h3>Home          </h3>
          <p>Willkommen auf der Website Ihrer Kanzlei Ulmer und Ulbricht.</p>
          <p>Wir freuen uns über Ihren Besuch unseres neu gestalteten Webauftritts und wünschen Ihnen viel Spaß und umfassende Information. Sollten Sie Fragen haben scheuen Sie sich nicht uns zu kontaktieren. Wir freuen uns schon jetzt auf eine erfolgreiche Zusammenarbeit um Ihr Problem zu lösen.</p>
          <p>Ihre Kanzlei</p>
          <p>Ulmer &amp; Ulbricht</p>

        </div>
        
        <div id="footer">
        <hr /> Copyright Ulmer &amp; Ulbricht | 2008
        </div>
        
   	</div>



</body>




</html>

css/style.css

Code:

@charset "UTF-8";
/* CSS Document */

/* Layout */

body {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	cursor:default;
	background-color:#FFFFFF;
	}
	
#container {
	font-family:Arial, Helvetica, sans-serif;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background-color: #FFFFFF;
	margin-top: 0px;
	}
	
#header {
	width:100%;
	background-color:#FFFFFF;
	background-image: url(../logo.jpg);
	height: 50px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-bottom: 10px;
	}
	
#left {
	float:left;
	width:150px;
	padding:0px 0px 0px 0px;
	margin: 1px 0px 5px 0px;
	}
	
#content {
	border-left:1px solid #CC0000;
	border-top:1px solid #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 160px;
	text-align:justify;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	white-space: 3;
	line-height: 1.3em;
	min-height:200px;
		}

#footer {
	clear:both;
	width:100%;
	padding:3px 0px 5px 0px;
	font-size:10px;
	color:#666666;
	}

/* Schriften */

.spacer {
	width: 100%;
	height: 15px;
}

h1 {
	font-size:24px;
	color:#333333;
	font-weight:100;
	letter-spacing: 0em;
	line-height:0.1em;
	font-family: sans-serif;
	}
	
h2 {
	font-size:14px;
	color:#CCCCCC;
	font-weight:100;
	line-height:0.1em;
	}

h3 {
	font-size:18px;
	color:#333333;
	font-weight:100;
	}
	
h5 {
	color:#000000;
	font-weight: bold;
	line-height: 1em;
	font-size: 13px;
	}
	
h6 {
	color:#999999;
	line-height: 1em;
	font-size: 12px;
	font-weight: lighter;
	}
	
hr {
	border: 1px;
	border-color:#CC0000;
	color: #CC0000;
	background-color: #CC0000;
	height: 1px;
	width: 100%;
	text-align: left;
}


ul#menu, ul#menu ul {
	list-style-type:none;
	margin: 10px;
	padding: 0;
	width:100%;
}

ul#menu a {
	display: block;
	text-decoration: none;
	color: #333333;
}

ul#menu li {
}

ul#menu li a {
	color: black;
	padding: 0.3em;
	font-weight:bold;
}

ul#menu li a:hover {
	color: #CC0000;
}

ul#submenu {
	text-decoration:none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
	}
ul#submenu  li a {
	width:150px;
	float:left;
	font-weight: bolder;
	color: #000000;
	text-decoration: none;
	}
.subcontent {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-left:10px;
	line-height: 1.5em;
	list-style-type: square;
	display:block;
	height:auto;
	}
	
.acc {
	list-style:none;
	padding-left: 0px;
	margin-bottom: 10px;
	margin-top: 10px;
	height: auto;
	}

.acc_header {
	color:#000000;
	text-decoration:none;
	font-weight: bold;
	font-size: 13px;
	}
	
.acc li {
	margin-top: 10px;
	margin-bottom: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CC0000;
	padding-top:10px;
}

data/data.xml

Code:

<?xml version="1.0" encoding="utf-8"?><menu>
<menu title="Home" class="main" link="index.html">
	</menu>
<menu title="Philosophie" class="main" link="philosophie.html">
	</menu>
<menu title="Aktuelles" class="main" link="aktuell.html">
	</menu>
<menu title="Biografien" class="main" link="biografien.html">
	</menu>
<menu title="Rechtsberatung" class="main" link="rechtsberatung.html">
	</menu>
<menu title="Steuerberatung" class="main" link="steuerberatung.html">
	</menu>
<menu title="Kontakt" class="main" link="kontakt.html">
	</menu>
<menu title="Impressum" class="main" link="impressum.html">
	</menu>
</menu>

js/jquery-latest.js
enfällt

lg
Sturmi

P.S.
ein weiteres + ist das Traffik reduziert wird da die js datei nicht jedesmal wieder runtergeladen wird!