Problème fermeture modal et rafraîchissement tableau !

Zulkar
PHP

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'utilise les tutos suivants :<br />

Tout fonctionne bien, à l'exeption de la fermeture de ma modal.
Je dois supprimer et adapter le code, mais je m'y perds.

Voici mon premier fichier :

<?php
$connect = mysqli_connect("localhost", "admin", "", "cuisine");
$query = "SELECT I.id, F.familles, I.ingredients, I.fournisseurs, I.prix, U.unites FROM ingredients I, familles F, unites U WHERE F.id=I.familles_id AND U.id=I.unites_id";

$result = mysqli_query($connect, $query);
?>

<!DOCTYPE html>
<html>  
  <head>  
    <meta charset="utf-8">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

          <title></title>  

          <script src="js/jquery.js"></script>
          <script src="js/bootstrap.min.js"></script> 
          <script src="js/jquery.dataTables.min.js"></script>
          <script src="js/jquery.tabledit.min.js"></script>
          <link rel="stylesheet" href="css/bootstrap.min.css" /> 
          <link rel="stylesheet" href="css/dataTables.bootstrap.min.css" /> 

  </head>  
  <body>  

      <div class="container">  
       <h3 align="center">Liste des ingrédients</h3>  

          <div class="table-responsive">
              <div align="right">
               <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_ingredients" class="btn btn-primary">Ajouter</button>
              </div>
              <br />

                 <table id="ingredients_table" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                         <th>ID</th>  
                         <th>Familles</th>
                         <th>Ingrédients</th>
                         <th>Fournisseurs</th>
                         <th>Prix</th>
                         <th>Unités</th>
                      </tr>
                    </thead>
                    <tbody>
                    <?php
                    while($row = mysqli_fetch_array($result))
                    {
                    ?>
                    <tr>
                       <td><?php echo $row["id"]; ?></td>
                       <td><?php echo $row["familles"]; ?></td>
                       <td><?php echo $row["ingredients"]; ?></td>
                       <td><?php echo $row["fournisseurs"]; ?></td>
                       <td><?php echo $row["prix"]; ?></td>
                       <td><?php echo $row["unites"]; ?></td>
                    </tr>
                    <?php
                    }
                    ?>
                    </tbody>
                 </table>

          </div>  
      </div>
 </body>  
</html>  

<div id="add_ingredients" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Ajouter un ingrédient à la base de données</h4>
         </div>
         <div class="modal-body">
            <form method="post" id="insert_form">
              <label>Choisir une famille</label>
              <select name="familles_id" id="familles_id" class="form-control">
              <option value="1">Boucherie</option>  
              <option value="2">Crèmerie</option>
              </select>
              <br />
              <label>Ingrédients</label>
              <input type="text" name="ingredients" id="ingredients" class="form-control" required />
              <br />
              <label>Fournisseurs</label>
              <input type="text" name="fournisseurs" id="fournisseurs" class="form-control" />
              <br />  
              <label>Prix</label>
              <input type="text" name="prix" id="prix" placeholder="0.00" class="form-control" required />
              <br />  
              <label>Unités</label>
              <select name="unites_id" id="unites_id" class="form-control">
              <option value="1">kilogramme(s)</option>  
              <option value="2">litre(s)</option>
              <option value="3">la pièce</option>
              </select>
              <br />
              <input type="submit" name="insert" id="insert" value="Valider" class="btn btn-success" />

            </form>
         </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
         </div>
      </div>
   </div>
</div>

<script>  
$(document).ready(function(){

    $('#ingredients_table').DataTable();

    $('#ingredients_table').Tabledit({
      url:'ingredients/action.php',
      columns:{
       identifier:[0, "id"],
       editable:[[1, 'familles'], [2, 'ingrédients'], [3, 'fournisseurs'], [4, 'prix'], [5, 'unites']]
      },
      restoreButton:false,
      onSuccess:function(data, textStatus, jqXHR)
      {
       if(data.action == 'delete')
       {
        $('#'+data.id).remove();
       }
      }
     });

    $('#insert_form').on("submit", function(event){  
      event.preventDefault();  
      if($('#name').val() == "")  
      {  
       alert("Name is required");  
      }  
      else if($('#address').val() == '')  
      {  
       alert("Address is required");  
      }  
      else if($('#designation').val() == '')
      {  
       alert("Designation is required");  
      }

      else  
      {  
       $.ajax({  
        url:"ingredients/insert.php",  
        method:"POST",  
        data:$('#insert_form').serialize(),  
        beforeSend:function(){  
         $('#insert').val("Inserting");  
        },  
        success:function(data){  
         $('#insert_form')[0].reset();  
         $('#add_ingredients').modal('hide');  
         $('#ingredients_table').html(data);  
        }  
       });  
      }  
   });
});  

