Bonjour, je suis actuellement bloqué sur un petit point dans mon projet. 

je cherche a récuperer l'id d'un utilisateur avant d'ouvrir un modal . j'utilise donc du php et Ajax. 

j'ai retourné le problème dans tout les sens mais je pense juste que je ne récupere pas la valeur de "id" (dans ma function php) qui viernt de mon code ajax. 

je vous met le code ci-dessous . Merci d'avance pour votre aide 



* le <?= $datas['id'] ?> vient d'un tableau ou tout mes utilisateurs sont dedans 

<!-- Button trigger modal -->
<button type="button" data-id="<?= $datas['id'] ?>" class="user_id btn btn-link btn-sm btn-rounded">
     Modifier
</button>

  * ma console renvoie bien : ID envoyé 8

<script type="text/javascript"> 
        $(document).ready(function() { 
            $('.user_id').click(function() { 
                // get id 
                var id = $(this).data('id'); 
                console.log('ID envoyé:', id); // Ajout de cette ligne pour afficher la valeur de id
                $.ajax({ 
                    url: "../php/execute/user/test.php", 
                    data: { id: id }, // send data as regular form data
                    type: "POST", 
                    cache: false, 
                    dataType: "json" 
                }).done(function(response) { 
                    // do error checking, etc.
                    if (response) {
                        const myModalEl = document.getElementById('myModal')
                        const modal = new mdb.Modal(myModalEl)
                        modal.show()
 

                    }  
                }); 
            }); 
        });
    </script>

 * voici la seul erreur qui ressort de mon code de traitement ci-dessous : 

"Warning: Undefined array key "id" in C:\wamp64\www\php\execute\user\function_boss.php on line 263" -> la ligne corresponds à cela : $id = $_POST['id'];

function modal_user_edit() {

            $id = $_POST['id'];
        
            ?>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog border-primary border border-2 rounded-4">
                        <div class="modal-content">
                            <div class="modal-header mb-0 pb-0 text-white">
                                <h5 class="modal-title text-white" id="exampleModalLabel">LOS SANTOS POLICE DEPARTEMENT</h5>
                            </div>
                            <div class="modal-body text-white">
                                <div class="row">
                                    <div class="col-md-4">
                                        <img
                                            src="../src/img/logo/police"
                                            alt=""
                                            class="rounded-circle img-fluid"
                                        />
                                    </div>
                                    <div class="col-md">
                                        <div class="row">
                                            <div class="col-md">
                                                <p class="text-warning m-0 p-0" id="exampleModalLabel">
                                                    <small class="m-0 p-0">NOM & PRENOM :</small>
                                                    <h6 class="m-0  ms-3 p-0"></h6>
                                                </p>
                                            </div>
                                            <div class="col-md">
                                                <p class="text-warning m-0 p-0" id="exampleModalLabel">
                                                    <small class="m-0 p-0">GRADE :</small>
                                                    <h6 class="m-0  ms-3 p-0">Commandant</h6>
                                                </p>
                                            </div>
                                        </div>
        
        
                                        <p class="text-warning m-0 p-0" id="exampleModalLabel">
                                            <small class="m-0 p-0">IDENTIFIANT :</small>
                                            <h6 class="m-0  ms-3 p-0">PJ</h6>
                                        </p>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-mdb-ripple-init data-mdb-dismiss="modal">Fermer</button>
                                <button type="button" class="btn btn-success" data-mdb-ripple-init>Sauvegarder les changements</button>
                            </div>
                        </div>
                    </div>
                </div>
        
            <?php
        
        }

-
Edité par ConstantinRodriguez 6 février 2024 à 23:27:55

Bonjour, pour ne plus avoir l'erreur quand tu récupère ton $_POST['id'], il faut que tu ajoute le fonction isset() devant.

Dans ton code ajax tu envoie des données à l'url :

"../php/execute/user/test.php"

