Discussion :

[Matteo53]

Bonjour,
je ne suis pas de tout expert en Ajax, j'ai une base de donnée avec une table catégorie. Pour administrer j'ai crée un formulaire(dans une page administrateur.php) pour créer une nouvelle catégorie. Je voudrais à coté du formulaire dans un div faire apparaitre toutes mes catégories et chaque fois que je soumet le formulaire pour en créer une, la liste dans le div se mets à jour avec une requête AJAX.
Mes problèmes avec mon code :
Quand je soumet le formulaire je vois juste un court instant ma liste vu que ma page se recharge, j'ai besoin de soumettre le formulaire pour créer une nouvelle catégorie.
Est ce que il y a possibilité avec une requete AJAX d'avoir la liste deja afficher avant de soumettre le formulaire puis quand à la soumission du formulaire la liste s'affiche à jour ?
voici mon code :
ma page de formulaire dans createCategories.php :

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
<div class= "col-md-5 border border-grey p-3 m-3 ">
        <form  action="administration.php" enctype="multipart/form-data" method="post">
        <h5>Créer une catégorie</h5>
            <div class="form-group mb-1">
                <label for="nom">nom *</label>
                <input type="nom" class="form-control" name="nom" required>  
            </div>
            <div class="form-group mb-3">
                <label for="affiche">photo *</label>
                <input type="file" class="form-control-file d-block bg-white p-3" name="file" value="" required>
            </div>
            <input type="submit" name="submitCreateCategorie" class="mb-3" value="envoyer" onclick="loadDoc()">
        </form>
    </div>

dans ma page administration.php j'appelle la page du formulaire :

Code :

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

<?php require 'formCreateCategories.php '?>

mon code AJAX :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/JavaScript">
//-------récupérer l’objet XMLHttpRequest----------------
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("categories").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "categories.ajax.php", true);
  xhttp.send();
}
 </script>

puis la requete sur une page categories.ajax.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php require_once '../controller/controllerCategories.php'?>
<?php  
$categoriesController = new ControllerCategories();
$categories = $categoriesController->getCategories();
?>
<ul>
      <?php foreach($categories as $cat) :?>
            <li><?=$cat["nom"]?></li> 
      <?php endforeach ?> 
</ul>

Mon code marche c'est juste la mise en place qui me pose problème.
Merci

[Matteo53]

Bonjour,
Après recherche j'ai résolu mon problème :

Code :

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

1
2
3
4
let file = "../ajax/categories.ajax.php";
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("categories").innerHTML = y);

Bonne journée

[NoSmoking]

Bonjour,

Quand je soumet le formulaire je vois juste un court instant ma liste vu que ma page se recharge

le comportement est normal si tu n'inhibe pas l'action par défaut via un event.preventDefault.

Code :

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

1
2
3
4
function loadDoc(e) {
  e.preventDefault();
  // ... la suite 
}

mais mieux avec un appel du type :

Code :

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

1
2
3
4
5
const f = document.querySelector("form");
f.onsubmit = (e) => {
  e.preventDefault();
// ... les actions à faire
}

Après recherche j'ai résolu mon problème :

L'API fetch remplace avantageusement XMLHttpRequest mais je doute que cela soit ce qui à résolu ton problème.

[Matteo53]

Bonjour,
J'ai supprimé l'action sur l'input du formulaire et maintenant malgré la page se charge à la soumission du formulaire j'ai quand même en réel la liste qui reste affichée et qui se mets à jour sans devoir actualiser la page deux fois. Par contre je n'ai pas trop compris ou mettre votre code désolé.
Est ce que je dois entourer mon code ? :

Code :

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

1
2
3
4
5
6
7
const f = document.querySelector("form");
f.onsubmit = (e) => {
  e.preventDefault();
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("categories").innerHTML = y);
}

Cela permettrais de ne pas charger la page et envoyer quand meme les données à ma base ?
merci pour votre patience.

[NoSmoking]

Il te faut respecter l'ordre d'apparition des éléments dans la page HTML, pour pouvoir utiliser un élément via JavaScript il faut que celui-ci soit déjà présent dans la page.
Le schéma est donc

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
<form action="administration.php" enctype="multipart/form-data" method="post">
  <!-- les éléments de ton formulaire -->
</form>
 
<script>
// le script applicable à ton formulaire
const f = document.querySelector("form");
f.onsubmit = (e) => {
  //inhibe action par défaut
  e.preventDefault();
  // récup. URL de la requête
  const reqURL = f.getAttribute("action");
  // c'est parti
  fetch(reqURL)
    .then(x => x.text())
    .then(y => document.getElementById("categories").innerHTML = y);
}
</script>

voilà en gros ce que tu devrais avoir !

[Matteo53]

Bonjour,
merci beaucoup pour votre aide et vos conseils.
bonne journée