• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] mehrere Links zu Graphen manipulieren und auf HTML-Seite darstellen lassen

C

Caputo

New member
Ich habe keine JavaScript-Vorkenntnisse und auch nur ein grobes Verständnis von HTML. Zu meinem Problem habe ich zwar ein paar Suchtreffer gehabt, aber keine (vermeintliche) Lösung auch nur im Ansatz verstanden.

um was geht es:

Ich möchte über JavaScript mehrere Links (die alle gleich aufgebaut sind) zu Graphen manipulieren, und die ca. 26 Graphen alle auf einer einzigen Seite auflisten lassen.

Ich habe keine Möglichkeiten perl, phyton oder php zu nutzen, die Lösung muss zu 100% vom Browser interpretierbar sein. Daher kam ich auf die Idee JavaScript zu nutzen….

mein Problem:

Ich klicke mich auf einer Seite regelmäßig durch Wetterdaten. In einem Auswahlfenster muss man den gewünschten Ort auswählen, dann öffnet sich ein Fenster mit Detailinformationen. In diesem Fenster interessiert mich aber nur ein einziger Graph.
Um mir die ganze Klickerei zu ersparen, kam ich auf die Idee, mir die ganzen Graphen auf einer einzigen Seite anzeigen zu lassen.


mein Ansatz (der auch funktioniert):

Die Links sehen so aus:

HTML: 
http://www.test.de/graph/abcPage.php?ajax=1&sKey=Aaaa&sJahr=2015&sMonat=9&sTag=2
[...]
http://www.test.de/graph/abcPage.php?ajax=1&sKey=Zzzz&sJahr=2015&sMonat=9&sTag=2

Ich habe gemerkt, dass ich mir in einem Editor eine html-Seite erstellen kann, in dem die Graphen wie folgt aufgerufen werden und dargestellt werden können:

HTML: 
<iframe src="http://www.test.de/graph/abcPage.php?ajax=1&sKey=Aaaa&sJahr=2015&sMonat=9&sTag=2" width="250" height="150" frameborder="0" scrolling="no"></iframe>
[...]
<iframe src="http://www.test.de/graph/abcPage.php?ajax=1&sKey=Aaaa&sJahr=2015&sMonat=9&sTag=2" width="250" height="150" frameborder="0" scrolling="no"></iframe>


Problem ist, dass in den Links das aktuelle Datum steckt. Ich müsste also vor jedem Aufruf das Datum anpassen.

Also versuchte ich das mit JavaScript zu lösen.
Wie man das Datum auslesen kann, und wie man einen Link „zusammenbastelt“ habe ich herausgefunden.

Ich habe aber keinen Weg gefunden, diese Information in den Body zu gekommen.

Ob es geschickt ist <iframe> zu verwenden weiss ich nicht…..

Die Lösung soll sehr einfach und minimalistisch sein. Es reicht, wenn man die html-Seite lokal im Browser aufruft und sich die Graphen aufbauen, ohne irgendeine Eingabe zu machen. Um die Daten ggfs. zu aktualisieren, reicht mir ein Reload im Browser.

Falls mich jemand auf die richtige Fährte schubsen könnte, wäre ich dankbar.

Mein bisheriger Code:

HTML: 
<html>
<head>
  <title>Test</title>
</head>

<body>

<script type="text/javascript">

  var date=new Date();  
  var dd=date.getDate();  
  var mm=date.getMonth() + 1;  
  var yyyy=date.getFullYear();  

  var link1="http://www.test.de/graph/abcPage.php?ajax=1&sKey=Aaaa&sJahr="+yyyy+"&sMonat="+mm+"sTag="+dd+";
[...]

</script>
</head>

<body>

<p>Hier sollen die Graphen Aaaa bis Zzzz hintereinander aufgelistet werden:</p>

<iframe.....???</iframe>
[...]
<iframe.....???</iframe>

</body>
</html>



Caputo
 
Ich würde dafür ja einen Array mit den ganzen keys erstellen und dann durchiterieren.

Code: 
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>

<p>Hier sollen die Graphen Aaaa bis Zzzz hintereinander aufgelistet werden:</p>

