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

[FRAGE] Variable mit GET übergeben und Inhalt verarbeiten

R

Rollimen

New member
Hallo Leute

Ich bin mir nicht sicher ob das was ich vorhabe richtig bzw. sinnvoll ist aber ich stehe vor folgendem Problem:

Ich habe in meiner WebApp Sintra-Data den Bereich Daten wo ich 6 verschieden Kategorien habe, je nach Auswahl sollen dann die entsprechenden Daten ausgegeben werden.

Da es mir einfach erschien habe ich den Kategorien Nummern zugewiesen und diese im Link angegeben => daten_details.html?kat=1

Um die Variable "kat" mittels Javascript auszulesen habe ich schon ein wenig rumgesucht und erstaunt festgestellt das es viele verschiedene Möglichkeiten gibt.

Nun zu meiner Frage:

Ich möchte die GET Variable auslesen und entsprechend dem Inhalt eine gleichnamige JSON Datei auslesen. Kann mir jemand sagen wie ich das am besten machen oder ist meine Idee nicht so das richtige und es gibt eine "einfachere/bessere" Lösung dafür ?

Danke schon mal für Eure Tipps.
Rollimen
 
Zuletzt bearbeitet:
Sorry, hab ich vergessen zu erwähnen, PHP geht leider nicht da die WebApp in eine apk Datei umgewandelt wird und da funktioniert leider kein PHP. Wäre ja auch sonst zu einfach.
 
Danke für den Link, die Seite hab ich mir schon öfters angeschaut weil sie bei meiner Suche immer wieder aufgetaucht ist. Es gibt dort auch noch andere Lösungsmöglichkeiten, leider macht es mein schlechtes Englisch nicht gerade eifach und die diversen Übersetzungstools liefern auch nicht unbedingt hilfreiche Texte.

Du schreibst "kompliziert und fehleranfällig", hast du außer PHP denn vielleicht eine andere Lösung ? Da ich ja erst am Anfang stehe, sowohl mit der WebApp als auch mir Javascript möchte ich es natürlich "richtig lernen". Das mit GET kam mir eigentlich nur durch PHP in den Sinn, vielleicht wäre es ja einfacher wenn ich den Dateiname der JSON Datei direkt in die vorherige JSON Datei schreibe und mit in die sessionStorage packe um sie dann hier "einfach" anfrage ? Oder gibt es noch andere Lösungen ?
 
Rollimen schrieb:
Du schreibst "kompliziert und fehleranfällig", hast du außer PHP denn vielleicht eine andere Lösung ?
Zum Vergrößern anklicken....
Solange es sich nur um den einen Parameter in der URL handelt, kannst du den schnell und problemlos mit JavaScript auslesen:
Code: 
var param = "kat";
var query = window.location.search;
var get = decodeURIComponent(query.substr(1, param.length));
 
Okay, das ist soweit klar und ich hab das jetzt versucht umzusetzen allerdings hab ich da wohl einen Denkfehler denn ich erhalte die Fehlermeldung "SyntaxError: missing ) after argument list".

Die Meldung ist zwar klar aber ich finde nicht wo die Klammer fehlt.

So sieht mein Javascript aus:

Code: 
			<script type="text/javascript">
			
			$('#benzin01').on("pageshow", function(){

				var param = "kat";
				var query = window.location.search;
				var get = decodeURIComponent(query.substr(1, param.length));				
					
					$.getJSON(get'+.json', function(data) {
						$.each(data.benzin01, function(i,item) {
							$('<li><h3>'+item.info+'</h3><p>'+item.inhalt+'</p></li>').appendTo('#benzin01');
						});
			
							$('#benzin01').listview('refresh');
					});
			});	
			
			</script>

Ich gehe mal davon aus dass der Fehler wohl in dieser Zeile liegt....