</script>

Et voici le fichier qui appelle l'action insertion :

 <?php

$connect = mysqli_connect("localhost", "admin", "", "cuisine");
if (!empty($_POST)) {
    $ouput = '';
    $recette = mysqli_real_escape_string($connect, $_POST["recette"]);
    $quantite = mysqli_real_escape_string($connect, $_POST["quantite"]);

    $query = "INSERT INTO tbl_sauce(recette, quantite)
    VALUES('$recette', '$quantite')";

    if(mysqli_query($connect, $query)){
        $ouput .= '<label class="text-success">Data Inserted</label>';
        $select_query = "SELECT * FROM tbl_sauce ORDER BY id DESC";
        $result = mysqli_query($connect, $select_query);
    }

}

?>

Ce que je veux

Lorsque je clique sur le bouton 'Valider' de la modal, normalement la modal se ferme, le backdrop aussi et le tableau se rafraichit automatiquement.
Avec les fichiers sources, cela fonctionne.

Ce que j'obtiens

Moi, avec mes modifications, lorsque je clique sur le bouton 'Valider' de la modal, la modal se ferme, mais le backdrop reste et le tableau ne se rafraichit pas.
Je dois faire F5 pour voir mon tableau à jour.

Merci d'avance pour votre aide !

6 réponses

Balsakup
Réponse acceptée

@Zulkar

Cela fait plusieurs jours, voir une bonne semaine que je passe sur ce code et je pense en distinguer les différentes parties mais pas de là à décrypter le code

Si ca fait si longtemps que ça que tu passes ton temps sur un si petit script, crois moi, recommence depuis 0, tu iras plus vite ^^

Bref, la console me trouvait une erreur 404 sur un dossier que je n'ai pas ! Donc bêtement, j'ai créé le dossier mis dedans un fichier 'insert.php', plus d'erreur dans la console mais le problème reste le même.

On ne fait pas bêtement les choses en programmation, on essaie de comprendre et voir pourquoi cette erreur est retournée, et qu'est-ce qui la génère

$.ajax({
    url: "ingredients/insert.php",
    method: "POST",
    data: $('#insert_form').serialize(),
    beforeSend: function() {
        $('#insert').val("Inserting");
    },
    success: function(data) {
        console.log('SUCCESS', date);

        $('#insert_form')[0].reset();
        $('#add_ingredients').modal('hide');
        $('#ingredients_table').html(data);
    },
    error: function(err) {
        console.error('ERROR', err);
    }
});

L'erreur vient surement du JS, car PHP n'agit pas sur le client,.

Le fichier ingrédients/insert.php existe-t-il ?
Si tu ajoutes le console.log et le console.error, que retournent-ils ?
Cet appel ajax est-il vraiment exécuté ?

je sais qu'avec les fichiers originaux, cela fonctionne.

Normale que ça fonctionne avec les fichiers originaux, le même qui a fait ça est développeur et c'est lui qui à créer le comportement de son script.
Toi tu n'as fait que copier/coller et remplacer des chaînes de caractères. Réécris le script petit à petit depuis 0 en le bourant de console.log partout afin de vérifier le bon comportement du script. Ca sera la meilleure chose à faire, et ça sera plus instructif.

Balsakup

Salut,

As-tu compris le code avant de la modifier ? Les erreurs de débutant viennent souvant des copiers/collers.
Je vais te donner quelques astuces de développeur pour que tu trouves ton problème toi même :

  1. Quant on fait du JS, on ouvre la console développeur pour voir les erreurs générées (si y'en a)
  2. Quant on fait du JS, on met des console.log partout pendant la phase de développement pour vérifier le comportement
  3. Quant on fait du PHP, on mets des var_dump, die, echo partout pendant la phase de développement pour vérifier le comportement

Avec ces 3 points là et du temps, tu devrais trouver toi même ton erreur ;)

