JQuery Werte Weitergabe

roloremo · 12/16/2012, 18:50

Guten Abend liebe Community,

mein Problem ist folgendes: Ich habe ein Formulartextfeld und möchte das was dort reingeschreiben wird mit JQuery auslesen wenn ein Button gedrückt wird.
Der Inhalt/Wert soll dann in in ein neu generiertes Div geschrieben werden.

Jedoch, wer hätte es gedacht, tut JQuery das nicht und ich lerne erst seit kurzem mit JQuery umzugehen.

notes.htm

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Notes Node</title>
		<link rel="stylesheet" type="text/css" href="notes.css">
		<script src="jquery-1.8.0.min.js"></script>
		<script src="readandwrite.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	</head>
	<body>
		<div id="header">
			<div id="head-icon"></div>
			<div id="headline">
				<p>urNotes</p>
			</div>
		</div>

		<hr id="hrhead">

		<div id="content">
			<div id="new-note">
				<form action="notes.htm">
					<input id="read" name="eingabe" type="text" size="30" maxlength="64">
					<input id="save" name="speichern" type="submit" value="Speichern">
				</form>
			</div>
			<div id="notes">
			</div>
		</div>

	</body>
</html>

readandwrite.js

Code:

$(document).ready(function(){
	
	$("#save").click(function ()
	{
		var lala = $("#read").val
   		$('#notes').append("<div class='songle-note'>" + lala + "</div>");
	});
	
	// var text;
	// $("#read").value=text;

	// $("#save").click(function ()
	// 	$('#read').appendTo('#notes'));
});

Das habe ich gerade bei mir in meinen Dateien stehen, und ich schätze mal der JQuery Code wird falsch sein..

NotEnoughForYou · 12/16/2012, 19:17

.value oder .val() aber nicht .val

roloremo · 12/16/2012, 19:46

Quote:

Originally Posted by NotEnoughForYou

.value oder .val() aber nicht .val

Beides ausprobiert, trotzdem kein Lebenszeichen von den Werten.

Tante Edit sagt das neue generierte Div will auch nicht auftauchen..

NotEnoughForYou · 12/16/2012, 21:02

Wird jquery richtig eingebunden ? Pruef mal mit einem alert nachdem das dokument geladen wurde.. Ahja und den submit abbrechen mit return false; sonst kann das ja nicht gehen

roloremo · 12/16/2012, 21:26

Quote:

Originally Posted by NotEnoughForYou

Wird jquery richtig eingebunden ? Pruef mal mit einem alert nachdem das dokument geladen wurde.. Ahja und den submit abbrechen mit return false; sonst kann das ja nicht gehen

an welche stelle genau soll ich das

Code:

return false;

hinschreiben?

Edit: Ich habe jetzt

Code:

$(document).ready(function(){

	$("#save").click(function()
	{
		var lala = $("#read").val()
		alert(lala);
   		$('#notes').append("<div class='songle-note'>" + lala + "</div>");
	});
	
	// var text;
	// $("#read").value=text;

	// $("#save").click(function ()
	// 	$('#read').appendTo('#notes'));
});

da stehen und er gibt zumindest das geschriebene richtig per Alert heraus.

NotEnoughForYou · 12/16/2012, 21:49

Nach dem append vor der })

roloremo · 12/16/2012, 22:41

Hab ich gemacht, der ALert zeigt immernoch das an was ich in das feld geschrieben hab

NotEnoughForYou · 12/16/2012, 23:04

Benutz mal .html statt append und zeig nochmal deinen gesamten code

roloremo · 12/16/2012, 23:20

Hab ihn zu Testzwecken teils geändert, nichtt wundern:

HTML

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Notes Node</title>
		<link rel="stylesheet" type="text/css" href="notes.css">
		<script src="jquery-1.8.0.min.js"></script>
		<script src="readandwrite.js"></script>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"></meta>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	</head>
	<body>
		<div id="header">
			<div id="head-icon"></div>
			<div id="headline">
				<p>urNotes</p>
			</div>
		</div>

		<hr id="hrhead">

		<div id="content">
			<div id="new-note">
				<form action="notes.htm">
					<input id="read" name="eingabe" type="text" size="30" maxlength="64">
					<input id="save" name="speichern" type="submit" value="Speichern">
				</form>
			</div>
			<div id="notes">
			</div>
		</div>

	</body>
</html>

CSS

Code:

html, body{
	display: block;
	margin: 0;
	height: 100%;
	width: 100%;
	font-family: 'Rambla', sans-serif;
	font-size: 100%;
}

