XMLHttpRequest, lien entre un javascript et la base de donnée à incrémenter

22 mai 2021, 17:15

Bonjour,
J'ai une base de données contenant plusieurs tables, dont l'une comprend notamment les adresses des photos, avec leurs noms, leurs catégories et deux colonnes à remplir, un compteur de vues et un compteur de téléchargement.
La visualisation des photos est réalisée par Fancybox 3.
Je ne parviens pas à recevoir la donnée transmise par l'objet XHR en PHP pour incrémenter la table concernée de la database.

le PHP pour la préparation de la visualisation :

Code : Tout sélectionner

for ($i=0 ; $i < $result->num_rows ; $i++) {
					$row = $result->fetch_assoc() ;
					$id = $row['id'];
					$path_img = $row['path_img'];
					$path_img400 = $row['path_img400'];
					$path_img1020 = $row['path_img1020'];
					$description = $row['description'];
					$id_members = $row['id_members'];

					// Extraction du prénom, nom et pays de l'auteur de la photo
					$result1 = $conn->query('SELECT firstname, lastname, country FROM members WHERE id = "' . $id_members . '"');
					if ($result1) {
						$row1 = $result1->fetch_assoc();
						$firstname = $row1['firstname'];
						$lastname = $row1['lastname'];
						$country = $row1['country'];
					}

Le php pour les images :

Code : Tout sélectionner

// Conception de la grille de présentation des photos
					echo '<div class="grid2">';
					echo '<a id="' . $id . '" onclick="counter("' . $id . '")" class="d-block mb-4" href="' . $path_img . '" data-fancybox data-caption="' . $description,'<br>',$firstname,' ',$lastname,' - ',$country . '" style="margin: 5px;"><img class="img-fluid" src="' . $path_img400 . '" alt="" /></a>';
					echo '</div>';
					echo '<span id="msg"></span>';

				}
				$result->free();
				?>

le script de création de l'objet XHR :

Code : Tout sélectionner

function getXMLHttpRequest(){
				var xhr = null;
				if (window.XMLHttpRequest || window.ActiveXObject) {
					if (window.ActiveXObject) {
						try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						}
						catch(e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
					}else {xhr = new XMLHttpRequest();
						  }
				}else {
					alert("Navigateur incompatible avec XMLHTTPRequest");
					return null;
				}return xhr;
			}

Le script Fancybox :

Code : Tout sélectionner

$("[data-fancybox]").fancybox({
				// Les options
				preventCaptionOverlap: true,
				buttons: [
					"zoom",
					"fullScreen",
					"download",
					"thumbs",
					"close"
				],
				animationEffect: "zoom-in-out",
				transitionEffect: "tube",

				afterShow : function( instance, current ){
					var itemId = current.opts.$orig.attr('id');
					counter(itemId);
					msg.innerText = itemId;		
				},

			});

Le script counter.js déclenché par onclick sur une photo :

Code : Tout sélectionner

function counter(itemId) {
				let xhr = getXMLHttpRequest();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						resultat.innerHTML = xhr.responseText;
					}
				}
				xhr.open("GET", "counter.php?itemId='+itemId+'", true);
				xhr.send();
			}

Le script counter.php qui doit recevoir la donnée par le javascript :

Code : Tout sélectionner

if (isset($_GET['itemId'])) {
	
    $itemId = htmlspecialchars($_GET['itemId']);
	echo $itemId . ' <br><br><br><br> $itemId à la ligne 23 de counter.php';
			
    $query = "SELECT * FROM img WHERE id = '$itemId'";
    $result = mysqli_query($conn, $query);
	
    if (!empty($result)){// Si itemId est trouvé dans la table img on incrémente le compteur viewed
		$sql = "UPDATE img set viewed = (viewed + 1) WHERE id = '$itemId'";
        $result1 = mysqli_query($conn, $sql);
	}
}

Tout fonctionne très bien !
Cependant je ne parviens pas à recevoir et/ou à envoyer (je ne sais pas) la donnée qui est l'id de la photo dans sa table.

Pouvez-vous m'aider, je suis dans cette impasse depuis déjà plus d'une semaine...
Merci d'avance !!

23 mai 2021, 18:10

Salutations !

Avec la console du navigateur (F12), tu peux suivre les échanges réseau (onglet Network) et voir quelles informations sont envoyées et quelle réponse est retournée. Tu pourras ainsi voir passer l'appel fait par ton script et la réponse envoyée par le serveur (qui devrait t'afficher le message $itemId . ' <br><br><br><br> $itemId à la ligne 23 de counter.php'). Tu sauras déjà si le problème vient de l'appel javascript ou du traitement php

07 juin 2021, 17:36

J'ai ajouté afterShow dans le script Fancybox 3

Code : Tout sélectionner

afterShow : function( instance, current ){
					var itemId = current.opts.$orig.attr('id');
					counterpost(itemId);
				}

J'ai modifié le script de transmission de l'info vers la table (function counterpost.js) en remplaçant notamment $_GET par $_POST :

Code : Tout sélectionner

function counterpost(itemId) {

	var xhr = new XMLHttpRequest();
	let formData = new FormData();
	formData.append('id', itemId)
	var url = "counter.php";

	xhr.open('POST', url, true);

	if(xhr.readyState == 4 && http.status == 200) {
	}

	xhr.send(formData);
}

J'ai adapté le script counter.php :

Code : Tout sélectionner

if (isset($_POST['id'])) {

	$itemId = htmlspecialchars($_POST['id']);
	
	$query = "SELECT * FROM img WHERE id = '$itemId'";
	$result = mysqli_query($conn, $query);

	if ($result){// Si itemId est trouvé dans la table img on incrémente le compteur viewed
		$sql = "UPDATE img set viewed = (viewed + 1) WHERE id = '$itemId'";
		$result1 = mysqli_query($conn, $sql);
		if ($result1){
			echo $itemId . ' Update realised';
		} else {
			echo $itemId . ' Update not possible';
		}
	}
}

Le compteur de visualisation d'une photo fonctionne parfaitement.

En revanche, Je suis à la recherche de l'instance ou de la valeur du click sur le bouton download pour trouver le moyen de communiquer cette info à la table pour incrémenter le compteur.
Merci pour votre aide.

XMLHttpRequest, lien entre un javascript et la base de donnée à incrémenter

Qui est en ligne