[RESOLU] repenser ma fonction dblclick

Eléphanteau du PHP | 38 Messages

01 août 2020, 05:11

Bonjour tous(tes)

Je croyais que ce site avait été supprimé. C'aurait été dommage car il rend de bons services.
En parlant de services ... j'ai passé une partie de l'été à créer un jeu de mots croisés pour mon site. Rien d'original car ça existe déjà. Il est fonctionnel mais je bute sur une option que je n'ai pas pu mettre en pratique.
Pour ce jeu je me sers du code de glisser/déposer ( drag & drop) du site de openclassrooms.com . Le joueur dispose d'un bassin de lettres ( un tableau) qu'il doit glisser/déposer dans les cases. Toutes les lettres de la solution du jeu sont dans ce tableau. Une fois complété il restera des lettres non utilisées. Il devra composer un mot caché avec ces lettres.
J'arrive bientôt à mon problème.
On peut supprimer des lettres, une à une. J'ai prévu une petite fonction à cet effet.

Code : Tout sélectionner

dropper.addEventListener('dblclick', function() { var ajout = dropper.id; document.getElementById('correction2').innerHTML = ajout; });
Le numéro de la case (dropper.id) est envoyé vers un formulaire assez banal. Et ce formulaire envoie la requête vers une page php qui supprime la lettre. Elle est automatiquement retournée dans le tableau.
Ça fonctionne bien sauf que ... le joueur doit cliquer sur la lettre et encore cliquer sur le "valider" du formulaire.

Code : Tout sélectionner

<form id="formulaire2" method="post" action="pratique5.php"> <p> <textarea name="erratus2" id="correction2"></textarea> <button id="submit-form2" name="submit-form2" value="valider"> <span style="font-size:20px; font-weight:bold; color:green;">Supprimer la lettre </span> </button> </p> </form>
J'aimerais que la lettre soit supprimée dès le double clic.
J'ai presque usé un clavier à tenter différents procédés mais il est temps d'admettre que je tourne en rond.
J'apprécierais un conseil. Merci à l'avance.

a+ et bonne journée
Pourquoi faire simple quand on peut faire compliqué ?

Mammouth du PHP | 1365 Messages

01 août 2020, 16:32

utiliser https://api.jquery.com/jquery.post/ pour appeler pratique5.php avec les bonnes données.

Eléphanteau du PHP | 38 Messages

01 août 2020, 17:55

Merci de ta réponse, or. Oui, j'avais tâté jquery pour obtenir le résultat souhaité mais j' y avais ensuite tourné le dos, un peu craintif de m'enliser dans un bourbier. Je vais étudier ce tutoriel plus en profondeur pour voir s'il y aurait la solution. Il y a sans doute des erreurs dans ma façon de procéder, même si ça fonctionne. Mon idée était d'envoyer le numéro de la case et php identifiait la lettre dans cette case et je me servais de unset pour la supprimer.
Le code de la page pratique5.php

Code : Tout sélectionner

<?php include('mabd.php'); if(isset($_POST['submit-form2']) ){ $erratus2 = $_POST['erratus2']; // À partir du no. de case j'allais chercher les lettres déjà enregistrées avec le no des cases dans une autre colonne. J'enlevais les virgules avec explode et ensuite, si erratus2 se comparait à la clé du no. de case, unset faisait le reste. $req2 = $bdd->prepare('SELECT * FROM croise WHERE ip = ?'); $req2->execute(array($_SERVER['REMOTE_ADDR'])); while($donnees=$req2->fetch()){ $nom = $donnees['nom']; $lacase = $donnees['lacase']; $nomen = explode(',', $nom); $caseur = explode(',', $lacase); foreach($caseur as $cle => $valeur){ if($erratus2 == $valeur){ unset($nomen[$cle]); unset($caseur[$cle]); } } } // Une fois la lettre supprimée je mettais à jour (update) la table avec ce qui restait de lettres. foreach($nomen as $mot){ } foreach($caseur as $no){ } $nouv_mot = implode(',', $nomen); $nouv_caseur = implode(',', $caseur); $req3=$bdd->prepare('UPDATE croise SET nom = :nom, lacase =:lacase WHERE ip = :ip'); $req3->execute(array( 'nom' => $nouv_mot, 'lacase' => $nouv_caseur, 'ip' => $_SERVER['REMOTE_ADDR'] )); header('Location: mots_croises.php'); // } } ?>
Bonne journée
Pourquoi faire simple quand on peut faire compliqué ?

Eléphanteau du PHP | 38 Messages

03 août 2020, 05:58

Salut

Je pense avoir fait des progrès mais il reste encore des obstacles à franchir. En ajoutant une requête XMLHttpRequest à ma fonction je peux contourner le formulaire mais à ma connaissance cette méthode permet seulement de passer une valeur de la variable. Dans cet exemple j'ai mis la valeur de la variable à 3 mais cette valeur doit pouvoir varier sans que j'intervienne, sinon c'est inutile. J'ai bien peur de ne pas y échapper, il faut passer par jquery, hein ?

Code : Tout sélectionner

dropper.addEventListener('dblclick', function() { // var ajout = dropper.id; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { // alert(xhr.responseText); } }; xhr.open("GET", "pratique5.php?data=3", true); xhr.send(null); // document.getElementById('correction2').innerHTML = ajout; });
Bonne journée
Pourquoi faire simple quand on peut faire compliqué ?

Mammouth du PHP | 684 Messages

03 août 2020, 09:26

rien n'oblige à code "3" en dur.

dropper.addEventListener('dblclick', function() {
var ajout = dropper.id;
document.getElementById('correction2').innerHTML = ajout;
});

Eléphanteau du PHP | 38 Messages

03 août 2020, 16:03

Hello tof73

Merci de t'intéresser à ma recherche mais si tu remontes à mon premier message tu verras que c'est exactement ce que je faisais. Ça me permet seulement d'envoyer les infos au formulaire. Mais je veux éviter le formulaire. (Je m'étais sans doute mal exprimé). J'ai donc fait un test avec la requête XMLHttpRequest. À l'aide de cette requête l'information est acheminée directement vers la page de traitement sans passer par le formulaire. C'est déjà un gros progrès mais tout n'est pas réglé pour autant.

Premièrement je n'ai pas trouvé le moyen de faire passer la variable mais seulement une chaîne de caractères (ou un nombre). Avez-vous déjà vu cette syntaxe quelque part? J'ai souligné la partie un peu bizarre.

Deuxièmement, il faut régler premièrement et on verra.

Code : Tout sélectionner

dropper.addEventListener('dblclick', function() { var ajout = dropper.id; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { // alert(xhr.responseText); } }; xhr.open("GET", [u]"pratique5.php?"+ajout[/u], true); xhr.send(); });
Bonne journée
Pourquoi faire simple quand on peut faire compliqué ?