besoin d'aide avec Ajax
Bonjour,
j'aurais besoin d'aide pour réaliser une modal qui comporte un formulaire php/mysql , je voudrais qu'il soit en Ajax pour avoir le resultat directement dans la modal, si quelqu'un pourais me fournir une base pour commencer car j'ai du mal à comprendre
<?php require 'bdd.php' // Appelle de la connexion à la BDD?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Ajax Modal Bootstrap</title>
</head>
<body>
<div class="container-fluid">
<h1>Ma liste d'amis</h1>
<button type="button" class="btn btn-primary" style="margin-bottom:20px;" data-toggle="modal" data-target="#exampleModal"
data-whatever="@mdo">Ajouter un ami</button>
<div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Ajouter un ami(e)</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="GET">
<div class="form-group">
<form class="form-inline">
<input name="pseudo" class="form-control mr-sm-2" type="search" style="margin-bottom:20px;" placeholder="Entrer le pseudo de votre ami(e)"
aria-label="Search">
<button name="search-friend" class="btn btn-info my-2 my-sm-0">Rechercher</button>
</form>
</div>
</form>
<?php
if (isset($_GET['search-friend']) && isset($_GET['pseudo'])) {
$pseudo = $_GET['pseudo'];
if (!empty($pseudo)) {
$requser = $bdd->prepare("SELECT * FROM user WHERE username = ?");
$requser->execute(array($pseudo));
// Si tout va bien, on peut continuer
while ($donnees = $requser->fetch()) {
?>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Pseudo</th>
<th scope="col">Prénom</th>
<th scope="col">Nom</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php echo $donnees['username']; ?>
</td>
<td>
<?php echo $donnees['firstname']; ?>
</td>
<td>
<?php echo $donnees['name']; ?>
</td>
<td>
<button type="button" class="btn btn-primary btn-sm">Ajouter</button>
</td>
</tr>
</tbody>
</table>
</div>
<?php
}
$requser->closeCursor(); // Termine le traitement de la requête
} else {
echo "pseudo non rempli !!!";
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 bg-white shadow">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Pseudo</th>
<th scope="col">Prénom</th>
<th scope="col">Nom</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>alex35</td>
<td>Alexandre</td>
<td>Bouttier</td>
<td>
<i class="material-icons">delete</i>
</td>
</tr>
<tr>
<td>tom</td>
<td>Thomas</td>
<td>Loré</td>
<td>
<i class="material-icons">delete</i>
</td>
</tr>
<tr>
<td>kev</td>
<td>Kevin</td>
<td>Dupont</td>
<td>
<i class="material-icons">delete</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
2 réponses
Hello alors, c'est assez "simple".
Tu crées un event onClick sur ton submit en JS (n'oublie pas désactiver le comportement par defaut du submit).
Lors de cet event tu récupères les valeurs qui sont rentrées dans tes inputs.
Tu envoies les valeurs via la méthode post en ajax (utilise jquery ou axios) vers un fichier php par exemple "save.php".
Dans ton fichier "save.php" tu récupères tes valeurs via la superglobal $_POST.
Tu fais ta requête vers ta base de donnée et tu retournes par exemple un objet json qui contient les valeurs que tu as envoyée et aussi un message pour dire que la reqûete est bien passée. Par exemple message : true
Ensuite dans le callback de ton appel ajax tu vas recevoir cet objet json. Si le message est "true". Tu affiches les valeurs (qui sont aussi dans ton objet json) via js dans ton modal.
Et le tour est joué.
Tu peux même aussi au niveau de ton event "onClick" vérifier si les champs sont remplis et afficher des erreurs :)
J'espère que tu y vois plus clair
Merci ,pour ta réponse aurais tu un exemple de code à me fournir ? pour mon cas , car là je suis bloqué j'ai déja regarder un peu partout mais je n'ai pas trouver quelque chose qui fonctionne, je reste bloqué sur ça ça m'empêche d'avancer , en gros mon formulaire sert à rechercher des utilisateurs par leur pseudo et ensuite si il trouve la personne il affiche dans ma modal le pseudo,le nom et le prénom dans une table bootstrap , pour par la suite grace à un bouton les ajouter comme ami