UPDATE JS - AJAX

Résolu/Fermé
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024 - 25 avril 2023 à 11:59
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024 - 27 avril 2023 à 17:47

Bonjour,

Je sollicite  votre aide. J'ai un problème j'ai besoin d'aide pour le résoudre.

Je souhaite mettre à jour un formulaire en JS et AJAX ça ne fonctionne pas

Mon Code

<form id="updateMem" method="POST">

<div class="form-group row">
                    <label for="nom" class="col-sm-2 col-form-label">Nom</label>
                    <div class="col-sm-10">  
                        <input type="text" class="form-control" name="nom" id="nom" value="<?php echo $nom; ?>">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="prenom" class="col-sm-2 col-form-label">Prénom</label>
                    <div class="col-sm-10">  
                        <input type="text" class="form-control" name="prenom" id="prenom" value="<?php echo $prenom; ?>">
                    </div>
                </div>

<!-- Et d'autres champs -->

                <div class="button_right">
                    <button type="submit" class="btn btn-primary" name="edit_mem" id="btn-up_mem">Enregistrer</button>
                </div>
</form>

au dessous le JS

<script>
                var formulaire = document.getElementById('updateMem');
                formulaire.addEventListener('submit', function(e) {
                e.preventDefault(); // empêche la soumission normale du formulaire

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'ajaxUpMem.php');
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onload = function() {
                    if (xhr.status === 200) {
                    console.log(xhr.responseText);
                    } else {
                    console.log('Une erreur est survenue : ' + xhr.status);
                    }
                };
                var formData = new FormData(formulaire);
                xhr.send(formData);
                });
</script>

Le PHP : ajaxUpMem.php

<?php

    require '../connexion.php';

    $requp = "UPDATE membre SET 
    id_famille = :id_famille,
    sexe = :sexe,
    nom = :nom,
    nom_ep = :nom_ep,
    prenom = :prenom,
    prenom2 = :prenom2,
    adr1 = :adr1,
    adr2 = :adr2,
    cp = :cp,
    ville = :ville,
    pays = :pays,
    tel = :tel,
    mobile = :mobile,
    email = :email,
    date_naissance = :date_naissance,
    lieu_naissance = :lieu_naissance,
    profession = :profession,
    photo = :photo,
    date_mod = :date_mod,
    user_mod = :user_mod,
    date_deces = :date_deces
    WHERE id_membre = :id_membre";
        
    $photo = $_POST['photo'];
    $old_photo = $_POST['old_photo'];
    $id_membre	= $_POST['id'];
    $id_famille = $_POST['id_famille'];
    $sexe = $_POST['sexe'];
    $nom = strtoupper($_POST['nom']);
    $nom_ep = strtoupper($_POST['nom_ep']);
    $prenom = ucfirst(strtolower($_POST['prenom']));
    $prenom2 = $_POST['prenom2'];
    $adr1 = $_POST['adr1'];
    $adr2 = $_POST['adr2'];
    $cp = $_POST['cp'];
    $ville = strtoupper($_POST['ville']);
    $pays = strtoupper($_POST['pays']);
    $tel = $_POST['tel'];
    $mobile = $_POST['mobile'];
    $email = htmlentities($_POST['email']);
    $date_naissance = $_POST['annee_naissance'].'-'.$_POST['mois_naissance'].'-'.$_POST['jour_naissance'];
    $lieu_naissance = $_POST['lieu_naissance'];
    $profession = $_POST['profession'];
    $date_mod = date('Y-m-d');
    $user_mod = $_POST["user_log"];
    if($_POST['jour_deces'] == '' OR $_POST['mois_deces'] == '' OR $_POST['annee_deces'] == '' ){
        $date_deces = '';
    }else{
        $date_deces = $_POST['annee_deces'].'-'.$_POST['mois_deces'].'-'.$_POST['jour_deces'];
    }
    
    if (!empty($_FILES['photo']['name'])) {
       
        $nom_fichier = $_FILES['photo']['name'];					
        $ext         = explode('.', $nom_fichier);
        $ext         = strtolower($ext[count($ext) - 1]);
        $nom_md5     = md5($nom_fichier);
        $taille      = $_FILES['photo']['size'];
        $type        = $_FILES['photo']['type'];
        $tmp         = $_FILES['photo']['tmp_name'];
        $chemin      = utf8_encode(stripslashes($nom_fichier));

        $dossier="./photo/".$id_membre.".".$ext.""; 
        if(move_uploaded_file ($_FILES['photo']['tmp_name'], $dossier)) {
            $photo = $id_membre.".".$ext;
        } 
        }else{
            $photo = $old_photo;
        }
   
    $datas = array(':id_membre'=>$id_membre, ':id_famille'=>$id_famille, ':sexe'=>$sexe, ':nom'=>$nom, ':nom_ep'=>$nom_ep, 
            ':prenom'=>$prenom, ':prenom2'=>$prenom2,  
            ':adr1'=>$adr1, ':adr2'=>$adr2, ':cp'=>$cp, ':ville'=>$ville , ':pays'=>$pays ,':tel'=>$tel , ':mobile'=>$mobile , ':email'=>$email,
            ':date_naissance'=>$date_naissance, ':lieu_naissance'=>$lieu_naissance, ':profession'=>$profession, ':photo'=>$photo,
            ':date_mod'=>$date_mod, ':user_mod'=>$user_mod, ':date_deces'=>$date_deces);   
    try{
        $requete = $pdo->prepare($requp);
        $requete->execute($datas);
    }
    catch(Exception $e){
        echo " Erreur ! ".$e->getMessage();
        echo " Les datas : " ;
        print_r($datas);
    }	

