Interpréter une variable javascript dans php

Version imprimable

bonjour,
Je récupére bien une variable en javascript et je souhaite l'interpréter en php...
je ne souhaite pas utiliser Jquery mais juste une fonction javascript ci-dessous

gallery.php
Code:

1 2 3 4 5 6 7 <div class="col-xs-6 col-sm-4 col-md-3 portfolio" > <a href="<?php echo $data['contenu_img'];?>" class="thumbnail" data-toggle="modal" data-target="#firstPics" onclick="clic(this.href);"> <img src="<?php echo $data['contenu_img'];?>" class="img-responsive" /> </a> </div>
toujours dans gallery.php(partie header)
Code:

1 2 3 4 5 6 7 8 9 <script language="JavaScript"> function clic(param_img_select){ var $image_select=param_img_select return($image_select); } </script>
Toujours dans gallery.php(dans une div)
Code:

1 2 3 4 5 6 7 8 9 <div class="modal fade" id="firstPics"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <img src="#" class="img-responsive" /> </div> ...
j'aimerai récupérer la variable ($image_select) dans javascript et la mettre dans src=...(php)

Code:

<img src="#" class="img-responsive" />

Merci d'avance ;)

16/09/2016, 19h01
ABCIWEB

Tu peux pas récupérer directement une variable javascript avec php car php s'exécute avant la création de la page et donc avant javascript. Il faut donc faire une requête ajax en javascript pour s'adresser de nouveau au serveur. Mais pas certain que tu en aies besoin... C'est quoi la finalité de ce script, faire afficher une image dans une fenêtre modale ? Si oui tu n'as pas besoin de php, faut tout faire en javascript.
16/09/2016, 21h40
unix27

la finalité du script est :

1/ la page (gallery.php) se charge et affiche plusieur image-->traitement marche bien je l'ai fait

2/ ensuite l'utilisateur choisi une image (toujours dans la page gallery.php)--> aussi je récupéré l'url de chaque image sélectionnées en javascript

3/ en fonction du lien sélectionné une fenêtre modale affiche l'image avec une grande dimension(dans gallery.php toujours... une div) donc puisque j'ai l'url(le paramétre) en javascript j'ai besoin de l'utiliser dans ma requête php pour n'afficher que l'image sélectionner et c'est ce que je ne sais pas faire pour le moment

pour plus de précision voici le code complet de ma page gallery.php statique... que je souhaite rendre dynamique

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!-- DOCTYPE html -->
<html>
    <head>
        <title>Gallery integration</title>
        <link href="vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
 
        <link href="vendor/bootstrap-material-design/dist/css/ripples.min.css" rel="stylesheet">
        <link href="vendor/bootstrap-material-design/dist/css/material-wfont.min.css" rel="stylesheet">
 
        <link href="assets/gallery.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <div class="row well">
                <div class="col-xs-12">
                    <span class="img-circle ju pull-left"></span>
                    <div class="pull-right userProgress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 50%;">
                                <span class="sr-only">50%</span>
                            </div>
                        </div>
                    </div>
                    <span class="number pull-right">50%</span>
                </div>
            </div>
 
            <ol class="breadcrumb">
                <li><a href="galleries.html">Galleries</a></li>
                <li class="active">Graz, Autriche</li>
            </ol>
 
            <div class="row">
                <div class="col-xs-2 col-xs-offset-1">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#firstPics">
                        <img src="toto/01.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#secondPics">
                        <img src="toto/02.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#thirdPics">
                        <img src="toto/03.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#fourthPics">
                        <img src="toto/04.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#fifthPics">
                        <img src="toto/05.jpg" class="img-responsive" />
                    </a>
                </div>
            </div>
 
            <a href="javascript:void(0)" class="btn btn-info btn-fab btn-raised mdi-content-add pull-right"></a>
        </div>
 
        <div class="modal fade" id="firstPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="assets/img/galleries/01/01.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="secondPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/02.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="thirdPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/03.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="fourthPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/04.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="fifthPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/05.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.js"></script>
 
        <script src="vendor/bootstrap-material-design/dist/js/ripples.min.js"></script>
        <script src="vendor/bootstrap-material-design/dist/js/material.min.js"></script>
        <script>
            $(document).ready(function() {
                $.material.init();
            });
        </script>
    </body>
</html>

17/09/2016, 03h30
ABCIWEB

Tout dépend si toutes les images à agrandir sont listées dans ta page, en d'autres termes si toutes tes vignettes sont dans cette page. Si oui tu n'as pas besoin de php puisque tu pourras faire afficher les images avec javascript pour peu que tu aies leur adresse, ce qui est apparemment le cas.

Par contre si tu as un système de pagination ajax, évidemment il faudra passer par ajax pour récupérer les adresses suivantes avec php pour les transmettre à javascript qui les fera afficher ensuite.

Mais remarque que dans les deux cas c'est javascript qui fait afficher l'image agrandie, pas php ;) Regardes des tutos javascript avec new Image().

