JQuery Werte Weitergabe

Page 1 of 2

12/16/2012 18:50 roloremo#1

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..

12/16/2012 19:17 NotEnoughForYou#2

.value oder .val() aber nicht .val

12/16/2012 19:46 roloremo#3

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..

12/16/2012 21:02 NotEnoughForYou#4

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

12/16/2012 21:26 roloremo#5

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.

12/16/2012 21:49 NotEnoughForYou#6

Nach dem append vor der })

12/16/2012 22:41 roloremo#7

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

12/16/2012 23:04 NotEnoughForYou#8

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

12/16/2012 23:20 roloremo#9

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.

12/17/2012 07:04 NotEnoughForYou#10

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

12/17/2012 07:47 roloremo#11

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?

12/17/2012 11:54 NotEnoughForYou#12

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

12/17/2012 12:03 Muddy Waters#13

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();
	});
});

12/17/2012 12:20 roloremo#14

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?

12/17/2012 13:38 Muddy Waters#15

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.

Page 1 of 2