Update d'un profil

**dev_ia** · 07/06/2020, 13h51

Bonjour à tous,

Voilà, depuis 3 jours j'essaie de faire un formulaire d'update en ajax et php sans rafraîchir la page pour les utilisateurs, c'est à dire sur leurs page de profile si il souhaite changer leurs adresse mail ou mot de passe. avec ce que j'ai je n'y arrive pas ou presque bon mais au faite pour le faire j'ai pris le même code ajax sur l'inscription des utilisateurs je ne sais pas si on doit faire comme sa ou il faut modifier le code

, je suis pas encore très à l'aise avec ajax. quelqu'un peut m'aider a résoudre mon problème ca serait génial , merci d'avance.

formulaire d'update :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!-- FORM FOR UPDATE PROFILE -->
                            <div class="ui tab segment " data-tab="param-tab">
                                <form method="post" action="" id="updateprofile" >
                                    <div class="row">
                                        <div class="heading-content text-center">
                                            <div class="heading">
                                                <h4 class="title" style="color:#dedede;text-transform: uppercase;">Paramètres du compte<i class="fas fa-cog fa-spin" style="margin-left:5px;color: #004c6b;"></i></h4> 
                                            </div>
                                        </div>
                                        <div id="update_success" class="ui blue message" style="max-width: 350px;display:none;">Vos informations on été mise a jours.<i class="check circle outline icon" style="margin-left:9px;color:#40ff56;"></i></div>
                                        <div class="col-md-12 col-sm-12 col-xs-12">
 
                                            <div class="form-group validate-input">
                                                <label for="email"><i class="fa fa-at" id="user"></i>Votre adresse mail</label>
                                                <input type="email" class="form-control input-label"  style="max-width: 350px;" id="email" name="email" placeholder="Email" value="<?php echo $user['email']; ?>" required>
                                            </div>
                                        </div>
 
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group validate-input">
                                                <label for="pseudo"><i class="fa fa-user" id="user"></i>Votre pseudo</label>
                                                <input type="text" class="form-control input-label" style="max-width: 350px;" id="pseudo" name="pseudo" placeholder="Votre pseudo" value="<?php echo $_SESSION['pseudo']; ?>" disabled />
                                            </div>
                                        </div>
 
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group">
                                                <label for="password"><i class="fa fa-lock" id="user"></i>Votre mot de passe</label>
                                                <input type="password" class="form-control input-label" style="max-width: 350px;" id="password" name="newpassword" placeholder="Votre mot de passe">
                                            </div>
                                        </div>  
 
                                        <div class="col-md-12 btn-resp">
                                            <button type="submit" class="ui inverted primary basic button btn-default btn abt-btn" name="envoi">sauvegarder<i class="fas fa-sign-in-alt sign" style="margin-left: 5px;"></i>
                                                <span class="spinner-grow spinner-grow-sm loading hide" role="status" aria-hidden="true"></span>
                                            </button> 
                                        </div>         
                                    </div>
                                </form>
                            </div>
                            <!-- FORM FOR UPDATE PROFILE -->

Ajax:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function() {
 
    $('#updateprofile').on('submit', function(e){
        form = $('form#updateprofile')
        button = form.find('button');
        $.ajax({
            url: './users/update.php',
            type: 'POST',
            type: $(this).serialize(),
            dataType: 'json',
            beforeSend: function() {
                $(".spinner-grow").removeClass("hide");
                $(".sign").addClass("hide");
                button.prop('disabled', true);
                form.find('div.invalid-feedback').remove();
                form.find('input').each(function() {
                    $(this).removeClass('is-invalid');
                });
            }
        }).done(function(data) {
            if(data != undefined && data != '') {
                if(data.success) {
                   form.fadeOut(function() {
                        $('#update_success').fadeIn();
                        setTimeout(function(){
                            window.location.replace("http://localhost/xampp/DEv/index.php");
                        }, 8000)
                    });
                } else {
                    form.find('button').html("S'inscrire");
                    button.prop('disabled', false);
                    if(data.errors.length > 0) {
                        errors = data.errors
                        $.each(errors, function(key,value) {
                            field = form.find('#' + value[0]);
                            message = value[1];
                            field.addClass('is-invalid');
                            field.after('<div class="invalid-feedback">' + message + '</div>');
                        });
                    } else {
                        alert("Une erreur s'est produite.");
                    }
                }
            } else {
                alert("Une erreur s'est produite.");
            }
        });
        e.preventDefault();
    });
});

et code php update.php:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
$errors = [];
$success = false;
session_start();
require '../../inc/init.php';
if(isset($_SESSION['id']))
{
    $sql_user = 'SELECT * FROM users WHERE id = :id';
    $requser = $pdo->prepare($sql_user);
    $requser->execute(
        [
            'id' => $_SESSION['id']
        ]
    );
    $user = $requser->fetch();
 
 
 
    if(isset($_POST['email']) AND !empty($_POST['email']) AND $_POST['email'] != $user['email'])
    {
        $email = trim($_POST['email']);
        $pseudo = trim($_POST['pseudo']);
        if(filter_var($email, FILTER_VALIDATE_EMAIL))
        {
            $sql_updateMembre = 'SELECT * FROM users WHERE email = :email OR pseudo = :pseudo';
            $req_updateMembre = $pdo->prepare($sql_updateMembre);
            $req_updateMembre->execute(
                [
                    'email' => $email,
                    'pseudo' => $pseudo
                ]
            );
 
            //si le mail existe
            if($req_updateMembre->rowCount() == 0)
            {   
                $sql_insertemail = 'UPDATE users SET email = :email WHERE id = :id';
                $insertemail = $pdo->prepare($sql_insertemail);
                $insertemail->execute(
                    [
                        'email' => $email,
                        'id' => $_SESSION['id']
                    ]
 
                );
 
                $success = true; 
            }else {
                $selectMembre = $req_updateMembre->fetch();
                if($selectMembre['email'] == $email) {
                    array_push($errors, ['email', "L'adresse e-mail a déjà été utilisée"]);
                } elseif ($selectMembre['pseudo'] == $req_updateMembre) {
                    array_push($errors, ['pseudo', "Le pseudo a déjà été utilisé"]);
                }
            }          
        }else{
            array_push($errors, ['email', "L'adresse e-mail n'est pas au bon format"]);
        }
    }
}
$return = [
    'success' => $success,
    'errors' => $errors
];
 
die(json_encode($return));
?>

**Toufik83** · 07/06/2020, 15h20

Bonjour,

Il y'a pas mal de choses à modifier, comme par exemple le data au lieu de type:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
type: $(this).serialize(),

devrait être

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
data: $(this).serialize(),

Pour voir le contenu de data de done, ajoutes un console.log au début et ouvre la console du navigateur pour voir le log:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
done(function(data) {
   console.log("data est :",data);
    .....
}

Utilise aussi le callback fail pour récupérer l'erreur si elle existe...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
...
.done(function(data) {
   console.log("data est :",data);
    .....
})
.fail(function(erreur){
    alert("Erreur ajax :"+erreur.responseText);
})

Puis dans le fichier php (que je n'ai pas tout vérifié), si le rowCount()==0 cela dit que la requête n'a rien retourné alors que toi tu veux vérifier que l'email existe donc pas ==0 mais >0:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
//si le mail existe
if($req_updateMembre->rowCount() > 0){...}

C'est ce que j'ai pu remarquer pour l'instant.

Update d'un profil

jQuery

Discussions similaires

Partager

Partager