Merci pour ta réponse en fait pour récapituler mon souci(j'avoue que je ne suis pas un expert en javascriopt... :) mais bon)
en gros j'ai une page qui s'appelle toto.php et dedans j'ai deux image
Code:

1 2 3 4 5 6 7 8 9 10 11 <div class="col-xs-2 col-xs-offset-1"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#firstPics"> <img src="toto/01.jpg" class="img-responsive" /> </a> </div> <div class="col-xs-2"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#secondPics"> <img src="toto/02.jpg" class="img-responsive" /> </a> </div>
et j'aimerai que quand je clique sur l'une de ces deux images... par exemple : (02.jpg) récupérer sa valeur en php avec

Code:

<?php echo ... ?>

pour cela j'ai créé une petite fonction en javacript
Code:

1 2 3 4 5 6 7 <script language="JavaScript"> function clic(param_img_select){ var $image_select=param_img_select return($image_select); } </script>
la valeur $image_select me retourne bien le nom de l'image qu'on je clique sur la première image j'ai 01.jpg et sur la deuxième j'ai bien 02.jpg
maintenant :) mon souci et comment récupérer ces valeurs dans php

Code:

<?php echo ... ?>

...
peut-être c'est une question super débutante mais bon j'avoue qu'il me reste juste cette petite partie à compléter dans ce petit projet :) le reste du traitement se fait coté serveur et là j'ai pas de souci particulier ;)
Merci

19/09/2016, 20h48
sekaijin

J'avoue que je ne comprends plus cette discussion

le client ouvre une url
le navigateur envoie la requête au serveur
le seveurr exécute le php
le php génère un texte
le serveur envoie le texte au client
le serveur termine le php (supprimé de la mémoire)
le navigateur reçois le text
le le navigateur parse le text
le navigateur créé un DOM
le navigateur affiche le DOM
le navigateur exécute le Javascript
l'utilisateur a enfin la main
l'utilisateur clique sur une image

ça fait un bon bout de temps que le PHP n'existe plus sur le serveur.
en lisant j'ai crus que tu avait compris ça mais en lisant le dernier message je ne sais plus.

A+JYT
19/09/2016, 23h53
unix27

La solution en jquery se trouve dans ce thread(qui ressemble au souci de ce sujet :) )
http://www.developpez.net/forums/d16...recuperer-php/

et ma question est comment implémenter la solution ci-dessus en javascirpt sans passer par la librairie JQUERY
(je ne souhaite pas utiliser jquery suite a des contraintes...)
voilà
20/09/2016, 08h23
SpaceFrog

Jquery c'est du javascript ...
20/09/2016, 10h48
unix27

oui :) je sais que Jquery c'est du javascript par contre au niveau de l'implémentation ce n'est pas la même chose...
21/09/2016, 20h17
sekaijin

Le truc c'est qu'on ne comprends pas ce que tu veux faire.
Un simple lien envoi le n° de l'image au serveur. Tout comme un simple http request.
Donc tant que tu ne t'expliqueras pas clairement je crain que nois soyons toujours aussi vague dans nos reponses.
A+
23/09/2016, 12h23
unix27
ok je vois, donc ce que je veux faire c'est intercepter l'élément onclick(javascript) et l'afficher en PHP : echo $variable
autrement dit, j'ai un ensemble d'image et je veux que lorsque je sélectionne une image je puisse afficher son src en php
voilà tout simplement de facon encore plus claire
html
Code:

1 2 3 4 5 6 7 <a href="#"> <img src="1.jpg" onclick="clic(this.href) /> </a> <a href="#"> <img src="2.jpg"onclick="clic(this.href) / > </a>
si je clique sur le lien de l'image je veux que le php m'affiche la valeur du src qui est : 2.jpg
javascipt
Code:

1 2 3 4 5 6 <script> function clic(param_img_select){ var $image_select=param_img_select alert($image_select); </script>
en javascrip le alert me retourne bien la valeur de src qui est :2.jpg... mais je ne sais l'afficher en php
php?? et c'est là mon petit problème de débutant que je n'arrive pas à résoudre

Code:

echo "comment afficher 2.jpg comme le fait ma petite fonction click"

Code:

1
2
<a href="ma page.php?img=1.jpg"><img src="1.jpg" onclick="clic(this.href)" /></a>
<a href="ma page.php?img=2.jpg"><img src="2.jpg" onclick="clic(this.href)" /></a>

Code:

echo $_GET['img'];

et ????

24/09/2016, 21h48
unix27

merci quand même sekaijin d'avoir pris la peine de répondre;) bon j'ai trouvé la solution c'était ça mon problème+solution partielle http://plnkr.co/edit/4XnLTZ557qMegqRmWVwU
maintenant en se basant sur l'exemple ci-dessous mon souci est comment je peux récupérer la valeur de l'id sélectionné en php
<?php echo ..... ?> puisque quand on clique sur le lien 1 par exemple le javascript récupére bien la valeur de l'id qui est 1 mais j'aimerai le récupéré la valeur du 1 en php