[FRAGE] JSON Ausgabe in H1 Element

Rollimen · 16. Aug. 2014

Einen schönen Samstag allen anwesenden.

Ich hoffe ich werde jetzt nicht gleich gesteinigt weil das Thema irgendwo schon xxx mal durchgekaut wurde aber ich ich hab keine Ahnung wonach ich suchen soll ausser JSON und das brachte mir keine Hilfe.

Zu meinem Problem:

Seit 2 Tagen beschäftige ich mit WebApp's, HTML hab ich schon einige Zeit verwendet und bin dann auf PHP umgestiegen. Jetzt der, mehr oder weniger, Neueinstieg in HTML5 CSS3 und Javascript und ich muss gestehen dass ich etwas überfordert bin.

Ich habe mir Video2Brain - Apps entwickeln mit HTML 5 und CSS 3 reingezogen und die Beispieldaten, sagen wir mal ein wenig zurechtgebastelt um ein Gefühl und Verständnis zu bekommen, aber.....

Ich weis nicht mehr weiter:

Hier mal meine HTML Datei:

HTML:

<!DOCTYPE>
<html>
	<head>
		<title>Sintra-Data</title>
		
		<link rel="stylesheet" href="style/jquery.mobile-1.4.3.min.css" />
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/jquery.mobile-1.4.3.min.js"></script>
		<link rel="stylesheet" href="style/styles.css" />
		<meta charset='UTF-8'>
		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<!-- Add to Homescreen Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="72x72" href="images/sintra_icon_klein.png" />
		<link rel="icon" sizes="128x128" href="images/sintra_icon_mittel.png" />
		<link rel="icon" sizes="196x196" href="images/sintra_icon_gross.png" />
		<link rel="icon" href="images/sintra_icon.png" />

		<!-- Add to Homescreen Apple -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="apple-touch-icon-precomposed" href="images/icon-ipad.png" sizes="72x72" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />
	</head>
	<body>
			
		<div data-role="page" id="daten">
			<div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="b">
				<a href="daten.html" data-role="button" data-icon="back" data-iconpos="notext"></a>
				<h1 id="header_title"></h1>
			</div>
			<div data-role="content" id="daten_details">

				<div data-role="collapsible">
					<h2>2.2 16V</h2>
						<ul id="benzin01" data-rule="listview" data-divider-theme="d">
						<li><a href=""></a></li>
						</ul>
				</div>

				<div data-role="collapsible">
					<h2>2.2 DTI 16V</h2>
						<ul id="diesel01" data-rule="listview" data-divider-theme="d">
						<li><a href=""></a></li>
						</ul>
				</div>

				<div data-role="collapsible">
					<h2>3.0 V6 24V</h2>
						<ul id="benzin02" data-rule="listview" data-divider-theme="d">
						<li><a href=""></a></li>
						</ul>
				</div>

			</div>				
			<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="b">
				<div data-role="navbar" data-theme="b">
					<ul>
						<li><a href="mein_sintra.html" data-icon="star" data-transition="fade">MEIN SINTRA</a></li>
						<li><a href="daten.html" data-icon="star" data-transition="fade" class="ui-btn-active">DATEN</a></li>
						<li><a href="notizen.html" data-icon="star" data-transition="fade">NOTIZEN</a></li>
					</ul>
				</div>
			</div>

			<script type="text/javascript">
			
			$('#daten').on("pageshow", function(){
				
				var daten_rubriken = sessionStorage.daten_rubriken;
				$.getJSON('daten_rubriken.json', function(data) {
					$.each(data.daten_rubriken, function(i,item) {
						if(item.name == daten_rubriken) {
							$('+item.name+').appendTo('#header_title');
						}				
					});
				});
			});	
			
			</script>
	
		</div>

	</body>
</html>

Die Daten aus der JSON Datei werden problemlos in der vorherigen Datei angezeigt bzw. aufgelistet und wenn ich dann auf eine der Rubriken klicke soll diese Datei aufgerufen werden und da sollte mittels dem Javascript der Name der Rubrik in der Header-Bar im H1 Element angezeigt werden. Aber egal was ich mache, es wird nichts angezeigt.
Mit PHP wäre es ja mehr als einfach zu lösen aber das funktioniert leider nicht wenn man die WebApp dann in eine APK Datei umwandelt um sie offline verwenden zu können also muss ich mir ohne PHP helfen. Die WebApp sieht aktuell so aus => Sintra-Data unter Daten und dann eine der Rubriken auswählen.

So ich hoffe ich habe alle Infos angegeben und verständlich erklärt wo mein Problem liegt, Danke schon mal vorab für Eure Hilfe.

Rollimen

kkapsner · 27. Aug. 2014

Rollimen schrieb:
HTML:

$('+item.name+').appendTo('#header_title');

