[RESOLU] datepicker-fr.js avec table Mysql

25 juin 2016, 18:45

Bonjour,
Je souhaite utiliser datepicker-fr.js pour afficher un calendrier dans un champs ou je veux une date.
Je ne suis pas du tous a laise avec le JS et les bibiliotheques jquery, mais je suis arrivé a le faire fonctionnné en partie.
Le problème c'est que je l'utilise dans une requête sur une table Mysql et malheureusement seul le champ date du premier résultat de ma requête propose le calendrier
.

L’orque je sélectionne les résultats suivant de ma requête le calendrier ne fonctionne pas.

Voila mon code :

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>DATE</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="./jquery-1.10.2.js"></script>
  <script src="./jquery-ui.js"></script>
  <script src="./datepicker-fr.js"></script>
</head>
<body>
<legend>LES INFORMATIONS</legend>
<?PHP
$aujourdhui=time();
							try
								{
								$bdd = new PDO('mysql:host=127.0.0.1;dbname=mabase', 'root');
								}
								catch(Exception $e)
								{
								die('Erreur : '.$e->getMessage());
								}
								$req1 = $bdd->prepare('SELECT * FROM tableinformation WHERE temps > ? ORDER BY temps');
								$req1->execute(array($aujourdhui));
								while ($donnees1 = $req1->fetch())
								{
$dateactivite=$donnees1['jour'];
?>
<fieldset class="modif">
<form autocomplete="off" method="post" enctype="multipart/form-data" action="modificationinformation3.php?page=modification">
<p align="center">date : <input autocomplete="off" type="text" id="datepicker" name="jour" value="<?php echo $dateactivite; ?>" required></p>
<input type="submit" name="upload" value=" MODIFIER.">
</form>
</fieldset>
<?php
								}
								$req1->closeCursor(); // Termine le traitement de la requête
?>
</body>
</html>

Test fait sur Chrome et Firefox
Est-ce que vous auriez une solution pour résoudre ce problème.
Merci d’avance pour votre aide
Patrick

25 juin 2016, 21:53

vu que c'est dans une boucle, je pense que c'est le champ qui a toujours le même id qui pose problème.

25 juin 2016, 22:16

Bonsoir,
Merci pour ta réponse Or1.
Effectivement un petit test ma permis de vérifier que tu as raison.
Code 1 NE MARCHE PAS (Idem qu'avec la boucle)

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>DATE</title>
<link rel="stylesheet" type="text/css" href="../fichierscommuns1/miseenpage.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="./jquery-1.10.2.js"></script>
  <script src="./jquery-ui.js"></script>
  <script src="./datepicker-fr.js"></script>
<script>
$(function() {
	$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
	$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
</head>
<body>
<legend>LES INFORMATIONS</legend>
<fieldset class="modif">
<form autocomplete="off" method="post" enctype="multipart/form-data" action="modificationinformation3.php?page=modification">
<p align="center">date : <input autocomplete="off" type="text" id="datepicker" name="jour1" value="<?php echo $nouvelle_date; ?>" required></p><br/>
<p align="center">date : <input autocomplete="off" type="text" id="datepicker" name="jour2" value="<?php echo $nouvelle_date; ?>" required></p><br/>
<p align="center">date : <input autocomplete="off" type="text" id="datepicker" name="jour3" value="<?php echo $nouvelle_date; ?>" required></p><br/>
<input type="submit" name="upload" value=" MODIFIER.">
</form>
</fieldset>
</body>
</html>

Code 2 MARCHE

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>DATE</title>
<link rel="stylesheet" type="text/css" href="../fichierscommuns1/miseenpage.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="./jquery-1.10.2.js"></script>
  <script src="./jquery-ui.js"></script>
  <script src="./datepicker-fr.js"></script>
<script>
$(function() {
	$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
	$( "#datepicker1" ).datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
<script>
$(function() {
	$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
	$( "#datepicker2" ).datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
<script>
$(function() {
	$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
	$( "#datepicker3" ).datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
</head>
<body>
<legend>LES INFORMATIONS</legend>
<fieldset class="modif">
<form autocomplete="off" method="post" enctype="multipart/form-data" action="modificationinformation3.php?page=modification">
<p align="center">date : <input autocomplete="off" type="text" id="datepicker1" name="jour1" value="<?php echo $nouvelle_date; ?>" required></p><br/>
<p align="center">date : <input autocomplete="off" type="text" id="datepicker2" name="jour2" value="<?php echo $nouvelle_date; ?>" required></p><br/>
<p align="center">date : <input autocomplete="off" type="text" id="datepicker3" name="jour3" value="<?php echo $nouvelle_date; ?>" required></p><br/>
<input type="submit" name="upload" value=" MODIFIER.">
</form>
</fieldset>
</body>
</html>

Maintenant que j'ai ce constat, est-ce que quelqu'un a une idée sur comment résoudre le problème

26 juin 2016, 12:40

Bonjour,

L'attribut id d'une balise html doit être unique sur toute la page. Ajoutes quelque chose dans ta boucle pour que les attributs id de tes différents champs ne soient pas identiques. Il faudra alors éventuellement adapter le script pour prendre en compte ces nouveaux ids ou trouver un autre moyen de sélectionner tes champs.

Le problème vient du code html et javascript généré et n'est pas lié au sql. Le debugger javascript devrait t'aider à comprendre ce qui cloche

26 juin 2016, 18:07

Bonjour,
En cherchant sur google "datepiker dans boucle" J'ai trouvé ICI la solution (Id devient class) et ça marche
Merci pour votre aide

Voila le code final

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>DATE</title>
<link rel="stylesheet" type="text/css" href="../fichierscommuns1/miseenpage.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="./jquery-1.10.2.js"></script>
  <script src="./jquery-ui.js"></script>
  <script src="./datepicker-fr.js"></script>
        <script type="text/javascript">
$(function() {
	$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
	$( '.datepicker' ).datepicker( $.datepicker.regional[ "fr" ] );
});
        </script>
</head>
<body>
</body>
</html>

<script>

</script>
</head>
<body>
<?PHP
$aujourdhui=time();
							try
								{
								$bdd = new PDO('mysql:host=127.0.0.1;dbname=mabase', 'root');
								}
								catch(Exception $e)
								{
								die('Erreur : '.$e->getMessage());
								}
								$req1 = $bdd->prepare('SELECT * FROM tableinformation WHERE temps > ? ORDER BY temps');
								$req1->execute(array($aujourdhui));
								while ($donnees12 = $req1->fetch())
								{
$dateactivite=$donnees12['jour'];
include('./dateactivite.php');
?>
<fieldset class="modif">
<form autocomplete="off" method="post" enctype="multipart/form-data" action="modificationinformation3.php?page=modification">
<p align="center">date limite d'affichage : <input autocomplete="off" type="text" class="datepicker" name="jour" value="<?php echo $nouvelle_date; ?>" required><br /><br /></p>
 <div align="center">
<input type="submit" name="upload" value=" MODIFIER."><br/><br/>
</form>
</div>
</fieldset>
<?php
								}
								$req1->closeCursor(); // Termine le traitement de la requête
?>
</body>
</html>

[RESOLU] datepicker-fr.js avec table Mysql

Qui est en ligne