[solved]Dynamisch invul formulier met datepickers
ik ben bezig met een dynamisch formulier. Dmv. een knopje zorg ik dat in mijn table een extra row komt.
Deze row kan ik ook weer verwijderen enz.
Dit doe ik door bovenaan m'n script
Code (php)
1
var newRow = $('#newPlan').html();
te gebruiken, zodat de lege 'row' al opgeslagen is om straks meerdere malen te kunnen gebruiken.
Ook zet ik standaard een counter op 1.
Vervolgens op mijn knopje om een nieuwe planning te maken doe ik dit, zodat de id van het invoerveld voor m'n datum aangepast wordt met een nieuw nummer.
Code (php)
1
2
2
$('#planning').append( '<tr>' + newRow + '</tr>' );
$( ".tDatepicker:last").attr("id","datepicker" + counter);
$( ".tDatepicker:last").attr("id","datepicker" + counter);
dit werkt prima.
Ik maak gebruik van een datepicker. Deze dien ik overigens ook in mijn script te plaatsen per datepicker moet ik een eigen datepicker ?'initialiseren'?, anders werkt het niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
$("#datepicker1").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-1:+1",
dateFormat:"dd-mm-yy"
});
...
...
$("#datepicker5").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-1:+1",
dateFormat:"dd-mm-yy"
});
});
$("#datepicker1").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-1:+1",
dateFormat:"dd-mm-yy"
});
...
...
$("#datepicker5").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-1:+1",
dateFormat:"dd-mm-yy"
});
});
stel, ik vul mijn tabel handmatig alvast in, dan werken alle datepickers.
Maar haal ik er 4 weg, en laat deze met jQuery aanvullen, dan werken de datepickers niet.
Nou begrijp ik wel, dat de datepicker wordt geplaats op de plek waar id overeenkomt.
Bij het inladen van de pagina, bestaan deze id's niet dus komen ze er ook niet.
Heb ik dit juist ?
Hoe kan ik er nou voor zorgen dat deze datepickers opnieuw initialiseren als mn jquery uitvoer?
Toevoeging op 25/10/2014 21:58:56:
door het volgende toe te voegen aan m'n script is dit probleem opgelost.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).on('focus',".datepicker hasDatepicker", function(){
$(this).datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-1:+1",
dateFormat:"dd-mm-yy"
});
});
$(this).datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-1:+1",
dateFormat:"dd-mm-yy"
});
});
Misschien heeft iemand anders hier ook nog wat aan :)
Greets!
Gewijzigd op 25/10/2014 22:03:48 door Dennis WhoCares
Er zijn nog geen reacties op dit bericht.