Balbert

Hello,

A la place de => 

 success:function(data){  
         $('#insert_form')[0].reset();  
         $('#add_ingredients').modal('hide');  
         $('#ingredients_table').html(data);  
        }

Tu peux faire ceci => 

 success:function(data){  
    location.reload()
 }
Zulkar
Auteur

Merdi à vous deux pour vos réponses !

Balbert ==> Ta solution fonctionne, mais elle me rentre 2 fois l'ingrédient.

Balsakup ==> Cela fait plusieurs jours, voir une bonne semaine que je passe sur ce code et je pense en distinguer les différentes parties mais pas de là à décrypter le code.
Donc la console, je l'ai déjà utilisé pour d'autres erreurs que j'avais, mais pour celle-là, je l'ai zappé.
Bref, la console me trouvait une erreur 404 sur un dossier que je n'ai pas ! Donc bêtement, j'ai créé le dossier mis dedans un fichier 'insert.php', plus d'erreur dans la console mais le problème reste le même.
Je suis d'accord avec toi que faire le copier/coller d'un code n'est pas l'idéable. J'ai fait plusieurs tests, plusieurs manipulation et je sais qu'avec les fichiers originaux, cela fonctionne.
En plus, dans tout ça, je n'ai pas mis le bon fichier 'insert.php' !

Voici le bon :

<?php
//insert.php  
$connect = mysqli_connect("localhost", "admin", "mike2611", "cuisine");
if(!empty($_POST))
{
 $output = '';
    $familles_id = mysqli_real_escape_string($connect, $_POST["familles_id"]);  
    $ingredients = mysqli_real_escape_string($connect, $_POST["ingredients"]);  
    $fournisseurs = mysqli_real_escape_string($connect, $_POST["fournisseurs"]);  
    $prix = mysqli_real_escape_string($connect, $_POST["prix"]);  
    $unites_id = mysqli_real_escape_string($connect, $_POST["unites_id"]);
    $query = "
    INSERT INTO ingredients(familles_id, ingredients, fournisseurs, prix, unites_id)  
     VALUES('$familles_id', '$ingredients', '$fournisseurs', '$prix', '$unites_id')
    ";
    if(mysqli_query($connect, $query))
    {
     $output .= '<label class="text-success">Ingrédient ajouté</label>';
     $select_query = "SELECT * FROM ingredients ORDER BY id DESC";
     $result = mysqli_query($connect, $select_query);
     $output .= '
      <table id="ingredients_table" class="table table-bordered table-striped">  
                    <thead>
                    <tr>  
                         <th>ID</th>  
                         <th>Familles</th>
                         <th>Ingrédients</th>
                         <th>Fournisseurs</th>
                         <th>Prix</th>
                         <th>Unités</th>

                    </tr>
                    </thead>
                    <tbody>

     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '

       <tr>  
                       <td><?php echo $row["id"]; ?></td>
                       <td><?php echo $row["familles"]; ?></td>
                       <td><?php echo $row["ingredients"]; ?></td>
                       <td><?php echo $row["fournisseurs"]; ?></td>
                       <td><?php echo $row["prix"]; ?></td>
                       <td><?php echo $row["unites"]; ?></td>
                    </tr>
                    </tbody>
      ';
     }
     $output .= '</table>';
    }
    echo $output;
}
?>

Et je regarde vers les autres analyses que je m'as donné !

Merci

Zulkar
Auteur

Bonjour,
J'ai l'impression que mon problème vient de mon fichier 'insert.php' !
Je continue de chercher, mais j'avoue que je ne vois pas où cela se trouve pour le moment.

Zulkar
Auteur

Je n'ai pas envie de t'énerver :)
C'est facile pour toi de parler d'un tout petit scrypt ;)

Et en effet, dans la console, il m'indique aussi un problème avec le fichier 'ingredients/insert.php', et une chose que je peux certifier, c'est que j'ai bien ce dossier et j'ai bien ce fichier aussi à l'intérieur.

En testant, je me suis rendu compte qu'en fait, ce fichier 'insert.php', ne me sert à rien !
Sans lui, les informations entrées dans ma modal pour l'ajout d'un ingrédient se font tout pareil !

Merci pour les infos et pour les cours :)