Code: 
$.getJSON(get'+.json', function(data) {

....oder liege ich da falsch ?
 
Rollimen schrieb:
Ich gehe mal davon aus dass der Fehler wohl in dieser Zeile liegt....
Code: 
$.getJSON(get'+.json', function(data) {
Zum Vergrößern anklicken....
Ja, die Verknüpfung der Strings ist falsch. Ich gehe davon aus, dass du "1.json" laden willst? Dann muss das aber so aussehen:
Code: 
$.getJSON(get + ".json", function(data) {
 
Stimmt, die Datei nennt sich der Einfachheit halber 1.json und Danke, die Fehlermeldung ist jetzt weg aber leider wird mir der Inhalt der JSON Datei nicht angezeigt. Da muss ich wohl noch tüfteln.

Entweder liegt es daran....

Code: 
$('#benzin01').on("pageshow", function(){

... oder das 2 ähnliche Javascripten hineinander laufen.

Vielleicht kannst du ja mal kurz einen Blick drauf werfen.

HTML: 
<!DOCTYPE html>
	<head>
		<title>Sintra-Data</title>
		<meta http-equiv="Content-Type" content="application/json; charset=UTF-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<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 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="d">
				<a href="daten.html" data-role="button" data-icon="back" data-iconpos="notext"></a>
				<h1 id="rubrik_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="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').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) {
							$('#rubrik_title').append(item.name);
						}				
					});
				});
			});	
			
			</script>

			<script type="text/javascript">
			
			$('#benzin01').on("pageshow", function(){

				var param = "kat";
				var query = window.location.search;
				var get = decodeURIComponent(query.substr(1, param.length));				
					
					$.getJSON(get + ".json", function(data) {
						$.each(data.benzin01, function(i,item) {
							$('<li><h3>'+item.info+'</h3><p>'+item.inhalt+'</p></li>').appendTo('#benzin01');
						});
			
							$('#benzin01').listview('refresh');
					});
			});	
			
			</script>
	
		</div>

	</body>
</html>

Die leeren <li></li> stehen nur für miich zu besseren Orientierung.

Ich hab mir da wohl zum Anfangen mit Javascript ein etwas zu komplexes Projekt ausgesucht. Ich find für die meisten Dinge keine Lösung weil meine Suchbegriffe nicht passen bzw. die meisten Infos auf englischen Seiten zu finden sind.
 
Hi,

mal ein paar Ideen:
- Es könnte sein, dass die passenden HTML-Elemente noch nicht geladen wurden und du deswegen keine Ausgaben bekommst. Hast du mal anstelle von "pageshow" "load" versucht?
- Zum Ausprobieren kannst du ja auch mal ein Javascript deaktivieren. Ich glaub allerdings nicht, dass sich diese beiden stören.
- Wie sieht deine JSON-Struktur aus? Ist die valide? Sind die Elemente "info" und "inhalt" vorhanden?
 
Guten Morgen

Also ich hab jetzt mal so ziemlich alles durchprobiert was ich gefunden habe und nichts hat funktioniert. Entweder steh ich total auf der Leituung oder bei dem "data-role" Element wird beim draufklicken nichts ausgelöst das das Javascript aktiviert.

Egal ob ich das einzelne Element oder das übergeordnete Element nehme, es tut sich nichts wenn ich drauf klicke.

Um das mal auszuschließen habe ich erst mal die ganzen "data-role" Elemente entfernt und wollte den Inhalt der JSON Datei mal direkt auf der Seite ausgeben lassen. Siehe da auch da kam nix, also liegt der Fehler entweder im Javascript oder in der JSON Datei selbst.

Hier der Inhalt der JSON-Datei:

Code: 
{
	"benzin01": [
	{
		"info": "Motoröl Viskositätsklasse",
		"inhalt": "15W40"
	}
	]
}

Hier das Javascript:

Code: 
			<script type="text/javascript">
			
			$('#benzin01').on("pageshow", function(){

				var param = "kat";
				var query = window.location.search;
				var get = decodeURIComponent(query.substr(1, param.length));				
					
					$.getJSON(get + ".json", function(data) {
						$.each(data.benzin01, function(i,item) {
							$('<li><h3>'+item.info+'</h3><p>'+item.inhalt+'</p></li>').appendTo('#benzin01');
						});
			
							$('#benzin01').listview('refresh');
					});
			});	
			
			</script>

Ausgegeben sollte es hier:

HTML: 
			<div data-role="content">
						<ul id="benzin01" data-rule="listview" data-divider-theme="d">
						
						</ul>
			</div>

Also ich weis nicht mehr weiter :(
 
Rollimen, hast du nicht die Möglichkeit, das Ganze mal irgendwo online zu stellen? Gibt doch haufenweise Umsonst-Hoster mit PHP.
Denn mir scheinen da noch andere Probleme rein zu spucken, wie z.B. falscher Charset.
 
PHP hab ich eh und im Grund wäre das ja die einfachste Lösung aber ich möchte das Ganze dann in ene APK Datei umwandeln und das geht nicht mit PHP. Ich weis dass das nicht die ideale Methode ist aber es war sozusagen als Einstieg in die App Programmierung gedacht denn ich muss ehrlich gestehen dass ich davon noch viel weniger verstehe, daher erst mal diese Lösung um erst mal die App selbst zu haben (sollte ein kleines kostenloses Gimmick für die User meiner Seite sein) während ich dann eben Schritt für Schritt das Ganze weiter entwicklen kann und dabei lerne wie ich das mit einer "echten" App hinbekomme.

Online steht das Teil ja im Moment auf meiner Sintra Seite mit einer Sub-Domain => Sintra-Data.

Nachteil wenn ich PHP verwende ist das es nicht wirklich offline funktioniert, hab da ein paar Versuche gestartet aber das Ergebnis war eher negativ.

Falls mal jemand das Ganze anschauen möchte häng ich mal die Dateien gezippt hier an.Anhang anzeigen SintraWebApp.zip
 
Zuletzt bearbeitet:
In dieser Web-App kannst Du nicht nur die Daten Deines Sintras eintragen und hast sie so immer zur Hand
Zum Vergrößern anklicken....
Wo sollen denn die Daten des Benutzers gespeichert werden? Mir fehlt irgendwie noch eine Struktur zu dem Ganzen im Kopf.
 
Da hab ich erst mal nur das Formular gemacht aber das ganze soll dann im localStorage gespeichert werden so wie die Notizen.

Ich weis, es ist alles etwas durcheinander aber ich mach halt mal immer so weit wie ich ohne Probleme komme, dann such ich nach Lösungen und wenn ich nichts finde mach ich erst mal wo anders weiter und manchmal finde ich dabei eine Lösung für ein anderes Problem und wenn nicht dann such ich mir ein Forum mit nette User und Moderatoren die mir weiter helfen.
 
OK, verstanden. Und wie ist das jetzt bezüglich der APK Datei? Das kenne ich bisher nur von richtig reinen Android App's. Es gibt ja auch noch diese Web Apps als eine Art Ergänzung/Plugin im Browser z.B. für Chrome. Und zum Schluss gibt es noch diese Apps, die auf fetten Betriebssystem wie z.B. Windows oder Linux laufen. Wo muss man das jetzt einordnen, dein Projekt und welcher Syntaxumfang von JS und HTML steht da zur Verfügung und wie kommuniziert die App mit dem User (CGI wird es ja vermutlich nicht sein)?
 
Ähmm, ja also ehrlich gesagt so direkt weis ich das auch nicht, das was ich bis jetzt gelesen habe kann man über diese Seite hier: https://build.phonegap.com/people/sign_in eine WebApp mit HTML und Javascript problemlos umwandeln und zwar in alle möglichen Formate (Android, IOS, WindowsPhone, etc..) hab auch schon testweise die ersten Seiten mal für Android umgewandelt und sie funktioniert soweit.

Die Funktionen sollen angeblich ganz normal wie bei der WebApp sein nur eben PHP, das funktioniert halt nicht was auch klar ist da ja am Handy keine PHP Server läuft.

Mehr kann ich dazu leider auch nicht sagen.
 
Hmmm, also wissen wir nicht, wie die App mit dem Benutzer interagiert und als Ausweg versuchst du nun, die Daten in einem URL als GET Parameter vom HTML Formular in die App zu übergeben. Hab ich das richtig verstanden?
 
Naja, Ausweg jetzt nicht so direkt, ich dachte es wäre die einfachste Variante. Natürlich könnte man es auch in die daten_rubriken.json dazu schreiben und in die sessionStorage packen um sie dann auf der Detail Seite zu verwenden.

Wie gesagt ich stehe am Anfang und beschäftige mich erst seit etwa 2 Wochen mit dem Ganzen. Da ich bis jetzt recht gute Erfahrungen mit Video2Brain gemacht habe ging ich von den Infos und Beispielen aus, möglicherweise war das ein Fehler oder die Sachen sind schon zu "alt".

Falls es sich jemand ansehen möchte hab ich hier auch noch die apk Datei: Anhang anzeigen SintraData_1.1.zip
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben