Problem mit - undefined - finde nicht woran es liegt.

d3fischlein

Grünschnabel
Hallo!

Ich hoffe Ihr könnt mir weiterhelfen, versuche externe Inhalte am Ende meiner Seite zu verarbeiten.
Versuche das mit einer Kombination aus PHP und Javascript:

HTML:
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Test</title>
 </head>
 <body>
  <div id="test"></div>
	<div><p>anderer Inhalt...</p></div>
		<?php
		$zeile=(isset($zeile) ? $zeile : '');
		$testabc="http://www.donnerwetter.de/wetter/net/boxregio.mv?typ=2&plz=30159&color_bg=E8E7D6&color_hi=E8E7D6&color_txt=&width=150";
		$handle = fopen($testabc,"r");
		while (!feof($handle)) {
			$rohzeile=fgets($handle,20000);
			if (strlen($rohzeile) > 50){
				$rohzeile = chop($rohzeile);
				$zeile = $zeile.$rohzeile."\n";
			}
		}
		fclose($handle);
		$zeile=rawurlencode($zeile); ?>

		<script>
			var content=unescape('<?php echo $zeile;?>');;
			var somus="document.getElementById('test').innerHTML=" + content;
			var tmpFunc = new Function(somus);
			tmpFunc(); 
		</script>
 </body>
</html>

Die Box wird auch angezeigt nur nicht in den DIV mit der ID test, in den steht undefined nur finde ich nicht was undefined ist.
Habe ich was übersehen, einen Leichtsinnsfehler gemacht oder bin ich ganz auf den Flaschen weg?
Würde mich freuen wenn mir jemand behilflich sein könnte.

d3fischlein
 
oder bin ich ganz auf den Flaschen weg?

jo, das bist du.

Die Benutzung dieses Skriptes ist nun wirklich simpel und eindeutig erklärt : http://www.donnerwetter.de/wetter/net/

alles was du zum einbinden brauchst ist:

Code:
<div id="test">
  <script src="http://www.donnerwetter.de/wetter/net/boxregio.mv?typ=2&plz=30159&color_bg=E8E7D6&color_hi=E8E7D6&color_txt=&width=150"></script>
</div>

--kein php, kein javascript
 
@Quaese
So hier:

