Connaître dans PHP ce qui a été modifié par javascript ? [Résolu]

[ALeX850]

Bonjour,
J'ai un souci avec le site internet que je suis en train de faire.
En gros dans ma page, il y a des miniatures d'images et avec javascript et onclick dans la balise de l'image (donc avec une petite valeur de width et height); je modifie le src d'une image affichée en dessous, donc lorsque je clique sur une miniature, j'ai la même image qui s'affiche en gros (car dans cette balise img je n'ai pas changé les dimensions).

Voilà l'appel :

Code :

<?php echo '<img src="'.$donnees['image_chemin'].'" alt="miniature" id="miniapaysage" width="192" height="136" onclick="changerimage(this.src)" />'; ?>

Le code javascript (l'id de ma grande image est "grande"):

Code :

1
2
3
4
5
function changerimage(srcimage)
{
	document.getElementById("grande").src=srcimage;
	document.getElementById("urlimage").value = srcimage;
}

et dans mon index :

Code :

<?php echo'<img src="'.$urlimagedepart.'" alt="image participant" id="grande" />'; ?>

Le problème c'est que après, je ne "sais" plus quelle est la nouvelle image affichée dans la page en cours (dans mon index).

Ma question est tout simplement : comment puis-je connaître la nouvelle url de l'image modifiée ? J'en ai besoin pour savoir de quelle image il s'agit et afficher les informations la concernant.

(Je ne peux pas faire de formulaire avec un champs hidden, ça n'irait pas avec le modèle de la page)

Merci pour votre aide !

[philodido]

A quel moment tu voudrais récupérer l'info ? quelle action ?

[ALeX850]

Eh bien en fait l'url de l'image me permet de l'identifier, donc d'aller récupérer son titre et sa description.
Donc après avoir cliqué sur l'image, j'aimerais pouvoir connaître laquelle est-ce. Mais je n'ai trouver aucune voie pour faire transiter cette info.

[philodido]

Si tu veux récupérer l'url coté serveur au moment du clique sur l'image il faut que tu l'envoi en Ajax.

vite fait ça donnerait un truc comme ça :

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
function getXhr(){
 
  var xhr = null;
 
  if(window.XMLHttpRequest) // Firefox et autres
     xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
     try {
                 xhr = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
  }
  else { // XMLHttpRequest non supporté par le navigateur
     alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
     xhr = false;
  }
  return xhr;
}
 
function go(){
 
  var xhr = getXhr();
 
  // Ici comment faire du post
  xhr.open("POST","ajax.php",true);
 
  // ne pas oublier ça pour le post
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  // ne pas oublier de poster les arguments : ici, l'url de l'image
  xhr.send(srcimage);
}

et tu appel la fonction go() au moment du click dans la fonction changerImage() dans le cas présent.

ajax.php est le fichier où tu récupèrera la donnée coté serveur.

[ALeX850]

Merci pour ton aide !
Donc j'ai essayé de mettre en place ce que tu m'as dit :
j'ai créé un nouveau fichier .js où j'ai mis les deux fonctions, en remplaçant ajax.php par mon index.php et en ajoutant go() dans ma fonction changerimage().
mais ensuite dans mon index, comment j'accède à ce qui a été envoyé ?
Merci

[philodido]

Tu y accède comme une donnée post normale :

Code :

$urlImage = $_POST['srcimage'];

[ALeX850]

J'ai essayé, mais j'ai une erreur comme quoi, srcimage est un undefined index. J'ai aussi essayé de tourner les fonctions dans tous les sens mais pas de résultat
La console javascript de chrome me dit :
"Uncaught TypeError: Cannot set property 'value' of null"; je ne suis pas sûr de bien comprendre.

[philodido]

Qu'est ce que tu essaye de faire avec srcimage coté serveur exactement ?
Je serais toi j'essayerai de l'enregistrer dans une base ou dans un fichier.
A quel moment il fait cette erreur exactement ?

up: tu dois avoir un problème dans ton js de redimensionnement changement de l'image quand tu paramètre la value d'un élément html. A priori ça n'a pas l'air de venir des fonctions Ajax.

[ALeX850]

En fait je veux juste connaître l'url pour identifier l'image cliquée, et aller chercher dans ma base sql son titre et sa description.
Non en fait je viens de vérifier, ce que j'ai écrit concernait une de mes variables au niveau de l'erreur sur la console.
Après il m'a écrit que lorsqu'on envoie srcimage dans go(), il ne connaissant pas srcimage; donc j'ai rajouté srcimage en argument dans go() et je l'ai envoyé aussi dans changerimage; mais j'ai toujours "undefined index", mais plus d'erreur avec la console.

[philodido]

Oui effectivement, j'avais oublier d'adapter mon code au cas présent en passant srcimage à la fonction go(), mais tu as rectifié par toi même .

A quel niveau tu as l'erreur "undefined index" ?

Je crois que tu as un problème à ce niveau :

Code :

1
2
3
4
5
6
7
function changerimage(srcimage)
{
	document.getElementById("grande").src=srcimage;
	document.getElementById("urlimage").value = srcimage;
 
 
}

[ALeX850]

Donc c'est lorsque j'essaye d'afficher $_POST['srcimage'] au niveau de mon index, sur ma page, j'ai l'encadré orange qui me dit que srcimage est undefined index; en gros je suppose qu'il ne l'a pas reçu, pourtant je n'ai pas déceler d'erreur dans la console.
(au niveau de la pratique : j'ai mis les fonctions dans un autre fichier .js, que j'ai ajouté avec les balises <script> avant mon fichier changerimage.js; mais j'ai aussi essayé de rajouter les fonctions au-dessus dans le même fichier, mais ça ne marche pas non plus).

[philodido]

Oui effectivement, j'avais oublier d'adapter mon code au cas présent en passant srcimage à la fonction go(), mais tu as rectifié par toi même .

A quel niveau tu as l'erreur "undefined index" ?

Je crois que tu as un problème à ce niveau :

Code :

1
2
3
4
5
6
7
function changerimage(srcimage)
{
	document.getElementById("grande").src=srcimage;
	document.getElementById("urlimage").value = srcimage;
 
 
}

Inverse, par Exemple : srcimage = document.getElementById("grande").src;

[ALeX850]

En fait l'erreur de value = null que j'avais tout à l'heure, c'était pour autre chose, mais c'est innofensif pour ce que je veux faire maintenant; même en neutralisant la ligne ça ne change rien.
Par contre je comprends pas pourquoi tu me demandes de modifier ma ligne ?
Elle fait bien ce que je lui demande, c'est-à-dire, modifier l'image centrale en cliquant sur la miniature : la src de l'image centale prend la valeur de l'url de la miniature cliquée. En gros, si j'inverse, ça, ne marche plus.
Mais mon problème c'est de pouvoir connaître cette valeur d'url modifiée dans mon index.

[philodido]

Envoyé par ALeX850

Donc c'est lorsque j'essaye d'afficher $_POST['srcimage'] au niveau de mon index, sur ma page, j'ai l'encadré orange qui me dit que srcimage est undefined index;

Tu ne peux pas faire ça car la variable $_POST['srcimage'] n'existe qu'au moment où tu l'envoi dans ajax.php ou index.php. Si tu affiche index.php même juste après tu n'y aura donc pas accés. Il faut que tu l'enregistre dans ta base ou dans un fichier juste après son l'avoir récupéré dans index.php et que tu affiche l'enregistrement par la suite.

Si tu veux rafficher la donnée directement sur la page en cours sans avoir à la recharger pour faire ta vérif tu peux le faire en ajax en rajoutant ce code dans go()

Code :

1
2
3
4
5
6
7
8
9
10
11
// On défini ce qu'on va faire quand on aura la réponse
  xhr.onreadystatechange = function(){
 
  	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  	if(xhr.readyState == 4 && xhr.status == 200){
      reponse = xhr.responseText;
  		// On se sert de innerHTML pour afficher la donnée dans la page actuelle
  		document.getElementById(un Id que tu aura défini dans ton html).innerHTML = reponse;
 
  	}
  }

[ALeX850]

En gros, est-ce qu'il faudrait que je fasse un script php (qui sera la destination de go()) qui modifie une entrée d'une table, par exemple "url derniere image cliquée"; puis j'irais la chercher ensuite pour l'afficher ?
Mais si je fais ça, n'y a-t-il pas un problème si deux personnes, imaginons, clique sur une image dans le même laps de temps ?

[philodido]

Oui c'est exactement ça.

Pour ton problème de gestion pour plusieurs utilisateurs c'est autre chose. Il faut que tu gère des sessions voir des comptes utilisateur avec inscription, authentification....

Mais essaye déjà comme ça et si ça marche n'oublie pas de mettre le post en résolu.

Pour la gestion des comptes tu pourra créer un autre post par la suite.

[ALeX850]

Bah j'ai déjà fait un système de sessions et de comptes utilisateur sur le site. Mais je vois pas trop l'intérêt des comptes utilisateurs à ce niveau là vu qu'il faut que tout le monde puisse voir les infos; donc faut que je gère tous les visiteurs indépendemment non ?
Bon je vais essayer ça, merci encore pour ton aide.

[philodido]

Envoyé par ALeX850

Mais je vois pas trop l'intérêt des comptes utilisateurs à ce niveau là vu qu'il faut que tout le monde puisse voir les infos;

Si tu veux vraiment pas gérer ça avec des comptes utilisateurs tu peux aussi passer par des cookies pour retenir les infos de personnalisations de chaque utilisateur.

[ALeX850]

Après avoir essayé toute la journée, je n'y arrive toujours pas:
J'ai réfléchi à plein de méthodes différentes sans succès.

Finalement j'ai essayé de faire comme tu as proposé, mais au début je n'arrivais pas à recevoir la donnée, donc j'ai regardé des tutos sur AJAX, et j'ai modifié ma fonction de cette manière:

Code :

1
2
3
4
5
6
7
8
9
function changerImage(srcimage)
{
	var xhr = getXMLHttpRequest();
	var urlimage = encodeURIComponent(srcimage);
	xhr.open("GET", "enregistrerurl.php?src=" + urlimage, true);
	xhr.send(null);
        document.getElementById("grande").src=srcimage;
	document.getElementById("urlimage").value = srcimage;
}

Je ne sais pas pourquoi, mais si je mettais "document.getElementById("grande").src=srcimage; et document.getElementById("urlimage").value = srcimage;" aau début, ça ne marchait pas.

et après dans enregistrerurl.php je fais les traitements, et ensuite bien sûr je me suis rendu compte que de faire ça, ça ne pouvait pas marcher car de toute manière la page n'était pas régénérée !!

Il n'y a rien à faire, j'ai pas le niveau pour comprendre correctement les tutos sur AJAX (alors que j'avais vu le système de callback avec GTK); je ne vois absolument pas comment afficher le titre et la description.

Alors j'ai pensé à une solution où j'aurais en permanence dans ma page un tableau à jour contenant l'url avec le titre et la description correspondante, mais je ne sais pas comment l'utiliser en javascript au moment où le onclick de l'image est déclencher; j'ai cherché mais à vrai dire je n'ai pas trouvé, alors si vous pouviez m'aider sur ce point, je vous remercie.

[ALeX850]

En fait non, le mieux que je puisse faire c'est :
lors du traitement en PHP, je vérifie dans la BDD à quel titre, quelle description correspond src image, puis je renvoie une chaine, et dans la callback je parse la chaine pour faire les modifs avec innerHTML.

Mais plusieurs problèmes:
est ce que lors du onclick je peux passer en paramètre et la srcimage dont j'ai absolument besoin et la fonction callback qui modifiera les données avec la réponse du serveur ?

De toute manière, j'ai fais des tests en suivant les tutos, mais je n'arrive pas à avoir la moindre réaction basique :

J'ai au préalable ajouter le script de création de XHR
Puis ensuite j'ai le .JS suivant:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 function changerImage(callback) {
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		}
	};
 
	xhr.open("GET", "enregistrerurl.php", true);
	xhr.send(null);
}
 
function readData(sData) {
	alert(sData);
}

Le traitement en PHP:

Code :

1
2
<?php header("Content-Type: text/plain");
	echo "OK"; ?>

Et enfin je l'appelle lors du clic sur une image :

Code :

echo '<img src="'.$donnees['image_chemin'].'" alt="Miniature" id="miniaportrait" width="136" height="192" onclick="changerImage(readData);" onMouseOver="Javascript:this.width=165;this.height=206;" onMouseOut="Javascript:this.width=136;this.height=192;" />';

Et quand je clique je n'ai rien qui se passe ! pourtant il me semblait que c'était le test le plus basique que je puisse faire.

Merci de m'éclairer