Hab' mir das nicht so genau angehen, aber diese Zeile ist definitiv falsch. Du willst ja den Text, der in item.name gespeichert ist, ausgeben und nicht das Element, das auf den invaliden Selektor '+item.name+' zugreifen:

Code:

$('#header_title').append(item.name);

Rollimen · 27. Aug. 2014

Hallo kkapsner

Danke für den Tipp, leider funktioniert es trotzdem nicht. Vielleicht liegt der Fehler ja auch schon in der vorherigen Datei die die Daten in die sessionSorrage schreibt. Hier mal der Code der Seite:

HTML:

<!DOCTYPE html>
	<head>
		<title>Sintra-Data</title>
		
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.mobile-1.4.3.min.js"></script>
	
		<link rel="stylesheet" href="style/jquery.mobile-1.4.3.min.css" />
		<link rel="stylesheet" href="style/styles.css" />
		<meta charset='UTF-8'>
		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<!-- Add to Homescreen Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="72x72" href="http://forum.jswelt.de/images/sintra_icon_klein.png" />
		<link rel="icon" sizes="128x128" href="http://forum.jswelt.de/images/sintra_icon_mittel.png" />
		<link rel="icon" sizes="196x196" href="http://forum.jswelt.de/images/sintra_icon_gross.png" />
		<link rel="icon" href="http://forum.jswelt.de/images/sintra_icon.png" />

		<!-- Add to Homescreen Apple -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="apple-touch-icon-precomposed" href="http://forum.jswelt.de/images/icon-ipad.png" sizes="72x72" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />
	
	</head>
	<body>
	

		<div data-role="page" id="daten_rubriken">
			<div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="d">
				<a href="index.html" data-role="button" data-icon="home" data-iconpos="left" data-theme="d">Home</a>
				<h1>Sintra Daten</h1>
			</div>
			<div data-role="content">
				<ul id="daten_rubriken_liste" data-role="listview">
					
				</ul>
			</div>				
			<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="d">
				<div data-role="navbar" data-theme="d">
					<ul>
						<li><a href="mein_sintra.html" data-icon="star" data-transition="fade">MEIN SINTRA</a></li>
						<li><a href="daten.html" data-icon="star" data-transition="fade" class="ui-btn-active">DATEN</a></li>
						<li><a href="notizen.html" data-icon="star" data-transition="fade">NOTIZEN</a></li>
					</ul>
				</div>
			</div>
		
	<script type="text/javascript">
	
			$('#daten_rubriken').on("pageshow", function(){
				
				$('#daten_rubriken_liste').empty();
				
				$.getJSON('daten_rubriken.json', function(data) {
					$.each(data.daten_rubriken, function(i,item) {
						$('<li><a href="'+item.datei+'?kat='+item.kat+'" data-transition="slide" onClick="javascript:sessionStorage.daten_rubriken=\''+item.name+'\';"><img src="bilder/'+item.bild+'" /><h3>'+item.name+'</h3><p>'+item.untertitel+'</p></a></li>').appendTo('#daten_rubriken_liste');
					});
					$('#daten_rubriken_liste').listview('refresh');
				});
			});
	
	</script>

		
		</div>

	</body>
</html>

Wie gesagt, ich hab den Code aus Video2Brain "geklaut" und hier funktioniert er seltsamerweise. Kann es vielleicht mit der jquery Version zusammenhängen denn in dem Beispiel wird eine ältere Version verwendet ?

NACHTRAG: Hab gerade die Konsole vom Firefox aktiviert und die zeigt mir 2 Meldungen:

Code:

http://app.sintra.at/js/jquery.mobile-1.4.3.min.js is being assigned a //# sourceMappingURL, but already has one
Leerer String an getElementById() übergeben.

Kann das etwas damit zu tun haben ?

Rollimen

j-l-n · 27. Aug. 2014

Mir wird dieser Thread hier immer als neu angezeigt, aber der neue Beitrag ist verschwunden. Vermutlich wieder ein Problem mit dem Freischalten...

mikdoe · 27. Aug. 2014

Bei mir ist alles in Ordnung, nichts freizuschalten.

j-l-n · 27. Aug. 2014

mikdoe schrieb:
Bei mir ist alles in Ordnung, nichts freizuschalten.

Ja, das ist seltsam: als ich meinen Beitrag gepostet habe, wurde mir der Thread ganz normal als gelesen angezeigt und auch der Beitrag #3 war wieder da...

Rollimen · 28. Aug. 2014

Hat vielleicht daran gelegen dass ich unmittelbar nach dem Erstellen des Beitrags ihn bearbeitet habe.

Wie dem auch sei, hat irgend jemand eine Idee wie ich mein Problem behebn könnte ? Ich mag es nicht mit Extraseiten für jede Rubrik machen, wäre zwar am einfachsten schaut aber nicht wirklich gut aus.

kkapsner · 29. Aug. 2014