HTML:
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Test</title>
 </head>
 <body>
  <div id="test"></div>
	<div><p>anderer Inhalt...</p></div>
		
		<script>
			var content=unescape('document.writeln%28%27%3Cform%20name%3D%22hpwt%22%20method%3D%22post%22%20action%3D%22http%3A%2F%2Fwww.donnerwetter.de%2Fwetter%2Fnet%2Flink.mv%22%20target%3D%22_blank%22%3E%3Ctable%20border%3D%220%22%20cellspacing%3D%221%22%20cellpadding%3D%220%22%20bgcolor%3D%22%23E8E7D6%22%20width%3D%22150%22%3E%3Ctr%3E%3Ctd%3E%3Ctable%20border%3D%220%22%20cellpadding%3D%220%22%20cellspacing%3D%220%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Ctr%3E%3Ctd%20align%3D%22center%22%3E%3Cp%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%2F%22%20target%3D%22_blank%22%3E%3Cimg%20src%3D%22http%3A%2F%2Fstatic.donnerwetter.de%2Fimages%2Flogo115t.gif%22%20width%3D%22111%22%20height%3D%2264%22%20border%3D%220%22%3E%3C%2Fa%3E%3C%2Fp%3E%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%20align%3D%22center%22%3E%3Cp%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3EDi.%2017.9.2013%3C%2Ffont%3E%3Cbr%3E%27%29%0Adocument.writeln%28%27%3Cfont%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%20color%3D%22%23000000%22%20size%3D%222%22%3E%3Cb%3EHannover%3C%2Fb%3E%3C%2Ffont%3E%3C%2Fp%3E%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3E%3Ctable%20width%3D%22100%25%22%20border%3D%220%22%20cellspacing%3D%220%22%20cellpadding%3D%221%22%3E%27%29%0Adocument.writeln%28%27%3Ctr%3E%3Ctd%20align%3D%22left%22%20width%3D%2238%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Ca%20href%3D%22http%3A%2F%2Fdonnerwetter.de%2Fregion%2Fsuchort.mv%3Fsearch%3D30159%22%20target%3D%22_blank%22%3E%3Cimg%20src%3D%22http%3A%2F%2Fstatic.donnerwetter.de%2Fimages%2Fwetsymkl_1.gif%22%20alt%3D%22sonnig%22%20width%3D%2235%22%20height%3D%2225%22%20border%3D%220%22%3E%3C%2Ftd%3E%3Ctd%20align%3D%22left%22%20valign%3D%22middle%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3EMorgen%3C%2Ffont%3E%3C%2Ftd%3E%3Ctd%20align%3D%22right%22%20valign%3D%22middle%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3E6%26deg%3BC%3C%2Ffont%3E%3C%2Ftd%3E%3C%2Ftr%3E%27%29%0Adocument.writeln%28%27%3Ctr%3E%3Ctd%20align%3D%22left%22%20width%3D%2238%22%3E%3Ca%20href%3D%22http%3A%2F%2Fdonnerwetter.de%2Fregion%2Fsuchort.mv%3Fsearch%3D30159%22%20target%3D%22_blank%22%3E%3Cimg%20src%3D%22http%3A%2F%2Fstatic.donnerwetter.de%2Fimages%2Fwetsymkl_1.gif%22%20alt%3D%22sonnig%22%20width%3D%2235%22%20height%3D%2225%22%20border%3D%220%22%3E%3C%2Ftd%3E%3Ctd%20align%3D%22left%22%20valign%3D%22middle%22%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3EVormittag%3C%2Ffont%3E%3C%2Ftd%3E%3Ctd%20align%3D%22right%22%20valign%3D%22middle%22%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3E12%26deg%3BC%3C%2Ffont%3E%3C%2Ftd%3E%3C%2Ftr%3E%27%29%0Adocument.writeln%28%27%3Ctr%3E%3Ctd%20align%3D%22left%22%20width%3D%2238%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Ca%20href%3D%22http%3A%2F%2Fdonnerwetter.de%2Fregion%2Fsuchort.mv%3Fsearch%3D30159%22%20target%3D%22_blank%22%3E%3Cimg%20src%3D%22http%3A%2F%2Fstatic.donnerwetter.de%2Fimages%2Fwetsymkl_2.gif%22%20alt%3D%22heiter%22%20width%3D%2235%22%20height%3D%2225%22%20border%3D%220%22%3E%3C%2Ftd%3E%3Ctd%20align%3D%22left%22%20valign%3D%22middle%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3EMittag%3C%2Ffont%3E%3C%2Ftd%3E%3Ctd%20align%3D%22right%22%20valign%3D%22middle%22%20bgcolor%3D%22%23E8E7D6%22%3E%3Cfont%20size%3D%221%22%20color%3D%22%23000000%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3E14%26deg%3BC%3C%2Ffont%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%3C%2Ftd%3E%3C%2Ftr%3E%27%29%0Adocument.writeln%28%27%3Ctr%3E%3Ctd%20align%3D%22center%22%3E%3Cfont%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%20color%3D%22%23000000%22%20size%3D%221%22%3E%3Cb%3Emehr%20%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%2Fregion%2Fregion.hts%3Fplz%3D30159%22%20target%3D%22_blank%22%3E%3Cfont%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%20color%3D%22%23000000%22%20size%3D%221%22%3E%3Cb%3EWetter%20f%26uuml%3Br%20Hannover%3A%3C%2Fb%3E%3C%2Fa%3E%3Cbr%3E%3C%2Ffont%3E%27%29%0Adocument.writeln%28%27%3Cfont%20size%3D%221%22%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%2Fregion%2Fregion.hts%3Fplz%3D30159%22%20target%3D%22_blank%22%3Eheute%3C%2Fa%3E%20%26nbsp%3B%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%2Fregion%2Fmittelfrist.hts%3Fplz%3D30159%22%20target%3D%22_blank%22%3E14-Tage%3C%2Fa%3E%20%26nbsp%3B%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%2Fradar%2F%22%20target%3D%22_blank%22%3ERadar%3C%2Fa%3E%20%26nbsp%3B%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%2Fpollen%2Fregion.hts%3Fplz%3D30159%22%20target%3D%22_blank%22%3EPollenflug%3C%2Fa%3E%3Cbr%3E%3C%2Ffont%3E%27%29%0Adocument.writeln%28%27%3Cfont%20size%3D%221%22%20face%3D%22Verdana%2C%20Arial%2C%20Helvetica%2C%20sans-serif%22%3E%3Ca%20href%3D%22http%3A%2F%2Fwww.donnerwetter.de%22%20target%3D%22_blank%22%3E%3Cfont%20color%3D%22%23000000%22%3Ewww.Donnerwetter.de%3C%2Ffont%3E%3C%2Fa%3E%3C%2Ffont%3E%3C%2Ftd%3E%3C%2Ftr%3E%27%29%0Adocument.writeln%28%27%3C%2Ftable%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%3C%2Fform%3E%27%29%0A');
			var somus="document.getElementById(\"test\").innerHTML=" + content;
			var tmpFunc = new Function(somus);
			tmpFunc(); 
		</script>
 </body>