@import url(http://fonts.googleapis.com/css?family=Rambla:400,700);

#header{
	height: 15%;
	width: 100;
	margin: 0;
}

#head-icon{
	height: 100%;
	width: 20%;
	margin-left: 10%;
	background-image: url(head-icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
}

#headline{
	width: 50%;
	height: 100%;
	margin: 0;
	/*margin-left: 25%;*/
	font-size: 2em;
	font-weight: bold;
	float: left;
}

#hrhead{
	width: 100%;
}

#content{
	height: 85%;
	width: 100;
	margin: 0;
}

#new-note{
	height: 10%;
	width: 100%;
	margin: 0;
	float: left;
}

form{
	height: 100%;
	width: 100%;
	margin: 0;
}

input{
	height: 95%;
	width: 95%;
	margin: 0;
	margin-left: 2.5%;
	border-radius: 12.5px;
	/*box-shadow: 0px 0px 5px #000;*/
}

#save{
	margin: 0;
	margin-left: 2.5%;
	height: 105%;
	font-weight: bold;
	margin-top: 1%;
	color: #FFF;
	background-color: #137CDB;
	border-radius: 0px;
	/*border-bottom-left-radius: 12.5px;
	border-bottom-right-radius: 12.5px;*/
}

#notes{
	height: 50%;
	width: 100%;
	margin: 0;
	margin-top: 25%;
	float: left;
}

.single-note{
	/*min-height: 44px;*/
	height: /*5%*/ 50%;
	/*max-height: 100px;*/
	width: 80%;
	border-radius: 50px;
}

jQuery

Code:

$(document).ready(function(){

	$("#save").click(function()
	{
		var lala = $("#read").val()
		// alert(lala);
   		$('#notes').html("<div class='single-note'>"lala"</div>");
	});
});

War auch schon soweit dass das per .append Geschriebene kurz angezeigt wurde wenn ich nur

Code:

.append(lala);

geschrieben hab, aber wie gesagt danach ist es direkt wieder verschwunden.

NotEnoughForYou · 12/17/2012, 07:04

Ja weil das return false fehlt und somit die form ausgefuehrt wird ...

roloremo · 12/17/2012, 07:47

Achso, dachte das wär nur zu Testzwecken gewesen.. Dankeschön für deine Hilfe

EDIT: Mittlerweile sieht mein jQuery folgendermaßen aus:

Code:

$(document).ready(function(){

	$("#save").click(function()
	{
		var i = 1;
		var lala = $("#read").val()
		var snote = $('<div class="single-note" id="moin"></div>')
   		$('#notes').html(snote);
   		$('.single-note').text(lala).attr("id", "moin" + i).draggable();
   		i++;
	});
});

..und mein HTML so:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Notes Node</title>
		<link rel="stylesheet" type="text/css" href="notes.css">
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-ui-1.9.2.custom.min.js"></script>
		<script src="readandwrite.js"></script>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"></meta>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	</head>
	<body>
		<div id="header">
			<div id="head-icon"></div>
			<div id="headline">
				<p>urNotes</p>
			</div>
		</div>

		<hr id="hrhead">

		<div id="content">
			<div id="new-note">
				<input id="read" name="eingabe" type="text" size="30" maxlength="64">
				<input id="save" name="speichern" type="submit" value="Speichern">
			<div id="notes">
			</div>
		</div>

	</body>
</html>

Folgendes Problem:
Er erstellt nur ein Div und keine anderen neuen, sondern passt das bereits bestehende nur an.. weißt du evtl warum?

NotEnoughForYou · 12/17/2012, 11:54

Weil du .html nutzt ... Append fuegt an html ersetzt

Muddy Waters · 12/17/2012, 12:03

Weil du mit $.html() den gesamten Inhalt des Elements ersetzt. Zumal du sowieso $.append() nutzen solltest, denn was du dort anhängst ist kein HTML-String, sondern eine jQuery Collection.

Es fehlt übrigens nach wie vor ein Abbruch des submit Events in deiner Funktion. Deine "Zählvariable" ist außerdem sinnlos, da diese lokal ist und nur während der Ausführung deines Event Handlers existiert - mit anderen Worten, i hat immer den Wert 1.

Versuch es stattdessen mal so:

Code:

$(document).ready(function(){

	$("#save").click(function(e)
	{
		var lala = $("#read").val();
		var snote = $('<div class="single-note"></div>');
		var notes = $('#notes');
   		snote.text(lala).attr("id", "moin" + notes.children().length).draggable();
		notes.append(snote);
		e.preventDefault();
	});
});

