Heippa,
Minulla on sivu jossa on lomake ajoille ja päiville. Aikoja ja päiviä voidaan lisätä satunnainen määrä ja kenttien lisääminen tapahtuu javascriptin avulla, kun painaa nappia.
Tahtoisin lisätä tekstikenttiin jqueryn päivän (datepicker) ja ajan (timepicker) valitsemisen hiirellä. Minulla on toimiva javascript koodi, joka lisää tekstikentän, mutta en saa noita jquery ominaisuuksia lisättyä kenttiin jotka on lisätty napin kautta.
Eli ensimmäiset valmiiksi lisätyt kentät toimiva moitteetta, mutta kaikki napista lisätyt kentät eivät saa jostain syystä jqueryn ominaisuuksi. Miten saisin lisättyä myös napista lisättyihin kenttiin jqueryn ominaisuudet? Kiitos kaikille vastaajille :)
<html>
<head>
<title>Aikojen lisääminen</title>
<head>
<!--Ladataan tarvittvat tiedostot -->
<link href="jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.2.min.js"></script>
<script src="jquery-ui-1.8.12.custom.min.js"></script>
<script src="jquery.ui.datepicker-fi.js"></script>
<script src="jquery-ui-timepicker-addon.js"></script>
<script language="javascript">
$(function()
{
$('input').filter('.datepicker').datepicker(
{
changeMonth: true,
changeYear: true,
showOn: 'button'
});
$('input').filter('.timepicker').timepicker({});
});
function addAika(divName)
{
var newdiv = document.createElement('div');
newdiv.innerHTML="kello: <input type='text' name='aika[]' class='timepicker' >";
document.getElementById(divName).appendChild(newdiv);
}
function addPaiva(divName)
{
var newdiv = document.createElement('div');
newdiv.innerHTML="paiva: <input type='text' name='paiva[]' class='timepicker' >";
document.getElementById(divName).appendChild(newdiv);
}
</script>
</head>
<body>
<div id="aika">
kello: <input type="text" name="aika[]" class="timepicker" /> <!--Tämä toimii loistavasti -->
</div>
<div id="paiva">
aika: <input type="text" name="paiva[]" class="datepicker" /> <!--Tämäkin toimii loistavasti -->
</div>
<input type="button" value="Lisää aika" onClick="addAika('aika');">
<input type="button" value="Lisää paiva" onClick="addPaiva('paiva');">
</body>
</html>(Mod. huom: Otsikoi aiheet kuvaavasti ja käytä kappalejakoon kahta rivinvaihtoa.)
Tarvitset funktioihin addAika ja addPaiva vastaavat alustusrivit kuin nuo, jotka sivun latautuessa ajetaan.
Ajat input-kenttien pickereiksi "muuttamisen", kun sivu on valmis, joten luonnollisesti sen jälkeen lisätyt kentät ei muutu itestään pickereiksi.
En nyt tiedä meneekö se juuri näin, mutta ideana voisit sanoa $(newdiv).datepicker(... ja $(newdiv).timepicker({})
Lisäksi minua hämää, että dynaamisesti lisätyn päivä-kenttäsi class on timepicker.
Moro!
Onnistuu jos esim. jokaisen divi/input lisäyksen jälkeen kelaat läpi kaikki datepicker/timepicker - luokalla varustetut elementit ja asetat niille "jquery ominaisuudet".. Esim. each:illa.
Lisää divi/input
...
$('.datepicker').each(function(){
$(this).datepicker();
});
...Aihe on jo aika vanha, joten et voi enää vastata siihen.