Merci d'avance pour vos retours
Macintosh / Chrome 112.0.0.0


A voir également:

9 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
25 avril 2023 à 12:01

Bonjour

Pour commencer, que ta fiche la console de ton navigateur lorsque tu fais appel à ton Ajax ?


0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
25 avril 2023 à 12:02

À noter également que ton code PHP ne retourne aucun affichage et par conséquent rien ne se mettra à jour dans ton formulaire....

0
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
25 avril 2023 à 12:21

Console

DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

Avant mon formulaire j'ai cette requête

$sql = 'SELECT * FROM membre where id_membre= :id_membre';
    $data = array(':id_membre'=>$_GET['id']);
    try{
        $requete = $pdo->prepare($sql);
        $requete->execute($data);
    
        $var = $requete->fetch();
        $id_famille = $var['id_famille'];
        $photo = $var['photo'];
        $old_photo = $var['photo'];
        $sexe = $var['sexe'];
        $nom = $var['nom'];
        $nom_ep = $var['nom_ep'];
        $prenom = prenom_double($var['prenom']);
        $prenom2 = prenom_double($var['prenom2']);
        $adr1 = $var['adr1'];
        $adr2 = $var['adr2'];
        $cp = $var['cp'];
        $ville = $var['ville'];
        $pays = $var['pays'];
        $tel = $var['tel'];
        $mobile = $var['mobile'];
        $email = $var['email'];
        $date_naissance = explode('-', $var['date_naissance']);	
        $annee_naissance = $date_naissance[0];
        $mois_naissance = $date_naissance[1];
        $jour_naissance = $date_naissance[2];
        $lieu_naissance = $var['lieu_naissance'];
        $profession = $var['profession'];
        $date_deces = explode('-', $var['date_deces']);
        $annee_deces = $date_deces[0];
        $mois_deces = $date_deces[1];
        $jour_deces = $date_deces[2];
        $date = $var['date'];
        $user = $var['user'];
        $date_mod = $var['date_mod'];
        $user_mod = $var['user_mod'];
    }catch(Exception $e){
        echo " Erreur ! ".$e->getMessage();
        echo " Les datas : " ;
        print_r($data);
    }     

0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
25 avril 2023 à 14:57

On reprend ...

Tu dis vouloir mettre à jour un formulaire en AJAX....
Mettre à jour un formulaire, pour moi, signigie que tu veux y afficher des informations.

Sauf que...

1 - Ton code sert à uploader un fichier via ce formulaire et traiter cet upload via un envoi en ajax ( tu envois des données... tu ne veux donc pas les "lire" pour les afficher dans ce formulaire )

2 -  Ton code JS est posé là .. comme ça ...  sans être dans une fonction ... et sans être appellé par un bouton ou quoi que ce soit dans ton code

3 - Si tu veux que ton code JS soit utilisé .. il faut, soit retirer le "submit" de ton bouton et y ajouter un "onclick" ... soit détécter la soumission du formulaire ( onSubmit )  pour faire, à la place de l'action "normale",  appel à ton code JS

En l'état .. normal que tu code ne marche pas... vu qu'il ne fait rien...


0
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
25 avril 2023 à 16:39

J'ai fait comme ça, mais ça ne marche toujours pas.

Merci d'avance pour ton retour

le form