Ich hab' den Beitrag freigeschaltet.

Zum Problem: es gibt in deinem DOM, das dann auf der Seite angezeigt wird kein Element mit der ID "header_title"...

Rollimen · 29. Aug. 2014

Sorry aber das versteh ich jetzt nicht.

Ich hab doch hier das H1 Element mit der ID:

HTML:

<div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="b">
<a href="daten.html" data-role="button" data-icon="back" data-iconpos="notext"></a>
<h1 id="header_title"></h1>
</div>

mikdoe · 29. Aug. 2014

kkapsner schrieb:
Ich hab' den Beitrag freigeschaltet.

Welcher war denn bei dir freizuschalten?

kkapsner · 30. Aug. 2014

mikdoe schrieb:
Welcher war denn bei dir freizuschalten?

Der Erste und der Dritte.

Rollimen schrieb:
Ich hab doch hier das H1 Element mit der ID:

Äh... nö... auf der Produtivseite heißt das Teil "rubrik_titel".

Rollimen · 30. Aug. 2014

Guten Morgen

Bitte mich nicht für verrückt erklären aber ich find da nirgendwo ein Element mit der ID "rubrik_titel", überall steht "rubrik_title".

NACHTRAG: Bin wohl doch verrückt oder blind. War wohl noch nicht wach genug. Aber leider hat das auch nichts geändert, der Rubrik Titel wird noch immer nicht angezeigt

NACHTRAG 2: Hmm, hab jetzt mal den Browser Cache geleert und wenn ich die Seite aktualisiere erscheint der Titel aber nicht jeder, da gibt es wohl ein Problem mit dem Namen der Abstand und Sonderzeichen enthält. Was davon ist das Problem, das Leerzeichen oder das Sonderzeichen ?

In der JSON Datei hab ich z.B. den Eintrag:

Code:

"name": "Fahrwerk, Räder und Reifen",

der wird so nicht im Rubrik Titel angezeigt obwohl auf der vorherigen Seite der Text richtig angezeigt wird. Wenn ich das jetzt ändere in:

Code:

"name": "Fahrwerk, Räder und Reifen",

Wird der EIntrag als Titel angezeigt allerdings so => Fahrwerk, R�der und Reifen.

Wieso wird das Umlautzeichen unterschiedlich interpretiert bzw. wo liegt hier der Fehler?

Danke schon mal für eure Hilfe

Rollimen

j-l-n · 30. Aug. 2014

Rollimen schrieb:
Wieso wird das Umlautzeichen unterschiedlich interpretiert bzw. wo liegt hier der Fehler?

Der Fehler liegt darin, dass du vermutlich mit ISO-8859-1 arbeitest statt mit UTF-8.
Ich täte den Inhalt vor dem Speichern in JSON mit encodeURI() - JavaScript | MDN kodieren.

Rollimen · 30. Aug. 2014

Das hatte ich mir schon gedacht allerdings habe ich es nicht richtig gemacht. Dank meines Editors hab ich es aber jetzt geschafft, der hat über die Funktion "Konvertieren - unicode/ASCII/UTF8 nach UTF8 (ASCII-Bearbeitung)" die Datei entsprechend umgewandelt, nur mit der hat es geklappt, warum auch immer.

Auf alle Fälle Danke für die Hilfe allerdings bin ich mir sicher das da noch einige Fragen kommen werden denn je mehr ich über Javascript lese desto toller finde ich es aber hab auch ein paar Verständnisprobleme.

Schönes WE
Rollimen

NACHTRAG: Ich hätte da noch 2 Fragen betreffend GET Variable und Aufbau bzw. Struktur der JSON Datei, soll ich die gleich hier anhängen oder besser einen neuen Beitrag schreiben ?

rico2009 · 30. Aug. 2014

Rollimen schrieb:
NACHTRAG: Ich hätte da noch 2 Fragen betreffend GET Variable und Aufbau bzw. Struktur der JSON Datei, soll ich die gleich hier anhängen oder besser einen neuen Beitrag schreiben ?

Wenn sie inhaltlich zu diesem Thema passen, kannst du diese gerne hier anhängen. Wenn nicht, erstell ein neues Thema.

Rollimen · 30. Aug. 2014

OK, passt nur teilweise dazu also besser ein neues Thema, das hier kann als gelöst gekennzeichnet werden, Danke noch mal an alle.

Rollimen

[FRAGE] JSON Ausgabe in H1 Element

Rollimen

New member

kkapsner

Super Moderator

Rollimen

New member

j-l-n

Guest

mikdoe

Moderator

j-l-n

Guest

Rollimen

New member

kkapsner

Super Moderator

Rollimen

New member

mikdoe

Moderator

kkapsner

Super Moderator

Rollimen

New member

j-l-n

Guest

Rollimen

New member

rico2009

Guest

Rollimen

New member