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:

PHP-Code:

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

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

Code :

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

Wird zu

Code :

1 2	var row1 = 11; var row2 = 12;

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

Code javascript:

1	$('#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

Hallo,
danke für deine Antwort!!

Zitat von rd4eva

Code :

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

Wird zu

Code :

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

Zitat von rd4eva

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

Code javascript:

1	$('#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.

Zitat von rd4eva

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

Zitat von rd4eva

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?

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:

Code javascript:

1	$('#datepicker11')

Ich denke das reicht damit du es selbst hinbekommst

Zitat von rd4eva

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:

PHP-Code:

    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