Envoi email ET lancement fenêtre modale

**amdawb** · 17/11/2016, 20h18

Bonjour,

Voulant personnaliser un Tutoriel, je me heurte à une difficulté: Comment, APRÈS ( OU PENDANT ?) envoi du mail de réinitialisation , afficher les messages $_SESSION['flash'] dans une fenêtre modale.

Mon code ci-dessous déclenche la modal box juste le temps que prend l'envoi du mail (200 ms), puis disparaît.

Je pense que le click sur le <button id="myBtn"> ne peut pas gérer 2 évenements (l'un en php et l'autre en javascript) en même temps.
En attendant quelques pistes , je me penche sur la possibilité de le faire en Ajax.

Cordialement.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<?php
    if(!empty($_POST) && !empty($_POST['email']) ){ 
        require_once('inc/db.php');
        require_once('inc/functions.php');
        $req=$pdo->prepare('SELECT * FROM users WHERE email = ? AND confirmed_at IS NOT NULL ');
        $req->execute( [$_POST['email']]);
        $user=$req->fetch();
        if($user){
            session_start();
            $reset_token = str_random(60);
            $pdo->prepare('UPDATE users SET reset_token = ?, reset_at = NOW() WHERE id = ? ')->execute([$reset_token,$user->id]);
 
            $_SESSION['flash']['success'] = "Des instructions pour réinitialiser votre mot de passe vous ont été envoyées dans votre boite email ";
            mail($_POST['email'],'Réinitialisation de votre mot de passe',"Afin de réinitialiser votre mot de passe, merci de cliquer sur ce lien\n\nhttp://localhost/grafikart/reset.php?id={$user->id}&token=$reset_token ");
            //header('Location: '.$_SERVER['HTTP_REFERER']);        
            //exit();
        }else{
            $_SESSION['flash']['danger'] = "Aucun compte ne correspond à cette adresse"; 
        }
    }
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Réinitialiser mon mot de passe oublié</title>
		<link href="css/app.css" rel="stylesheet">
		<link href="css/espace-membre.css" rel="stylesheet">     
		<style>
			.modal {display:none;position:fixed;z-index: 1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4); }
			.modal-content {background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width: 80%;}
			.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
			.close:hover, .close:focus {color: black;text-decoration: none;cursor: pointer;}
		</style>       
		<script type="text/javascript" src="js/jquery3.1.1-min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
 
				var modal = document.getElementById('myModal');
				var btn = document.getElementById("myBtn");
				var span = document.getElementsByClassName("close")[0];             
				btn.onclick = function() {          
					modal.style.display = "block";                           
				}      
				span.onclick = function() {                
					modal.style.display = "none";
				}
				window.onclick = function(event) {
					if (event.target == modal) {
						modal.style.display = "none";
					}
				}
 
			});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="mdp_reset"><a href="index.php">Accueil </a><span>&raquo;</span>Réinitialisation du mot de passe</div>
			<h1>Réinitialisation du mot de passe (1/2)</h1>
			<p>Vous avez oublié votre mot de passe ? Pas de panique ! Indiquez-nous votre nom d'utilisateur ou votre adresse email et nous vous renverrons un nouveau mot de passe par email.<br />
				Pensez à regarder dans votre dossier Spam si vous ne voyez pas arriver notre email. 
			</p>
			<form action="" method="POST">
				<div class="form-group">
					<label for="">Email</label>
					<input type="email" name="email" class="form-control" />
				</div>
				<button type="submit" id="myBtn" class="btn btn-primary" >Réinitialiser mon mot de passe</button>
			</form>
 
			<div id="myModal" class="modal">
				<div class="modal-content">
					<span class="close">x</span>
 
					<?php if(isset($_SESSION['flash'])): ?>
						<?php foreach($_SESSION['flash'] as $type => $message): ?>
							<div class="alert alert-<?php echo $type; ?>"> 
								<?php echo $message; ?>
							</div>
						<?php endforeach; ?>
						<?php unset($_SESSION['flash']); ?>
					<?php endif; ?>
 
				</div>
			</div>
 
		</div>      
	</body>
</html>

Invité · 17/11/2016, 21h56

Ton code PHP est interprete cote serveur tandis que ton code javascript est interprete cote client (sur le navigateur).

Dans ton cas, quand tu appuyes sur ton bouton pour reinitialiser le mot de passe, la navigateur envoi une requete HTTP POST a ton serveur et ouvre une modale (avec javascript). Quand le navigateur recoit la reponse de la requete POST il rafraichit la page et du coup ta modale n'est plus affichee. Comme tout cela ce passe tres vite on ne voit jamais la modale en pratique.

Tu as plusieurs solutions pour gerer ce cas :

- Tu geres effectivement en AJAX, ce qui signifie que quand tu appuies sur le bouton ton navigateur envoi une requete HTTP POST a ton serveur mais cette fois il ne rafraichit pas la page a la reception du retour mais stocke ce retour dans une variable accessible en javascript. C'est a toi ensuite de gerer l'affichage de ce retour dans ta modale puis d'afficher la modale.

- Tu modifies ton script pour que la modale apparaisse au chargement de la page apres l'envoi de la requete POST (le clic sur le bouton). Personnellement je trouve assez deroutant les modales qui s'ouvrent au chargment d'une page surtout pour afficher un simple message.

- Tu n'affiches pas de modale mais tu deplace le morceau de code qui affiche ton message flash quelque part sur la page.

Envoi email ET lancement fenêtre modale

Langage PHP

Discussions similaires

Partager

Partager