WebSQL Dateneintrag

Sarah1991 · 7. Januar 2016

Hallo zusammen,

ich versuche via WebSQL Einträge zu speichern.
Zunächst verwende ich Dummydaten, um die Funktionalitäten zu testen.

Man möge sich an dieser Stelle bitte ein leeres Profil vorstellen, in dem der Nutzer neben einem Namen, einer KFZ-Marke und einem Modell auch andere Daten, wie bspw. Baujahr usw. eintragen kann. Klickt der Nutzer auf speichern, so soll
ein div (nav--letter) in einer Profilübersicht erstellt werden. Wenn es noch keinen Namen mit dem entsprechenden Anfangsbuchstaben gibt, wird das div mit dem namen und dem Fahrzeug sichtbar. (Es ist in der Übersicht nun auf display none und wenn es dann den buchstaben noch nicht gibt, dann wird es visible) Bis hierhin funktioniert auch alles.

Auf das div, das durch das Speichern erstellt wurde, kann man klicken, um ein detaillierteres Profil zu sehen. Nun sollen die Daten, die ich in dem Div erstellt habe, in dem Profil angezeigt werden. Leider funktioniert das nicht so, wie ich es möchte.
Die Verlinkung funktioniert noch, aber sobald ich die Ansicht habe, werden die entsprechenden Daten nicht eingetragen.
Die Konsolenausgabe sehe ich nur ganz kurz, was an der Zeile

JavaScript

window.open("../templates/customprofile.html", "_self");

liegt.

Was muss ich tun, damit die Funktion ihren Zweck erfüllt?

Ist es an dieser Stelle sinnvoll, eher ein

SQL

SELECT * FROM profile

zu nutzen?

JavaScript

function initTest(){
	var firstname = "Julia";
	var brand = "VW";
	var model = "Lupo";
	$(".nav--letter").each(function(){
		if($(this).text() == firstname.charAt(0)){
			if($(".letter-" + firstname.charAt(0).toLowerCase()).is(":hidden")){
				$(".letter-" + firstname.charAt(0).toLowerCase()).show();
				$(".letter-" + firstname.charAt(0).toLowerCase()).append("<li class='item--data'>" +
					"<div class='customer-data'><span class='profile--customer'>"+ firstname +
					"</span><span class='profile--car'>" + brand + " " + model + "</span></div></li>");
			} else {
				$(".letter-" + firstname.charAt(0).toLowerCase()).append("<li class='item--data'>" + 
					"<span class='profile--customer'>"+ firstname +"</span><span class='profile--car'>" +
					brand + " " + model + "</span></li>");
			}




		}
	});







	$(".item--data").bind("click", function(){
		window.open("../templates/customprofile.html", "_self");
		console.log(firstname);
		console.log(brand + " " + model);
		$(".section--title .profile").val(firstname);
		$(".persoal-item__field .firstname").val(firstname);




		$(".persoal-item__field .brand").val(brand);
		$(".persoal-item__field .model").val(model);
	});
}

Alles anzeigen

wolf · 8. Januar 2016

Hi, du kannst bei der Konsole den button 'dauerhaft' anklicken, dann siehst du die Fehlermeldungen immer

Sarah1991 · 9. Januar 2016

Hey, danke für eine Antwort.

Also ich habe das ganze nun doch schon mit der DB getestet und bleibe bei der Datenbank schon an einer vorherigen Stelle hängen.

Man gehe nun davon aus, dass die entsprechende Tabelle schon angelegt wurde (

SQL

CREATE TABLE usw.

).
Wenn ich nun einen Kunden in diese Tabelle hinzufügen möchte, klappt das auch, allerdings wird das div ("nav--letter") nicht beachtet.

Das span Element liegt in einem div in dem profiloverview.html Dokument:

HTML

<div class="row nav--slip">
			<div class="column small-12">
				<span class="nav--letter">A</span>
			</div>
		</div>

Vielleicht weißt du, weshalb?

Das

JavaScript

alert("Function");

wird aufgerufen.

EIn

JavaScript

alert("Test: " + $(".nav--letter").text());

ergibt nur Test: -> hier steht nichts <-

So sieht das ganze momentan aus:

JavaScript

function addCustomer(){
	if(database){




		$(".nav__link--newProfile").bind("click", function(){




			var firstname = $(".personal-item__field.firstname").val();




			if(firstname !== ""){
				console.log("Name: " + firstname);
				database.transaction(function(transaction){
					transaction.executeSql("INSERT INTO profile(firstname) VALUES (?, ?), [firstname]");
				});




				window.open("profileoverview.html", "_self");




				alert("Name: " + firstname);	




				addRegisterentry(firstname);			




			} else {
				$(".personal-item__field.firstname, .car-item__field.brand, .car-item__field.model").addClass("is-error");
				$(".personal-item__field.is-required, .car-item__field.is-required").val($(".personal-item__field.is-required, .car-item__field.is-required").data("rel"));
			}
		});




	} else {
		alert("database does not exist");
	}
}




function addRegisterentry(firstname){
	alert("Function");
	$(".nav--letter").each(function(){
		alert("Aufruf");
		if($(this).text() == firstname.charAt(0)){
			alert($(this).text() +  "==" + firstname.charAt(0));
			if($(".letter-" + firstname.charAt(0).toLowerCase()).is(":hidden")){
				$(".letter-" + firstname.charAt(0).toLowerCase()).show();
				$(".letter-" + firstname.charAt(0).toLowerCase()).append("<li class='item--data'>" +
					"<div class='customer-data'><span class='profile--customer'>"+ firstname +
					"</span><span class='profile--car'>" + brand + " " + model + "</span></div></li>");
			} else {
				$(".letter-" + firstname.charAt(0).toLowerCase()).append("<li class='item--data'>" + 
					"<span class='profile--customer'>"+ firstname +"</span><span class='profile--car'>" +
					brand + " " + model + "</span></li>");
			}




		}
	});
}

Alles anzeigen

Und wie meinst du "dauerhaft" anklicken?

WebSQL Dateneintrag

Jetzt mitmachen!

Teilen