roloremo · 12/17/2012, 12:20

Quote:
Originally Posted by Muddy Waters
Weil du mit $.html() den gesamten Inhalt des Elements ersetzt. Zumal du sowieso $.append() nutzen solltest, denn was du dort anhängst ist kein HTML-String, sondern eine jQuery Collection.

Es fehlt übrigens nach wie vor ein Abbruch des submit Events in deiner Funktion. Deine "Zählvariable" ist außerdem sinnlos, da diese lokal ist und nur während der Ausführung deines Event Handlers existiert - mit anderen Worten, i hat immer den Wert 1.

Versuch es stattdessen mal so:
Code:
$(document).ready(function(){

	$("#save").click(function(e)
	{
		var lala = $("#read").val();
		var snote = $('<div class="single-note"></div>');
		var notes = $('#notes');
   		snote.text(lala).attr("id", "moin" + notes.children().length).draggable();
		notes.append(snote);
		e.preventDefault();
	});
});

Klappt, danke

Ich versuch deinen Code zu verstehen..also:

Code:

var lala = $("#read").val();

ist halt der Inhalt der im Textfeld gerade steht.

Code:

var snote = $('<div class="single-note"></div>');

ist das, was angehängt werden soll später.

Code:

var notes = $('#notes');

sagt einfach nur aus dass die Variable "notes" jetzt das Div mit der Id="notes" ist.

Code:

snote.text(lala).attr("id", "moin" + notes.children().length).draggable();

..sagt aus das in "<div class="single-note"></div>" der Wert reingeschrieben werden soll, den die Variable "lala" gerade besitzt.
Außerdem wird das Div noch mit der Id="moin" bestückt.. aber da hakt's bei mir. Was soll "+ notes.children().length" aussagen?

Was mir auch noch nicht so ganz klar ist: Was soll

Code:

e.preventDefault();

ausrichten?

Muddy Waters · 12/17/2012, 13:38

Quote:
Originally Posted by roloremo
Code:
var notes = $('#notes');
sagt einfach nur aus dass die Variable "notes" jetzt das Div mit der Id="notes" ist.
Code:
snote.text(lala).attr("id", "moin" + notes.children().length).draggable();
..sagt aus das in "<div class="single-note"></div>" der Wert reingeschrieben werden soll, den die Variable "lala" gerade besitzt.
Außerdem wird das Div noch mit der Id="moin" bestückt.. aber da hakt's bei mir. Was soll "+ notes.children().length" aussagen?

Du hattest dort ja vorher eine Variable, mit der du die neu erzeugten divs mit aufsteigen nummerierten IDs versehen wolltest. Das hätte aber mit deiner Variante nicht funktioniert, da die von dir vorgesehene Zählvariable nur im Kontext deiner Funktion existiert, mal abgesehen davon, dass du sie dort jedes mal mit dem Wert 1 initialisiert hättest.
Um das trotzdem zu machen, hättest du deine Variable global (also im window Kontext) deklarieren müssen, alternativ kannst du Variablen auch implizit global deklarieren, indem du einfach das var-Statement weglässt.

Es gibt hier aber noch eine Dritte Variante und genau diese habe ich in dem Codebeispiel umgesetzt. Statt eine zusätzliche Zählvariable einzuführen, welche dann mit jedem Funktionsaufruf inkrementiert wird, orientierst du dich einfach an deiner Ausgabe. Du fügst schließlich mit jedem Aufruf der div#notes ein neues Kindelement hinzu. Die Variable notes verweist in dem obigen Beispiel ja bereits auf jene div. Durch den Aufruf von children() über notes wird eine jQuery Collection zurückgegeben, die alle Kindelemente der div#notes enthält. Das Attribut length ist ein Integer Wert, welcher die Anzahl der Elemente in eben dieser Collection angibt.

Quote:
Originally Posted by roloremo
Was mir auch noch nicht so ganz klar ist: Was soll
Code:
e.preventDefault();
ausrichten?

Beim Klick auf den Submit Button wird standardmäßig dein form übermittelt. Das möchtest du in dem Fall aber gar nicht, du willst schließlich mit Klick auf den Button dynamisch deine Seite per JS verändern. Da deine Funktion aber aufgerufen wird, bevor dein form übermittelt wird, hast du dort die Möglichkeit das ansonsten folgende Standardverhalten beim Klicken auf den Submit Button zu unterbinden.
Und genau das machst durch den Aufruf von e.preventDefault(); e ist in dem Fall übrigens das Event Objekt, welches beim Aufruf von Event Handlern grundsätzlich übergeben wird.