</html>

@abuzze
Ja da hast Du recht.
Nur was wenn der Server von donnerwetter mal länger braucht und ich hab das Script in oberen drittel der Seite eingebaut?
...
Richtig die Seite wartet bis donnerwetter antwortet und genau das möchte ich vermeiden.
 
Alsomal zu der Diskussion JS vs PHP.
Wenn du es via JS (AJAX) einbindest dann baut sich die Seite auf auch wenn donnerwetter noch nicht geantwortet hat und sobald donnerwetter da ist wird auch das eingeblendet.
Wenn du es via PHP einbindest dann wird die Seite erst geladen wenn donnerwetter geladen ist! Ausser du lieferst nicht die aktuelle Antwort von donnerwetter sondern eine zwischengespeicherte Version.

Damit das Design nicht verrutscht packst du den Code von Donnerwetter einfach in ein Div das genau die Grösse schon hat.

Aber jetzt mal ganz ehrlich, das was die da liefern ist total veraltet:
Javascript:
document.writeln('<form name="hpwt" method="post" action="http://www.donnerwetter.de/wetter/net/link.mv" target="_blank"><table border="0" cellspacing="1" cellpadding="0" bgcolor="#FFCC00" width="110"><tr><td><table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFF66"><tr><td align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"></font><table width="110" border="0" cellspacing="0" cellpadding="0"><tr><td valign="bottom" align="right"><a href="http://www.donnerwetter.de/" target="_blank"><img src="http://static.donnerwetter.de/images/block_wolke.gif" width="28" height="40" border="0"></a></td><td valign="bottom" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="2"><b>Berlin<br></b><font size="1">Di. 17.9.2013</font></tr></table></td></tr><tr><td>')
document.writeln('<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr align="center" valign="bottom" bgcolor="#FFCC00"><td><font size="1" color="#000000" face="Verdana, Arial, Helvetica, sans-serif">Abend</font></td><td><font size="1" color="#000000" face="Verdana, Arial, Helvetica, sans-serif">Nacht</font></td></tr>')
document.writeln('<tr align="center" valign="bottom"><td><a href="http://donnerwetter.de/region/suchort.mv?search=10000" target="_blank"><img src="http://static.donnerwetter.de/images/wetsym_3.gif" alt="wolkig" width="60" height="43" border="0"></a></td><td><a href="http://donnerwetter.de/region/suchort.mv?search=10000" target="_blank"><img src="http://static.donnerwetter.de/images/wetsym_n3.gif" alt="bewölkt" width="60" height="43" border="0"></a></td></tr>')
document.writeln('<tr align="center" valign="bottom" bgcolor="#FFCC00"><td><font face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="1">16&deg;C</font></td><td><font face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="1">7&deg;C</font></td></tr></table></td></tr>')
document.writeln('<tr><td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="1"><b>mehr <a href="http://www.donnerwetter.de/region/region.hts?plz=10000" target="_blank"><font face="Verdana, Arial, Helvetica, sans-serif" color="#000000" size="1"><b>Wetter f&uuml;r Berlin:</b></a><br></font>')
document.writeln('<font size="1"><a href="http://www.donnerwetter.de/region/region.hts?plz=10000" target="_blank">heute</a> &nbsp;<a href="http://www.donnerwetter.de/region/mittelfrist.hts?plz=10000" target="_blank">14-Tage</a> &nbsp;<a href="http://www.donnerwetter.de/radar/" target="_blank">Radar</a> &nbsp;<a href="http://www.donnerwetter.de/pollen/region.hts?plz=10000" target="_blank">Pollenflug</a><br></font>')
document.writeln('<font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="http://www.donnerwetter.de" target="_blank"><font color="#000000">www.Donnerwetter.de</font></a></font></td></tr>')
document.writeln('</table></td></tr></table></form>')