<form id="updateMem" method="POST"> 

</form>

Le button

<button onclick="upMem()" class="btn btn-primary" name="edit_mem" id="btn-up_mem">Enregistrer</button>

La fonction JS

<script>
        function upMem() {
            var formulaire = document.getElementById('updateMem');
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'ajaxUpMem.php');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                } else {
                    console.log('Une erreur est survenue : ' + xhr.status);
                }
            };
            var formData = new FormData(formulaire);
            xhr.send(formData);
        }
    </script>

0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
25 avril 2023 à 23:52

Et donc ?  qu'est-ce qui s'affiche dans ta console ?

Si tu as des erreurs ( même provenant d'autre chose que cette partie du code ) il faut les corriger sinon ça peut bloquer l'exécution de ce code.

Si tu n'as pas d'erreur...  vois tu l'appel à ton ajax ? ( il faut activer le debugage du XHR sous FireFox ( ce que je te conseille fortement d'utiliser pour debugguer l'ajax) , ou, regarder dans l'onglet "réseau" si tu es sous chrome. ( mais beaucoup moins facile à lire.. )

Et donc, si tu vois ton appel ajax lorsque tu cliques sur ton bouton...  que t'affichent les console.log ? ( n'hésites pas à en ajouter dans ton code pouvoir si tu rentres bien dans ta fonction )

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
26 avril 2023 à 17:39

Bonjour,

Réponse tardive : navré.

J'ai mis des alert : ils affichent donc je passe bien dans la fonction.

Dans la console, je n'ai plus de message d'erreur.

La problème persiste, aucune mise à jour dans la base de données.

Est ce que je n'ai pas la bonne librairie ajax ?

D'où peut venir le problème ?

Merci pour vos retours


0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
26 avril 2023 à 17:49

Donc :

As tu regardé, dans la console, la ligne qui correspond à ton appel AJAX ?

Pour se faire .. le mieux ..c'est, via le navigateur FIREFOX, activer le debug du XHR ... puis, cliquer sur ton bouton pour déclencher l'appel AJAX.

Si aucune ligne n'apparait... c'est que ton bouton n'est pas correctement relié à ton JS ..  ( d'ailleurs, précise sur ton bouton le type="button" )

Si une ligne apparait.. il faut regarder dedans ce qui est retourné par le code php ..

exemple debug ajax firefox © @jordane exempe debug ajax
0
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
26 avril 2023 à 18:28

re,

Avec l'inspecteur Firefox, j'ai eu ceci :

Le formulaire contient un champ de sélection de fichier, mais ne spécifie pas la méthode POST et l’encodage « multipart/form-data ». Le fichier ne sera pas envoyé.

Effectivement, je n'avais pas précisé que j'avais un input type="file" (c'est ma faute)

J'ai modifié mon form

<form id="updateMem" method="POST" enctype="multipart/form-data"> 

Quand je clique sur le bouton, les changements sont bien pris en compte mais quand je recharge la page, j'ai toujours les anciennes données

Quel est le problème ? Le debugeur ne retourne pas d"erreur.

Dans le même ordre d'idée, j'aimerais savoir comment faire un JS pour gérer l'envoi de l'image 

Merci d'avance pour ton retour


0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
26 avril 2023 à 19:07

Tant que tu ne me montreras pas le resultat de l'appel ajax dans la console... je ne te donnerai pas plus d'aide.

En plus tu me parles de rafraichir la page pour voir des changements...  dans ce cas.. l'ajax ne te sert à rien...

De toutes façons, ta question initiale ne concerne que l'ajout en BDD ( via ajax) des données de ton formulaire. Pour toute autre demande, il faudra recréer une nouvelle discussion ( une fois que celle la sera résolue.. )

0
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
26 avril 2023 à 19:23

Voila ce que j'ai


0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
26 avril 2023 à 21:04

Clique sur le bouton "biut" à droite et regarde si d'autres choses s'affichent ..

Et avant de faire ça ... pense à ajouter des echo dans ton code PHP ... sinon ça risque de ne rien afficher.

Au passage, jette également un oeil aux différents tutos/exemples concernant l'upload de fichier en ajax

https://www.google.com/search?q=ajax+upload+file

0
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
26 avril 2023 à 21:56

Merci pour les tutos


0
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
27 avril 2023 à 17:47

Bonjour,

voici un echo de la requête

echo "Variable : ".$_POST['ville'];

RÉPONSE

J'ai supprimé du JS

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Et la ça marche


0