Bonjour tout le monde :) 

Un peu de la vieille école, j'essaie de me mettre à jour niveau Ajax et JS, mais c'est pas simple. x) J'ai un datatable avec une liste d'utilisateurs, et un modal pour créer un utilisateur. la création se fait en JS / AJAX / PHP, mais ça coince au moment du transfert ajax vers mon fichier php...

Datatable.php

<!-- Modal to add new user starts-->
                    <div class="modal modal-slide-in new-user-modal fade" id="modals-slide-in">
                        <div class="modal-dialog">
                            <form class="add-new-user modal-content pt-0">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                                <div class="modal-header mb-1">
                                    <h5 class="modal-title" id="AddUserLabel">Ajouter un utilisateur</h5>
                                </div>

                                <?php
                                $query = $GLOBALS['db1']->prepare('SELECT function_name, function_id FROM function WHERE activate = ? ORDER BY function_name');
                                $query->bindValue(1, "1", PDO::PARAM_STR);
                                $query->execute();
                                $data_roles = $query->fetchAll();

                                $query = $GLOBALS['db1']->prepare('SELECT agency_id, agency_name, agency_group FROM agency WHERE activate = ? ORDER BY agency_group');
                                $query->bindValue(1, "1", PDO::PARAM_STR);
                                $query->execute();
                                $data_agency = $query->fetchAll();
                                ?>
                                <div class="modal-body flex-grow-1">
                                    <div class="mb-1">
                                        <label class="form-label" for="basic-icon-default-name">Nom</label>
                                        <input type="text" class="form-control dt-full-name" id="basic-icon-default-name" placeholder="Mertier" name="user-name" autofocus />
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="basic-icon-default-surname">Prénom</label>
                                        <input type="text" class="form-control dt-full-name" id="basic-icon-default-surname" placeholder="Franck" name="user-surname" autofocus />
                                    </div>
                                    <input type="hidden" name="operation" id="operation" />
                                    <div class="mb-1">
                                        <label class="form-label" for="basic-icon-default-email">Email</label>
                                        <input type="text" id="basic-icon-default-email" class="form-control dt-email" placeholder="franck.mertier@example.fr" name="user-email" />
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="user-role">Rôle utilisateur</label>
                                        <select id="user-role" class="select2 form-select">
                                            <?php foreach($data_roles as $element){
                                                echo '<option value="'. $element['function_id'] .'">'. $element['function_name'] .'</option>';
                                            }?>
                                        </select>
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="agency">Agence principal</label>
                                        <select id="agency" class="select2 form-select">

                                            <?php
                                            $group = 0;

                                            foreach($data_agency as $element){
                                                $query = $GLOBALS['db1']->prepare('SELECT agency_group_name, agency_group_id FROM agency_group where agency_group_id = ?');
                                                $query->bindValue(1, $element['agency_group']);
                                                $query->execute();
                                                $data_group = $query->fetch();

                                                if($data_group['agency_group_id'] == $group){
                                                    echo '<option value="'. $element['agency_id'] .'">'. $element['agency_name'] .'</option>';
                                                }else{
                                                    echo '</optgroup><optgroup label="'. $data_group['agency_group_name'] .'">';
                                                    echo '<option value="'. $element['agency_id'] .'">'. $element['agency_name'] .'</option>';
                                                    $group++;
                                                }
                                            }?>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary me-1 data-submit">Envoyer</button>
                                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
                                </div>
                            </form>
                        </div>
                    </div>

le fichier js.

 var dtUserTable = $('.user-list-table'),
    newUserSidebar = $('.new-user-modal'),
    newUserForm = $('.add-new-user'),

// Form Validation
  if (newUserForm.length) {
    newUserForm.validate({
      errorClass: 'error',
      rules: {
        'user-name': {
          required: true
        },
        'user-surname': {
          required: true
        },
        'user-role': {
          required: true
        },
        'user-email': {
          required: true,
          email: true
        },
        'agency': {
          required: true
        }
      }
    });

    newUserForm.on('submit', function (e) {
      newUserForm('#operation').val("Add");
      var isValid = newUserForm.valid();
      e.preventDefault();
      if (isValid) {
        newUserForm.ajax({
          url: assetPath + 'php/ajax-insert.php',
          method:'POST',
          data:new FormData(this),
          contentType:false,
          processData:false,
          success:function(data)
          {
            newUserSidebar.modal.reset();
            newUserSidebar.modal('hide');
            dtUserTable.DataTable.ajax.reload();
          }
        });
      }
    });
  }