1. document.writeln finde ich persönlich schon mal nicht schön. Erst recht nicht von einer externen Quelle, aber naja so wird die Box wenigstens genau dort eingesetzt wo das Scriptlet platziert wird.
2. Das ganze Layout der Box ist mit gefühlten Tausend Tabellen aufgebaut. Und das ist total veraltet.
 
Danke für die Antwort.

Das mit den Div hatte ich auch schon gemacht, nur der Rest der später kommt wird dann auch nicht geladen, bzw. erst wenn donnerwetter geantwortet hat.

JS (AJAX) das ist das was ich gerne einbauen würde, hatte im netzt schon andere tut's gesehen, aber nicht verstanden.
Hier gibt's diesbezüglich ja auch welche, werd mal etwas stöbern.

Das mit den Tabellen stößt mir auch auf...

Deshalb weis ich aber immer noch nicht warum undefined ausgegeben wird.
 
Zuletzt bearbeitet:
schau mal hier, damit hole ich Wetterdaten von openweathermap und stelle sie mit einem Bild dar:

Javascript:
jQuery(document).ready(function() {
	$.ajax({
		type: "POST",
		url: "http://api.openweathermap.org/data/2.5/weather?q=City,County",
		dataType: 'jsonp'
	}).success(function(data) {

		var celsius = data['main']['temp']- 273.15;
		celsius = Math.round(celsius * 10) / 10;
		var bildpfad = "/images/weathericons/"+ data['weather'][0]['icon'] +".png";
		var bild = new Image();
		bild.src=bildpfad;
		bild.width=108;
		bild.height=70;
		$.get(bildpfad, function(data) {
			$(".weathericon").html(bild);
			$("#weatherstadt").html("City");
			$("#weathercelsius").html(celsius+" °C");
		});
		

	}).fail(function(jqXHR, textStatus) {
	});	
	
});

Um Same-origin policy zu umgehen benutze ich jsonp (Mit jQuery musst du dich nicht um Rückgabefunktion und so Zeugs kümmern).

Mehr über Openweathermap:
http://openweathermap.org/API
http://openweathermap.org/wiki/API/JSON_API


Die Bilder kannst du auch direkt von Openweathermap anziehen, im oberen Beispiel werden aber selbst designte Bilder verwendet.
http://bugs.openweathermap.org/projects/api/wiki/Weather_Condition_Codes
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück