JS variable dynamisch generieren

[DrBonsai]

Hallo,

ich versuche einen datepicker in einzelne Zellen einer html-Tabelle zu integrieren.
Das Problem ist, dass der picker pro Zelle einzeln initialisiert werden muss und die Anzahl der Zellen dynamisch ist.
Deswegen brauche ich eine Möglichkeit, den Namen des pickers dynamisch anzupassen.

Allerdings bin ich js-noop und habe erstmal keine Ahnung, wie ich das hinkriege.

Hier mal mein Ansatz:

[...]	for ($row = 1; $row<= $rows_string; $row++)
		{
	echo "	
	<script type='text/javascript'>
	var row1 = ".$row."1;
	var row2 = ".$row."2;
	$(function() {
		$('#datepicker + row1 + 1').datepicker();
		$('#datepicker + row2 + 2').datepicker();
	});
	</script>
	";	
	echo "
	<tr>\n
		<td><input type = 'text' id = 'datepicker".$row."1' name = 'period".$row."1' /> - <input type = 'text' id = 'datepicker".$row."2' name = 'period".$row."2' /></td>\n ";
[...]

Hat da jemand eine Lösung parat?
mfg,
David

 

[rd4eva]

Da scheints allgemein ein bischen zu hapern.
Deine php-Schleife macht nicht so richtig viel Sinn.

var row1 = ".$row."1;
var row2 = ".$row."2;

Wird zu

var row1 = 11;
var row2 = 12;

Und der folgende jquery selector kann aus mehreren Gründen nicht funktionieren:

$('#datepicker + row1 + 1')

1. Es existiert kein Element mit der id datepicker
2. Das + im Selector ist der sog. "Next Adjacent Selector".
3. row1 und 1 müssten ein Tag-Name sein

 

[DrBonsai]

Hallo,
danke für deine Antwort!!

var row1 = ".$row."1;
var row2 = ".$row."2;

Wird zu

var row1 = 11;
var row2 = 12;

Das soll so auch sein. Damit will ich später die einzelnen Datepicker unterscheiden können. Ich habe zwei pro Zeile. Also möchte ich, dass am Ende die "Datepicker11", "Datepicker12", "...21", "...22" etc definiert sind.

Und der folgende jquery selector kann aus mehreren Gründen nicht funktionieren:

$('#datepicker + row1 + 1')

Da liegt mein Problem, denke ich.
Was ich halt brauche ist, dass dort die entsprechenden ids generiert werden. Allerdings habe ich noch nicht rausgefunden, wie das geht.

1. Es existiert kein Element mit der id datepicker

Doch, meine Schleife generiert in der Zeile mit den Tabellen-spalten die ids (id = 'datepicker".$row."1').

2. Das + im Selector ist der sog. "Next Adjacent Selector".
3. row1 und 1 müssten ein Tag-Name sein

Das verstehe ich nicht. Ich schätze also mal, dass diese Notierung in meinem Code sinnlos ist. Aber was müsste ich ändern?

Verstehst du, was mein Problem ist?

 

[rd4eva]

Also möchte ich, dass am Ende die "Datepicker11", "Datepicker12", "...21", "...22" etc definiert sind.

Achso, verstehe. Dann nehm ich das zurück .

Doch, meine Schleife generiert in der Zeile mit den Tabellen-spalten die ids (id = 'datepicker".$row."1').

Eben nicht. Das stimmt zwar das die Schleife Elemente mit den IDs generiert. Die IDs sind dann aber datepicker11 bzw. datepicker12. Dein jQuery Selector erwartet aber ein Element mit der ID datepicker. Um genau zu sein erwartet der Selektor ein Element mit der id datepicker unter dem sich ein Element mit dem tag-Name row1 befindet unter dem sich ein Element mit dem Tag-Name 1 befindet. Irgendwie unsinn oder?

Das verstehe ich nicht. Ich schätze also mal, dass diese Notierung in meinem Code sinnlos ist. Aber was müsste ich ändern?

Der jQuery Selector müsste im endeffekt z.B. so aussehen:

$('#datepicker11')

Ich denke das reicht damit du es selbst hinbekommst

 

[DrBonsai]

Achso, verstehe. Dann nehm ich das zurück .
Ich denke das reicht damit du es selbst hinbekommst

Also ist es wie immer:
Warum einfach, wenn es auch kompliziert geht? ;-)

Die Lösung ist ganz einfach so:

	for ($row = 1; $row<= $rows_string; $row++)
		{
	echo "	
	<script type='text/javascript'>
	$(function() {
		$('#datepicker".$row."1').datepicker();
		$('#datepicker".$row."2').datepicker();
	});
	</script>
	";	
	echo "
	<tr>\n
		<td><input type = 'text' id = 'datepicker".$row."1' name = 'period".$row."1' /> - <input type = 'text' id = 'datepicker".$row."2' name = 'period".$row."2' /></td>\n ";

Danke für den Wink mit dem Zaunpfahl!

David