et le fichier pour l'insert en php :

<?php
require '../../app-assets/php/database.php';
require '../../app-assets/php/parameters.php';

if(isset($_POST["operation"]))
{
    if($_POST["operation"] == "Add")
    {
        $statement = $GLOBALS['db1']->prepare(" INSERT INTO user (user.user_email, user.user_name, user.user_surname, user.user_function_id, user.user_created_by_user, user.activate) VALUES (:email, :name, :surname, :function, :created_date, :activate)
  ");
        $result = $statement->execute(
            array(
                ':email' => $_POST["user-email"],
                ':name' => $_POST["user-name"],
                ':surname' => $_POST["user-surname"],
                ':function' => $_POST["function_id"],
                ':created_date' => time(),
                ':activate' => '3'
            )
        );
        if(!empty($result))
        {
            echo 'Data Inserted';
        }
    }
    
}

?>

Dans ma console, on voit bien qu'il n'y a aucun appel vers :

newUserForm.ajax({
          url: assetPath + 'php/ajax-insert.php',
          method:'POST',

Vous saurez peut-être pourquoi...

En vous souhaitant une excellente journée.

Dimitri

-
Edité par dimitriouen 9 octobre 2021 à 14:29:11

Bonjour,

J'ai besoin d'une petite info supplémentaire : qu'est-ce qu'il y a dans isValid ligne 33 ? Et dans le this ligne 37 ? Le contentType c'est du multipart/form-data.

-
Edité par piero5673 9 octobre 2021 à 14:19:30

piero5673 a écrit:

Bonjour,

J'ai besoin d'une petite info supplémentaire : qu'est-ce qu'il y a dans isValid ligne 33 ? Et dans le this ligne 37 ? Le contentType c'est du multipart/form-data.

-
Edité par piero5673 il y a moins de 30s

Merci pour ta réponse .

Pour isValid, c'est en rapport avec la ligne 31 :

var isValid = newUserForm.valid();

En gros si le formulaire est validé, isValid passe à la suite, je me trompe peut-être de méthode ?

Et pour le ligne 37, aucune idée, j'ai lu dans un tuto qu'il mettait "this" pour indiquer que c'était formulaire en cours, je me gourre peut-être, il faudrait mettre quoi à la place? 

Il n'y a pas de méthode valid sur un élément formulaire ou un formdata en js. Ca ne veux pas dire que tu te trompes de méthodes, mais c'est bien de préciser d'où ça viens, histoire de pouvoir savoir si c'est bien un booléen. 

Pour le this, c'est bien le problème, tu peux le console.log pour voir ce que c'est, ou mettre l'élément histoire d'être sur que ce soit ça.

Au passage, il y a une "," en trop ligne 3

-
Edité par piero5673 9 octobre 2021 à 22:16:03

Donc l'erreur, tu m'as bien mis la puce à l'oreille, c'était le "Le contentType c'est du multipart/form-data." . Je ne l'avais pas déclaré dans mon form, donc impossible de trouver la source.

J'ai un dernier problème, bien plus simple je pense, mais impossible de trouver et ça doit venir d'un manque de connaissance. Je n'arrive pas à rafraichir mon datatable à la fin de l'ajout d'un utilisateur. Je remets les codes mis à jour : 

datatable & form : 

<div class="card">
                    <div class="card-body border-bottom">
                        <h4 class="card-title">Recherche & Filtre</h4>
                        <div class="row">
                            <div class="col-md-4 user_role"></div>
                            <div class="col-md-4 user_plan"></div>
                            <div class="col-md-4 user_status"></div>
                        </div>
                    </div>
                    <div class="card-datatable table-responsive pt-0">
                        <table class="user-list-table table" id="user_table">
                            <thead class="table-light">
                            <tr>
                                <th></th>
                                <th>Nom</th>
                                <th>Rôle</th>
                                <th>Agence principale</th>
                                <th>Statut</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- Modal to add new user starts-->
                    <div class="modal modal-slide-in new-user-modal fade" id="modals-slide-in">
                        <div class="modal-dialog">
                            <form class="add-new-user modal-content pt-0" enctype="multipart/form-data" id="user_form">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                                <div class="modal-header mb-1">
                                    <h5 class="modal-title" id="AddUserLabel">Ajouter un utilisateur</h5>
                                </div>

                                <?php
                                $query = $GLOBALS['db1']->prepare('SELECT function_name, function_id FROM function WHERE activate = ? ORDER BY function_name');
                                $query->bindValue(1, "1", PDO::PARAM_STR);
                                $query->execute();
                                $data_roles = $query->fetchAll();

                                $query = $GLOBALS['db1']->prepare('SELECT agency_id, agency_name, agency_group FROM agency WHERE activate = ? ORDER BY agency_group');
                                $query->bindValue(1, "1", PDO::PARAM_STR);
                                $query->execute();
                                $data_agency = $query->fetchAll();
                                ?>
                                <div class="modal-body flex-grow-1">
                                    <div class="mb-1">
                                        <label class="form-label" for="user-name">Nom</label>
                                        <input type="text" class="form-control dt-full-name" id="user-name" placeholder="Mertier" name="user-name" autofocus />
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="user-surname">Prénom</label>
                                        <input type="text" class="form-control dt-full-name" id="user-surname" placeholder="Franck" name="user-surname" />
                                    </div>
                                    <input type="hidden" name="operation" id="operation" value="Add" />
                                    <div class="mb-1">
                                        <label class="form-label" for="user-email">Email</label>
                                        <input type="text" id="user-email" class="form-control dt-email" placeholder="franck.mertier@example.fr" name="user-email" />
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="user-role">Rôle utilisateur</label>
                                        <select id="user-role" class="select2 form-select" name="user-role">
                                            <?php foreach($data_roles as $element){
                                                echo '<option value="'. $element['function_id'] .'">'. $element['function_name'] .'</option>';
                                            }?>
                                        </select>
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="agency">Agence principal</label>
                                        <select id="agency" class="select2 form-select" name="agency">

                                            <?php
                                            $group = 0;

                                            foreach($data_agency as $element){
                                                $query = $GLOBALS['db1']->prepare('SELECT agency_group_name, agency_group_id FROM agency_group where agency_group_id = ?');
                                                $query->bindValue(1, $element['agency_group']);
                                                $query->execute();
                                                $data_group = $query->fetch();

                                                if($data_group['agency_group_id'] == $group){
                                                    echo '<option value="'. $element['agency_id'] .'">'. $element['agency_name'] .'</option>';
                                                }else{
                                                    echo '</optgroup><optgroup label="'. $data_group['agency_group_name'] .'">';
                                                    echo '<option value="'. $element['agency_id'] .'">'. $element['agency_name'] .'</option>';
                                                    $group++;
                                                }
                                            }?>
                                        </select>
                                    </div>

                                    <button type="submit" class="btn btn-primary me-1 data-submit">Envoyer</button>
                                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- Mod

JS : 

 var dtUserTable = $('.user-list-table'),
    newUserSidebar = $('.new-user-modal'),
    newUserForm = $('.add-new-user')

// Form Validation
  if (newUserForm.length) {
    newUserForm.validate({
      errorClass: 'error',
      rules: {
        'user-name': {
          required: true
        },
        'user-surname': {
          required: true
        },
        'user-role': {
          required: true
        },
        'user-email': {
          required: true,
          email: true
        },
        'agency': {
          required: true
        }
      }
    });

    newUserForm.on('submit', function (e) {
      e.preventDefault();
      var user_name = $('#user-name').val();
      var user_surname = $('#user-surname').val();
      var user_role = $('#user-role').val();
      var user_email = $('#user-email').val();

      var isValid = newUserForm.valid();

      if (isValid) {
        $.ajax({
          url: assetPath + 'php/ajax-insert.php',
          method:'POST',
          data:new FormData(this),
          contentType:false,
          processData:false,
          success:function()
          {
            $('#user_form')[0].reset();
            $('#modals-slide-in').modal('hide');
            $('#user_table').DataTable().ajax.reload();
          }
        });
      }

    });
  }

Le modal hide fonctionne, le reset aussi, mais impossible de faire fonctionner le reload. J'ai essayé plusieurs combinaisons, je ne trouve pas...