<script type="text/javascript">
(function(){
	var today = new Date();
	var date = today.getDate();  
	var month = today.getMonth() + 1;  
	var year = today.getFullYear();  
	var link = "http://www.test.de/graph/abcPage.php?ajax=1&sKey={key}&sJahr={year}&sMonat={month}&sTag={date}";
	var keys = [
		"Aaaa",
		"...",
		"Zzzz"
	];
	keys.forEach(function(key){
		var iframe = document.createElement("iframe");
		iframe.src = link
			.replace(/\{key\}/g, key)
			.replace(/\{date\}/g, date)
			.replace(/\{month\}/g, month)
			.replace(/\{year\}/g, year);
		document.body.appendChild(iframe);
	});
}());
</script>

</body>
</html>
- ungetestet.

PS: für Beispiel-URLs sollte man example.org verwenden. test.de existiert ja und hat mit deinem Problem sicher nichts zu tun.
 
Vielen Dank! Funktioniert einwandfrei. Wenn ich mir den Code so anschaue, glaube ich, dass ich wohl noch Monate an einer Lösung gearbeitet hätte. :)
 
kkapsner schrieb:
Hoffe, du hast auch alles verstanden. Wenn nicht -> einfach fragen.
Zum Vergrößern anklicken....

Richtig verstanden habe ich den Code nicht. Ich verstehe die grobe Funktionsweise schon, aber nicht, warum der Code so aufgebaut ist, wie er aufgebaut ist - dafür fehlen mir noch zu viele Grundlagen.

Ich habe inzwischen versucht Deine Lösung zu erweitern, da mir ein kleiner aber entscheidener Designfehler unterlaufen ist.

Ich habe jetzt zwar die ganzen Graphen, aber es fehlt die Zuordnung zu den Städtenamen.
Da die Keys kryptisch sind, kann ich nicht einfach mit document.write die Keys über die Graphen ausgeben lassen, sondern muss die Städtenamen auch irgendwie in einem Array (?) hinterlegen.

Bisher habe ich versucht

a) in der bestehenden Funktion mit "var namen" ein weiteres Array einzufügen, in dem (in der passenden Reihenfolge zu den Keys) die Stadtnamen hinterlegt sind. Das wollte ich dann in Deinen Code so einbauen, das vor jedem "document.body.appendChild(iframe);" ein "document.write" den Stadtnamen ausgibt.
Hat aber nicht im Ansatz funktioniert. :)

b) innerhalb Deiner Funktion wollte ich eine weitere Funktion aufrufen, die die Stadtnamen ausgibt. Hat ebenfalls nicht funktioniert. Je länger ich darüber nachdenke, desto mehr komme ich zum Schluss, das Lösung b auch sowieso niemals funktionieren würde, da entweder die eine, oder die andere Funktion komplett durchrattern würde. Ich hätte dann wahrscheinlich erst alle 26 Graphen, und dann alle 26 Stadtnamen.....oder umgekehrt.



Lange Rede kurzer Sinn - falls Du mir einen Hinweis geben könntest, was der richtige Ansatz wäre, wäre ich Dir dankbar.
Bitte keine Lösung verraten, aber einen Ansatz. Ich bin so ahnungslos, dass ich ohne Tip wahrscheinlich noch Wochen im Dunkeln tappen würde. :)


Falls es wichtig ist - ich würde gerne über jeden Graphen den Stadtnamen als Link zur Original-Seite ausgeben wollen. Falls ich nämlich zu einem Graphen dann doch mal Detailinfos haben möchte, muss ich nur drauf klicken.
 
Ich würde keinen extra Array für die Namen machen, sondern einen Array, der aus lauter Objekten besteht, die dann gemeinsam Schlüssel und Namen enthalten:
Code: 
var cities = [
	{
		key: "aaa",
		name: "blablastadt"
	},
	...
];

Durch dieses Array kannst du dann genauso durchiterieren und hast dann gleich beide Eigenschaften zur Verfügung.

Ich rate immer von document.write() ab. Mit document.createElement() kannst du auch ein <a> erstellen, dem du dann alle entsprechenden Eigenschaften gibst.

Zu document.write:
http://www.w3.org/html/wg/drafts/html/CR/webappapis.html#dynamic-markup-insertion schrieb:
This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as if document.open( ) had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben