Ajouter des variables PHP et JavaScript

Version imprimable

Bonjour,
J'ai un soucis pour écrire un variable php + javascript.

Mon select avec while sur le nombre d'option dispo dans la BDD. Onchange passe la value

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<select name="event_id" id="event_id" required="required" onchange="datechange(this.value)" />
								<? $check_ev = check_ev();
                                                                $i = 0;
                                                                while ($i < count($check_ev)) {
                                                                        ?>
										<OPTION value="<? echo $check_ev[$i]['id']; ?>" <? if (!empty($rows_tn['event_id']) && $rows_tn['event_id'] == $check_ev['id']) echo 'selected';?>><? echo $check_ev[$i]['name_ev']; ?></option>	
									<?
                                                                                ${mindate.$check_ev[$i]['id']} = $check_ev[$i]['date_ev_start'];
                                                                                ${maxdate.$check_ev[$i]['id']} = $check_ev[$i]['date_ev_end'];
                                                                        $i++;
                                                                } ?>
							</select>

En bas de ma page Php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
	function datechange(param){
                window.alert(param);    /////<============= Ca fonctionne param = 10 dans l'exemple
 
                var mindate = <? echo $mindate10; ?>    ////// <==== CA fonctionne
                var mindate = <? echo $mindate+param; ?>    ////// <=========== J'aimerai l'écrire comme ça
 
		var maxdate = <? echo $maxdate10; ?>   //////  <==== CA fonctionne
                var maxdate = <? echo $maxdate+param; ?>    ////// <=========== J'aimerai l'écrire comme ça
 
		window.alert(mindate);
		window.alert(maxdate);
	};
 
 
    jQuery(document).ready(function($) {
        $("#datepicker").datepicker({
			dateFormat: "yy-mm-dd",
            minDate: mindate,    ///// <==== ici je récupère celui d'en haut
            maxDate: maxdate,   /////// <===== idem
		});
    });
 
</script>

Merci pour votre aide

17/06/2021, 20h00
mathieu

regardez le code javascript généré pour voir si cela correspond au résultat que vous souhaitez.

Si j'ai bien compris la question ce serais donc quelque chose comme ça que tu chercherais à faire ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const minDates = [
  "<? echo $mindate0; ?>",
  "<? echo $mindate1; ?>",
  "<? echo $mindate2; ?>",
  "<? echo $mindate3; ?>",
  "<? echo $mindate4; ?>",
]
 
const maxDates = [
  "<? echo $maxdate0; ?>",
  "<? echo $maxdate1; ?>",
  "<? echo $maxdate2; ?>",
  "<? echo $maxdate3; ?>",
  "<? echo $maxdate4; ?>",
]
 
function datechange(param) {
  var mindate = minDates[param]
  var maxdate = maxDates[param]
 
  window.alert(mindate)
  window.alert(maxdate)
}
 
 
/* Exemples */
 
datechange( 0 ) // $mindate0 | $maxdate0
datechange( 1 ) // $mindate1 | $maxdate1
datechange( 2 ) // $mindate2 | $maxdate2

18/06/2021, 11h41
bouman

Plus de détails

En fait j'ai une base de données qui stoque des évènements chacun d'eux possède un ID, et une date de début et de fin.

La je code une page d'ajout d'animation sur laquelle on choisit sur quel événement aura lieu celle ci.
J'aimerais juste que le datepicker pour l'animation soit restreint mindate et maxdate par rapport à l'événement.

Que quelqu'un ne me mette pas une date d'animation hors date de l'événement.

Les variables ne sont pas forcément dans l'ordre car on peut supprimer des évènements ou en ajouter. En ce moment dans ma base j'ai un évènement avec ID 6 et un autre avec ID 10.

Mon idée initiale était de créer les variables (JavaScript) dans ma boucle "while PHP", mais comme je suis trop mauvais en JS j'ai incrémenter en PHP. $mindateID

Mais en vrai j'ai juste déporté le problème en bas de la page...
18/06/2021, 12h19
mathieu

il faut faire cela en 2 étapes.
la 1re étape est d'avoir un code de test en pur javascript qui fonctionne comme vous voulez.
et la 2e étape est de faire le lien entre php et javascript.

est ce que la 1re étape est déjà au point de votre côté ?
18/06/2021, 13h17
bouman

Bonjour,
Oui les "alert" sont juste là en vérification des données.
L'alerte param renvoie bien l'ID voulu.
L'alerte mindate quand je met manuellement l'ID sur la variable PHP $mindate10 ou $mindate6 me renvoie bien les bonnes dates des différents événements.

La seule chose je n'arrive pas à l'écrire come ceci.

$mindate+param

Et le datepicker marché si je rentre les dates manuellement.
En vrai tout marche c'est juste que je ne sais pas incrémenter une variable en JS.
19/06/2021, 02h10
ABCIWEB

Salut,

Pourquoi tu n'utilises pas un foreach plutôt que ce while alambiqué pour construire les options de ton select en php? Même si ça fonctionne tu te compliques la vie, sans compter que tu fais un count dans ton while ce qui consomme des ressources inutilement.

Enfin pour répondre à ta dernière question ton code ne fonctionne pas car tu mélanges des variables php et javascript dans un tag php var mindate = <? echo $mindate+param; ?>, alors qu'il faut séparer les deux comme ceci: var mindate = <?=$mindate?>+param;

Remarques au passage que "<?=" est la syntaxe raccourcie de "<?php echo" et qu'il ne faut plus utiliser <? echo, mais soit <?php echo, soit <?=
21/06/2021, 12h04
bouman

Non fonctionnel

Merci de ta réponse mais malheureusement cela ne fonctionne pas.

J'avais mis le "+param" dans la tag PHP pour la compréhension et j'avais déjà essayé de le mettre à l'extérieur mais ça me met une erreur.
Uncaught SyntaxError: Unexpected token '<'

Et du coup arrête la lecture du script et datechange is undefined.

Pour le foreach je n'est pas voulu faire une autre fonction autres que mon "select *" et je n'est pas réussi à lui dire "foreach ID" dans mon array.

Toujours en recherche de solution.

C'est non fonctionnel chez toi mais pourtant ça fonctionne. Apparemment le php n'est pas interprété à cet endroit du code, possible que ton fichier js soit inclus via une balise <script src=...> auquel cas cela ne peut pas fonctionner ou sinon tu n'as pas tenu compte de ma remarque concernant la syntaxe.

Mais bon il existe une autre méthode plus propre qui évite d'avoir à écrire du php dans le code javascript, en passant les variables php dans le html que l'on ira récupérer avec javascript.

Dans une page séparée testes ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <?php // Mettre les variables que l'on veut transmettre à javascript dans un tableau encodé avec json_encode $tab = ['a'=>12,'b'=>'titi','c'=>18]; $js = json_encode($tab); ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Ajax/Jquery</title> </head> <body> <div id="js" style="display:none"><?=$js?></div> <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(function() { // On récupère le contenu de la div qui contient les variables php et on parse le JSON pour obtenir un objet javascript var php = $('#js').text(); php = JSON.parse(php); // On a ensuite accès aux variables php dans l'objet javascript, par exemple pour l'index b var toto = php.b; alert(toto); }) </script> </body> </html>

Résolu

Bon au final j'ai alourdi un peu plus le code.

J'ai rajouter des inputs hidden dans un while après le select.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
							<select name="event_id" id="event_id" required="required" onchange="datechange(this.value)" >
								<? $check_ev = check_ev();
                                                                $i = 0;
                                                                while ($i < count($check_ev)) {
                                                                        ?>
										<OPTION value="<? echo $check_ev[$i]['id']; ?>" <? if (!empty($rows_tn['event_id']) && $rows_tn['event_id'] == $check_ev['id']) echo 'selected';?>><? echo $check_ev[$i]['name_ev']; ?></option>
									<?
                                                                        $i++;
                                                                } ?>
							</select>
							<?      $i = 0;
                                                                while ($i < count($check_ev)) {
                                                                        ?>
									<input type=hidden id=<?php echo "mindate".$check_ev[$i]['id']; ?> value=<?php echo $check_ev[$i]['date_ev_start']; ?> />
									<input type=hidden id=<?php echo "maxdate".$check_ev[$i]['id']; ?> value=<?php echo $check_ev[$i]['date_ev_end']; ?> />
									<?
                                                                        $i++;
                                                                } ?>

Et récupère en bas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	function datechange(param){
		var mindate = document.getElementById('mindate'+param).value;
		var maxdate = document.getElementById('maxdate'+param).value;
		jQuery(document).ready(function($) {
			$("#datepicker").datepicker("destroy");
			$("#datepicker").datepicker({
				dateFormat: "yy-mm-dd",
				minDate: mindate,
				maxDate: maxdate,
			});
		});
	};
 
</script>

Petit plus que je ne savais pas pour un datepicker dès que l'on change une option, comme ici les minDate et maxDate il faut obligatoirement le kill "$("#datepicker").datepicker("destroy");".

Merci à tous pour les recherches et vos aides.