Mais d'àprès ce que j'ai compris, tu voudrais récupéré ton id
dans C:\wamp64\www\php\execute\user\function_boss.php , avec la fonction modal_edit_user(), sauf erreur de ma part tu n'envoie pas la donnée au bon fichier.

Il nous faudrait un peu plus de précision sur ton appel à ta fonction (dans qu'elle fichier cela se fais t-il ?), et le nom de t'es fichier.

-
Edité par Fc_fifou 8 février 2024 à 10:28:01

Salut, merci de ta réponse. effectivement le nom de fichier n'etait pas bon tout mon code php ce fait sur la page function_boss.php

J'ai changé mon chemin dans mon script js mais cela ne fonctionne tjr pas

j'ai donc mon repertoire qui se presente comme ceci

• www 

 

Ce code se trouve sur la page function_boss.php

function modal_user_edit() {
 
            if(isset($_POST['id'])) {

                $id = $_POST['id'];
         
                ?>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog border-primary border border-2 rounded-4">
                            <div class="modal-content">
                                <div class="modal-header mb-0 pb-0 text-white">
                                    <h5 class="modal-title text-white" id="exampleModalLabel">LOS SANTOS POLICE DEPARTEMENT</h5>
                                </div>
                                <div class="modal-body text-white">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <img
                                                src="../src/img/logo/police"
                                                alt=""
                                                class="rounded-circle img-fluid"
                                            />
                                        </div>
                                        <div class="col-md">
                                            <div class="row">
                                                <div class="col-md">
                                                    <p class="text-warning m-0 p-0" id="exampleModalLabel">
                                                        <small class="m-0 p-0">NOM & PRENOM :</small>
                                                        <h6 class="m-0  ms-3 p-0"></h6>
                                                    </p>
                                                </div>
                                                <div class="col-md">
                                                    <p class="text-warning m-0 p-0" id="exampleModalLabel">
                                                        <small class="m-0 p-0">GRADE :</small>
                                                        <h6 class="m-0  ms-3 p-0">Commandant</h6>
                                                    </p>
                                                </div>
                                            </div>
             
             
                                            <p class="text-warning m-0 p-0" id="exampleModalLabel">
                                                <small class="m-0 p-0">IDENTIFIANT :</small>
                                                <h6 class="m-0  ms-3 p-0">PJ</h6>
                                            </p>
                                        </div>
                                    </div>
                                     
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-mdb-ripple-init data-mdb-dismiss="modal">Fermer</button>
                                    <button type="button" class="btn btn-success" data-mdb-ripple-init>Sauvegarder les changements</button>
                                </div>
                            </div>
                        </div>
                    </div>
             
                <?php

            }
         
        }

Celui-ci sur ma page principal boss.php

        <script type="text/javascript">
        $(document).ready(function() {
            $('.user_id').click(function() {
                // get id
                var id = $(this).data('id');
                console.log('ID envoyé:', id); // Ajout de cette ligne pour afficher la valeur de id
                $.ajax({
                    url: "../php/execute/user/function_boss.php",
                    data: { id: id }, // send data as regular form data
                    type: "POST",
                    cache: false,
                    dataType: "json"
                }).done(function(response) {
                    // do error checking, etc.
                    if (response) {
                        const myModalEl = document.getElementById('myModal')
                        const modal = new mdb.Modal(myModalEl)
                        modal.show()
  
 
                    } 
                });
            });
        });
    </script>

Le bouton se trouve dans une function table_user() dans la page function_boss.php  

if ($query->rowCount() > 0) {
    
                    foreach($stmt as $datas){
    
                        $grade = $datas['jobs_grade'];
                        // RECUPERE LE LABEL DE SON GRADE
                        $userinfo_grade = $bdd->prepare("SELECT * FROM job_grades WHERE grade = ?");
                        $userinfo_grade->execute(array($grade));
                        $userinfo_grade = $userinfo_grade->fetch();
                        $userinfo_grade['label'];
                        ?>
    
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                <img
                                    src="../src/img/logo/police"
                                    alt=""
                                    style="width: 45px; height: 45px"
                                    class="rounded-circle"
                                    />
                                <div class="ms-3">
                                    <p class="fw-bold mb-1"><?= $datas['user'] ?></p>
                                </div>
                                </div>
                            </td>
                            <td>
                                <p class="fw-normal mb-1"><?= $userinfo_grade['label'] ?></p>
                            </td>
                            <td>
                                <?php if($datas['connecte'] == 0) {
                                    ?>
                                        <span class="badge badge-danger rounded-pill d-inline">Hors ligne</span>
                                    <?php
                                } else {
                                    ?>
                                        <span class="badge badge-success rounded-pill d-inline">En ligne</span>
                                    <?php
                                } ?>
                                
                            </td>
                            <td>
                                <p class="fw-bold mb-1"><?= $datas['identifiant'] ?></p>
                            </td>
                            <td>
                                <!-- Ouvrir le modal -->
                                <button type="button" data-id="<?= $datas['id'] ?>" class="user_id btn btn-link btn-sm btn-rounded">
                                    Modifier
                                </button>

                            </td>
                        </tr>

                    <?php
                    }
                    ?>

                            </tbody>
                        </table>
        
                        <nav class="m-4" aria-label="Page navigation example text-white">
                            <ul class="pagination justify-content-center">
                                <li class="page-item <?= ($currentPage == 1) ? "disabled" : "" ?>">
                                    <a class="page-link" href="boss.php?search=&page=<?= $currentPage - 1 ?>" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <?php for($page = 1; $page <= $pages; $page++): ?>
                                <li class="page-item <?= ($currentPage == $page) ? "active" : "" ?>">
                                    <a class="page-link" href="boss.php?search=&page=<?= $page ?>"><?= $page ?></a>
                                </li>
                                <?php endfor ?>
                                <li class="page-item <?= ($currentPage == $pages) ? "disabled" : "" ?>">
                                    <a class="page-link" href="boss.php?search=&page=<?= $currentPage + 1 ?>" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>

                    <?php
    
                } else {
                    $erreur = "Aucun résultat";
                    ?>

                        </tbody>
                        </table>

                    <?php
                }

Pour finir j'appelle ma function <?=modal_user_edit() ?>

toute en haut sur ma page boss.php  pour qu'il puisse s'afficher correcement 

-
Edité par ConstantinRodriguez 8 février 2024 à 18:52:56

Si tu appelles ta fonction modal_user_edit() dans ton script boss.php, alors il faut que tu envoie ta requête ajax à ta page boss.php car tu souhaite récupérer la données dans ta page actuel pour ensuite traité la requêtes. Ton url deviant url: "chemin/vers/ton/fichier/boss.php".

cela ne fonctionne tjr pas mon modal ne s'ouvre pas . 

En ne demandant que l'ouverture de mon modal celui s'ouvre bien ( mon isset dans ma fonction modal_user_edit()). donc le probleme ne vient ni du bouton ni du modal, juste de l'id qui n'est pas récéptionné coté php non ? 

    <script type="text/javascript">
    $(document).ready(function() {
        $('.user_id').click(function() {

            const myModalEl = document.getElementById('myModal')
                    const modal = new mdb.Modal(myModalEl)
                    modal.show()
        });
    });
</script>

Mon script est deja sur ma page boss.php donc si je ne me trompe pas le chemin est juste :

    <script type="text/javascript">
    $(document).ready(function() {
        $('.user_id').click(function() {
            // get id
            var id = $(this).data('id');
            console.log('ID envoyé:', id); // Ajout de cette ligne pour afficher la valeur de id
            $.ajax({
                url: "boss.php",
                data: { id: id }, // send data as regular form data
                type: "post",
                cache: false,
                dataType: "json"
            }).done(function(response) {
                // do error checking, etc.
                if (response) {
                    const myModalEl = document.getElementById('myModal')
                    const modal = new mdb.Modal(myModalEl)
                    modal.show()
                }
            });
        });
    });
</script>

edit : je travail avec MDB si jamais pour le modal

-
Edité par ConstantinRodriguez 8 février 2024 à 20:42:03

Pour faire quelque chose de plus "propre", tu devrais utiliser

$('#user_id')

, ce qui équivaut à 

<button type="button" id="user_id" data-id="<?= $datas['id'] ?>" class="user_id btn btn-link btn-sm btn-rounded">Modifier</button>

en js c'est recommandé d'utiliser des id. De plus il faudrait que tu ouvres la console des développeurs pour regarder les valeurs que tu envoie, récupére et si tu arrives a les traiters.

J'ai vue que tu précisé le type de données que tu envoie sous forme de json :

dataType: "json"

mais tu ne les décode pas coté PHP donc tu récupère des données encodé sous formes de tableau json, tu as essayé de voir côté PHP ce que tu avais comme valeur ?

Je te conseille d'utiliser une syntaxe comme cela pour voir ce qu'il se passe et d'enlever l'encodage en json :

<script type="text/javascript">
    $(document).ready(function() {
        $('.user_id').click(function() {
            // Récupérer l'identifiant
            var id = $(this).data('id');
            console.log('ID envoyé:', id);
            // Requête AJAX
            $.ajax({
                url: "boss.php",
                method: "POST",
                data: { id: id },
                dataType: "json",
                success: function(response) {
                     
                    if (response) {
                        const myModalEl = document.getElementById('myModal');
                        const modal = new mdb.Modal(myModalEl);
                        modal.show();
                    } else {
                        console.error("Erreur de la réponse !");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Erreur lors de la requête AJAX:", status, error); // Affiche une erreur en cas d'échec de la requête AJAX
                }
            });
        });
    });
</script>

-
Edité par Fc_fifou 8 février 2024 à 22:14:46

J'ai oublié de préciser que le JavaScript était une langue inconnue encore pour moi, je bosse avec la doc et honnetement je n'y comprend pas grand chose. 

 Comme tu me la dis j'ai donc changer le .user_id en #user_id et dans mon bouton j'y ai mis l'id

<script type="text/javascript">
        $(document).ready(function() {
            $('#user_id').click(function() {
                // Récupérer l'identifiant
                var id = $(this).data('id');
                console.log('ID envoyé:', id);
                // Requête AJAX
                $.ajax({
                    url: "boss.php",
                    method: "POST",
                    data: { id: id },
                    dataType: "json",
                    success: function(response) {
                        
                        if (response) {
                            const myModalEl = document.getElementById('myModal');
                            const modal = new mdb.Modal(myModalEl);
                            modal.show();
                        } else {
                            console.error("Erreur de la réponse !");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Erreur lors de la requête AJAX:", status, error); // Affiche une erreur en cas d'échec de la requête AJAX
                    }
                });
            });
        });
    </script>

Coté php je decode le json, effectivement je ne savais meme pas que cela ce faisait 

// MODAL EDITION UTILISATEUR
        function modal_user_edit() {
 
            if(isset($_POST['id'])) {
 
                $id = $_POST['id'];
                $obj = json_decode($id);
                
                require '../php/execute/config/config.php';

                // RECUPERE INFO UTILISATEUR AVEC L'ID
                $userinfo = $bdd->prepare("SELECT * FROM tablet_user WHERE id = ?");
                $userinfo->execute(array($obj));
                $userinfo = $userinfo->fetch();
 
                ?>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog border-primary border border-2 rounded-4">
                        <div class="modal-content">
                            <div class="modal-header mb-0 pb-0 text-white">
                                <h5 class="modal-title text-white" id="myModalLabel">LOS SANTOS POLICE DEPARTEMENT</h5>
                            </div>
                            <div class="modal-body text-white">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="row">
                                            <div class="col-md">
                                                <p class="text-warning m-0 p-0">
                                                    <small class="m-0 p-0">NOM & PRENOM :</small>
                                                    <h6 class="m-0 ms-3 p-0"><?= $userinfo['user']; ?></h6>
                                                </p>
                                            </div>
                                            <div class="col-md">
                                                <p class="text-warning m-0 p-0">
                                                    <small class="m-0 p-0">GRADE :</small>
                                                    <h6 class="m-0 ms-3 p-0"><?= $userinfo['grade']; ?></h6>
                                                </p>
                                            </div>
                                        </div>
                                        <p class="text-warning m-0 p-0">
                                            <small class="m-0 p-0">IDENTIFIANT :</small>
                                            <h6 class="m-0 ms-3 p-0"><?= $userinfo['identifiant']; ?></h6>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-mdb-ripple-init data-mdb-dismiss="modal">Fermer</button>
                                <button type="button" class="btn btn-success" data-mdb-ripple-init>Sauvegarder les changements</button>
                            </div>
                        </div>
                    </div>
                </div>
                <?php
            }
        }

Apres test mon modal ne s'ouvre pas mais en console j'ai l'erreur suivante : 

boss.php?&page=1:533 Erreur lors de la requête AJAX: parsererror SyntaxError: Unexpected token '<', "
<!doctype "... is not valid JSON
    at parse (<anonymous>)
    at jquery-3.6.4.min.js:2:79745
    at l (jquery-3.6.4.min.js:2:79862)
    at XMLHttpRequest.<anonymous> (jquery-3.6.4.min.js:2:82630)

si cela concerne le docytype dans mon debut de page le voici : 

<!doctype html>
<html lang="fr">

-
Edité par ConstantinRodriguez 8 février 2024 à 23:26:53

L'ajax est sensible à la casse, tu dois avoir un whitespace ou un retour charriot dans ton code, dans le code source de ta page la premiere ligne doit être <!Doctype html> est rien d'autre.

Regarde à la ligne 553 dans ton code s'il n'y a pas une erreur.

Et sert toi d'outil comme celui ci pour valider ton html, en inspectant ton code regarde qu'il n'y ait pas d'erreur d'ouverture/fermeture de balise dans ton code.

Essaye de mettre cette ligne coté php 

header('Content-type: application/json');

ou cela coté js :

contentType: "application/json"

cela va préciser dans la requette http que tu te sert du json.

Sert toi de la console des développeur dans l'onglet network filtre les requête par Fetch/XHR tu verra toutes les requêtes ajax qui sont envoyé et leur contenue, tu pourra alors debugger plus facilement.

salut, j'ai suivie ce que tu ma dis de faire. 


Mon code php ressemble maintenant a ca qui est dans ma page function_boss.php

// MODAL EDITION UTILISATEUR
        function modal_user_edit() {
 
            header('Content-type: application/json');

            if(isset($_POST['id'])) {

                $obj = json_decode($_POST['id']);
                
                require '../php/execute/config/base_link.php';

                // RECUPERE INFO UTILISATEUR AVEC L'ID
                $userinfo = $bdd->prepare("SELECT * FROM tablet_user WHERE id = ?");
                $userinfo->execute(array($obj));
                $userinfo = $userinfo->fetch();

                ?>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog border-primary border border-2 rounded-4">
                        <div class="modal-content">
                            <div class="modal-header mb-0 pb-0 text-white">
                                <h5 class="modal-title text-white" id="myModalLabel">LOS SANTOS POLICE DEPARTEMENT</h5>
                            </div>
                            <div class="modal-body text-white">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="row">
                                            <div class="col-md">
                                                <p class="text-warning m-0 p-0">
                                                    <small class="m-0 p-0">NOM & PRENOM :</small>
                                                    <h6 class="m-0 ms-3 p-0"><?= $userinfo['user']; ?></h6>
                                                </p>
                                            </div>
                                            <div class="col-md">
                                                <p class="text-warning m-0 p-0">
                                                    <small class="m-0 p-0">GRADE :</small>
                                                    <h6 class="m-0 ms-3 p-0"><?= $userinfo['grade']; ?></h6>
                                                </p>
                                            </div>
                                        </div>
                                        <p class="text-warning m-0 p-0">
                                            <small class="m-0 p-0">IDENTIFIANT :</small>
                                            <h6 class="m-0 ms-3 p-0"><?= $userinfo['identifiant']; ?></h6>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-mdb-ripple-init data-mdb-dismiss="modal">Fermer</button>
                                <button type="button" class="btn btn-success" data-mdb-ripple-init>Sauvegarder les changements</button>
                            </div>
                        </div>
                    </div>
                </div>
                <?php
            }
        }

 Sur ma page boss.php j'ai donc : 

<!Doctype html>
<html lang="fr">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Font Awesome -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
        <link href="https://fonts.cdnfonts.com/css/pricedown" rel="stylesheet">
        <!-- MDB -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.min.css" rel="stylesheet" />
        <!-- Custom CSS -->
        <link href="/src/css/style.css" rel="stylesheet"/>
        <!-- Titre -->
        <title>TEST</title>
        <!-- Logo -->
        <link rel="icon" type="image/png" href="/src/img/logo/logo.png"/>

    </head>
    <body>

<?php 

    include '../php/execute/config/base_link.php';
    include '../php/execute/user/function_user.php';
    include '../php/execute/user/function_boss.php';

?>

<style>
    #dashboard {
        background-image: url("../src/img/background/police.png");
        height: 100vh;
    }
    .bleu-custom {
        background: -webkit-linear-gradient(#283593, #1565C0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .form-control:focus {
        border-color: #283593;
        box-shadow: inset 0 0 0 1px #283593;
      }
    
      .form-outline .form-control:focus~.form-label {
        color: #283593;
      }
    
      .form-outline .form-control:focus~.form-notch .form-notch-middle {
        border-color: #283593;
        box-shadow: 0 1px 0 0 #283593;
        border-top: 1px solid transparent;
      }
    
      .form-outline .form-control:focus~.form-notch .form-notch-leading {
        border-color: #283593;
        box-shadow: -1px 0 0 0 #283593, 0 1px 0 0 #283593, 0 -1px 0 0 #283593;
      }
    
      .form-outline .form-control:focus~.form-notch .form-notch-trailing {
        border-color: #283593;
        box-shadow: 1px 0 0 0 #283593, 0 -1px 0 0 #283593, 0 1px 0 0 #283593;
      }
    
      .input-group>.form-control:focus {
        transition: all .2s linear;
        border-color: #283593;
        outline: 0;
        box-shadow: inset 0 0 0 1px #283593;
      }
      

      .form-control {
        color: #fff;
    }
    
    .form-control:focus {
        color: #fff;
    }

    ::-webkit-calendar-picker-indicator {
    filter: invert(1);
    font-size: 1.25em;
    line-height: .05em;
    }
    table {
        --mdb-table-bg: transparent !important;
        --mdb-table-color: white !important;
    }
    .pagination {
        --mdb-pagination-color: #fff;
    }


    /* Styles required only for the example above */
    .scrollspy-example-collapsible {
    position: relative;
    height: 20px;
    overflow: auto;
    }
    
    /* width */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px grey; 
    border-radius: 0px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #283593; 
    border-radius: 10px;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #283593; 
    }
    
    .form-select {
        background-color: transparent !important;
        color: white;
    }

    select option {
        color: #000;
        font-size: 18px;
    }

    .select2-container .select2-selection--single {
        background-color: transparent !important;

    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: white !important;
    }

    .list-group-item:last-child {
        border-bottom: 0px !important;
    }




</style>

        <?= modal_user_edit() ?>

<!--Main Navigation-->
<header>
    <!-- Background image -->
    <div id="dashboard" class="bg-image">
        <div class="mask" style="background: linear-gradient(90deg,hsla(0, 0%, 0%, 0.9),hsla(233, 57%, 37%, 0.95) 300%);">
            <div class="" style="margin-left: 14vh; margin-right: 14vh">
                <!-- Navbar -->
                <nav class="navbar navbar-expand-lg shadow-0 mb-3" style="margin-top: 12vh">
                    <!-- Container wrapper -->
                    <div class="container-fluid">
                        <!-- Toggle button -->
                        <button
                        data-mdb-collapse-init
                        class="navbar-toggler"
                        type="button"
                        data-mdb-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                        >
                        <i class="fas fa-bars"></i>
                        </button>

                        <!-- Collapsible wrapper -->
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <!-- Navbar brand -->
                            <h1 class="text-white poppins-semibold" href="#">POLICE <b style="background: -webkit-linear-gradient(#283593, #1565C0);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">DASHBOARD - BOSS PANEL</b></h1>
                            <!-- Left links -->
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        
                            </ul>
                        <!-- Left links -->
                        </div>
                        <!-- Collapsible wrapper -->

                        <!-- Right elements -->
                        <div class="d-flex align-items-center align-items-center">
                            <!-- Icon -->
                            <a class="text-reset me-3">
                                <h4 class="text-white poppins-semibold"><u style='text-decoration: underline 4px #283593;text-underline-offset: 5px;'><?= user_jobs_grade() ?></u></h4>
                            </a>

                            <!-- DECONNEXION -->
                            <?= logoutbutton() ?>
                        </div>
                        <!-- Right elements -->
                    </div>
                    <!-- Container wrapper -->
                </nav>
                <!-- Navbar -->
                <div class="row gx-2">
                    
                    <div class="col-md-1"></div>
                    <div class="col-md-3">
                        <div style="background: hsla(0, 0%, 100%, 0.08); backdrop-filter: blur(3px);  border: 2px solid rgba(255, 255, 255, 0.08);" class="mb-2 shadow-5 card rounded-4 text-white" >
                            <div class="card-body">
                                <h4 class="card-text mb-3 poppins-semibold">RECHERCHER UN AGENT</h4>
                                <form method="post">
                                    <div class="input-group">
                                        <div class="form-outline" data-mdb-input-init>
                                            <input type="search"  name="search" id="search" class="form-control form-control-lg text-white" autocomplete="off" required/>
                                            <label class="form-label text-white" for="search">Nom ou identifiant de l'utilisateur</label>
                                        </div>
                                        <button type="submit" class="btn btn-primary" data-mdb-ripple-init>
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </form>
                                
                                    <ul class="list-group special" id="show-list">

                                    </ul>
                                
                            </div>
                        </div>

                        <div style="background: hsla(0, 0%, 100%, 0.08); backdrop-filter: blur(3px);  border: 2px solid rgba(255, 255, 255, 0.08);" class="mb-2 shadow-5 card rounded-4 text-white" >
                            <div class="card-body">
                                <h4 class="card-text mb-5 poppins-semibold"><i class="fas fa-user-plus bleu-custom me-2"></i>ENREGISTRER DU PERSONNEL</h4>
                                <form method="post">
                                    <div class="form-outline mb-3" data-mdb-input-init>
                                        <i class="fas fa-user trailing fa-xl text-white"></i>
                                        <input type="text" id="name" name="user" class="form-control form-control-lg form-icon-trailing" />
                                        <label class="form-label text-white" for="name">Nom de la recrue</label>
                                    </div>
                                    <select name="grade" class="form-select form-select-lg rounded-1 mb-3" aria-label="Default select example">
                                        <option hidden>Grade</option>
                                        <?= select_grade() ?>
                                    </select>
                                    <div class="form-outline mb-3" data-mdb-input-init>
                                        <i class="fas fa-fingerprint trailing fa-xl text-white"></i>
                                        <input type="text" id="identifiant" name="identifiant" class="form-control form-control-lg form-icon-trailing" />
                                        <label class="form-label text-white" for="identifiant">identifiant de Connexion</label>
                                    </div>
                                    <div class="form-outline mb-4" data-mdb-input-init>
                                        <i class="text-white fas fa-lock fa-lg trailing"></i>
                                        <input type="password" name="mdp" id="form1" class="form-control form-control-lg form-icon-trailing" />
                                        <label class="form-label text-white" for="form1Example1">Mot de passe</label>
                                    </div>
                                    <div class="d-grid gap-2">
                                        <input data-mdb-ripple-init type="submit" class="btn btn-primary btn-block mb-1" value="Ajouter un acces" name="user_add" />
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div style="background: hsla(0, 0%, 100%, 0.08); backdrop-filter: blur(3px);  border: 2px solid rgba(255, 255, 255, 0.08);" class="mb-2  shadow-5 card rounded-4 text-white" >
                            <div class="card-body pb-0">
                                <div class="row">
                                    <h2 class="card-text ps-4 pt-3 poppins-semibold">AGENTS ENREGISTRES</h2>
                                    <h4 class="card-text mb-3 ps-5 poppins-semibold"><?= table_user_number() ?> ENREGISTRES</h4>
                                    
                                    <div class="table-responsive">
                                        <table class="table align-middle mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Nom & Prénom</th>
                                                    <th>Grade</th>
                                                    <th>Status</th>
                                                    <th>Identifiant</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?= table_user() ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row gx-2">
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </div>
        </div>
    </div>
  <!-- Background image -->
</header>
<!--Main Navigation-->

    <?php // include 'php/include/footer.html' ?>
    <?php include '../php/include/js.html' ?>


    <script type="text/javascript">
        $(document).ready(function() {
            $('#user_id').click(function() {
                // Récupérer l'identifiant
                var id = $(this).data('id');
                console.log('ID envoyé:', id);
                // Requête AJAX
                $.ajax({
                    url: "boss.php",
                    type: 'GET',
                    data: { id: id },
                    dataType: "json",
                    contentType: "application/json",
                    success: function(response) {
                         
                        if (response) {
                            const myModalEl = document.getElementById('myModal');
                            const modal = new mdb.Modal(myModalEl);
                            modal.show();
                        } else {
                            console.error("Erreur de la réponse !");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Erreur lors de la requête AJAX:", status, error); // Affiche une erreur en cas d'échec de la requête AJAX
                    }
                });
            });
        });
    </script>
        


    </body>
</html>

Si je laisse tout comme indiqué je vois juste ma page en balise 

-
Edité par ConstantinRodriguez 9 février 2024 à 19:14:22

Bonjour,

Juste une petite remarque dans function_boss.php en bas de ton script je ne sais pas si c'est openclassroom ou toi qui n'a pas fermer la balise php mais il faudra la fermé si ce n'est pas le cas.

Dans le code function_boss.php il ne faut pas que tu envoie le 

header('Content-type: application/json');

comme sa car en l'incluant en haut de ta page les données sont toutes interpreté comme du json alors que toi tu veux du text/html (regarde ici).

Apres reflexion si tu envoie une seule valeur à la fois tu n'a pas besoin d'encoder t'es données en json et donc de les décoder en php.
Pour que ta page ne soit plus noir fais cela :

function modal_user_edit() {
  
    if(isset($_POST['id'])) {
        header('Content-type: application/json') // envoie du content-type seulement si le formulaire a été envoyé.

 Mais comme je te l'ai dis plus haut si tu envoie qu'une données à la fois oublie le content-type et les données json (ecodage decodage), par contre tu devrais créer une feuille de style et mettre tout ce qui est à l'interieure de ta balise style.

Par la suite sert toi de la console des developpeur pour regarder si t'es valeurs sont bien envoyées etc...

-
Edité par Fc_fifou 12 février 2024 à 20:40:07

Bonjour.

Je n'ai pas lu les réponses, mais...

Si tu travailles avec des utilisateurs que tu dois identifier, ce sont des sessions PHP que tu dois mettre en place.De plus, envoyer l'identifiant d'un utilisateur par AJAX n'est pas un processus sûr.

Cordialement.