Tableau, ajout de ligne, et datepicker
Posté : 21 mai 2013, 23:28
Bonsoir,
J'ai entreprise de créer une page afin d'effectuer des réservations.Je n'en suis d'ailleurs qu'au tout début...
Je voudrais donc un tableau dans un formulaire qui soit doté :
- d'un datepicker pour les dates
- d'une fonction d'ajout automatique de ligne
J'ai trouvé deux fichiers js, que j'ai mis en oeuvre... avec mes maigres connaissances !
Il fonctionne, SAUF QUE lorsque je clique sur ajouter une ligne, le datepicker ne fonctionne plus !
Cela fait des heures que je me creuse la cervelle pour comprendre pourquoi...
Voici mon code (qui ne doit d'ailleurs pas être parfait !!) :
Bonne soirée
J'ai entreprise de créer une page afin d'effectuer des réservations.Je n'en suis d'ailleurs qu'au tout début...
Je voudrais donc un tableau dans un formulaire qui soit doté :
- d'un datepicker pour les dates
- d'une fonction d'ajout automatique de ligne
J'ai trouvé deux fichiers js, que j'ai mis en oeuvre... avec mes maigres connaissances !
Il fonctionne, SAUF QUE lorsque je clique sur ajouter une ligne, le datepicker ne fonctionne plus !
Cela fait des heures que je me creuse la cervelle pour comprendre pourquoi...
Voici mon code (qui ne doit d'ailleurs pas être parfait !!) :
<p>
Disponibilités et tarifs.<br></br>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<link type="text/css" href="wp-content/Themes/Nova/jqueryui/css/redmond/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="wp-content/Themes/Nova/jqueryui/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="wp-include/js/jquery.js"></script>
<script type="text/javascript" src="wp-content/Themes/Nova/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".addRow").btnAddRow();
$(".delRow").btnDelRow();
});
})(jQuery);
</script>
<script type="text/javascript" src="wp-content/Themes/Nova/jqueryui/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$('.date').datepicker({dateFormat:'dd-mm-yy'});
$('.fin').datepicker({dateFormat:'dd-mm-yy'});
});
</script>
<!--Essai plugin-->
<table border="1">
<tr><td colspan="4">Disponibilités</td></tr>
<tr><td>Date début</td><td><input type="textfield" name="date" class="date"/></td>
<td>Date fin</td><td><input type="textfield" name="fin" class="fin"/></td>
<td>Prix</td><td><input type="textfield" class="prix" size="24"/></td>
<td><label class="form">Etat</label>
<select name="choix">
<option value="Réservé">Réservé</option>
<option value="Option">Option</option>
<option value="Disponible">Disponible</option>
</select></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Date début</td><td><input type="textfield" name="date" class="date"/></td>
<td>Date fin</td><td><input type="textfield" name="fin" class="fin"/></td>
<td>Prix</td><td><input type="textfield" class="prix" size="24"/></td>
<td><label class="form">Etat</label>
<select name="choix">
<option value="Réservé">Réservé</option>
<option value="Option">Option</option>
<option value="Disponible">Disponible</option>
</select></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
</table>
</body>
</html>
Bonne soirée