11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
Je suis artisan dans le transport et je fais du développement à mes heures perdues (quand j'en ai Smiley cligne )
Pour simplifier la gestion de certaines tournées j'ai développé sur l'intranet local, quelques outils dont l'un permettant de pointer les tournées pour une meilleure organisation de mon travail.
Je suis actuellement confronté à un problème récurent dans l'ensemble de mes scripts que j'aimerai comprendre et trouver une solution, c'est pourquoi je fais appelle à vos compétences pour tenter d'y remédier.
J'utilise dans mon exemple du PHP, du sql, jquery + ajax et l'excellent datatables

J'ai un premier script qui est injecté à la saisie d'un nom en ajax dans une div via un petit moteur de recherche.

<?php
session_start();
$lien="../../../../";
$ip_serveur=$_SERVER["REMOTE_ADDR"];
include("".$lien."include/test-serveur.php");

$resultats = $connexion->prepare("
SELECT c.*,
l.ville AS site_ville,l.adresse AS site_adresse,l.ardt AS site_ardt,l.secteur AS site_secteur,l.cp AS site_cp,
p.ville AS pointe_ville,p.adresse AS pointe_adresse,p.ardt AS pointe_ardt,p.secteur AS pointe_secteur,p.cp AS pointe_cp
FROM
mos_referentiel_lieu l ON c.id_site=l.id
JOIN mos_referentiel_lieu p ON c.id_site_pointage=p.id
WHERE c.id=?
");
$resultats->execute(array($_POST['id']));
$nb_resultats = $resultats->rowCount();
while ($donnees = $resultats->fetch())
{
  $resultatsp = $connexion->prepare("
  SELECT date_crea,DATE_FORMAT( date_crea, '%d/%m/%Y à %Hh%i') AS date_dernier_pointage,DATE_FORMAT( date_perime, '%d/%m/%Y à %Hh%i') AS date_perime_pointage
  FROM mos_cj_pointage WHERE id_cj=? ORDER BY date_crea DESC limit 0,1");
  $resultatsp->execute(array($donnees['id']));
  $nb_resultatsp = $resultatsp->rowCount();
  if ($nb_resultatsp > 0){
    while ($donneesp = $resultatsp->fetch())
    {
  $date_dernier_pointage=$donneesp['date_dernier_pointage'];
  $date_perime_pointage="Prochain pointage : ".$donneesp['date_perime_pointage'];
}
}else{
  $date_dernier_pointage="<p class='text-danger'>Pas encore de pointage enregistré ...</p>";
  $date_perime_pointage="";
}
$resultatsp->closeCursor();
?>
<div class="row justify-content-md-center">
  <div class="col-md-4">

    <div class="card">
      <div class="card-body">
        <?php
        //echo $donnees['id_doc_saisi'];
        if($donnees['id_doc_saisi'] > 0){
          echo "<span class='text-danger clignoter'>Document à saisir <br></span>";
        }
        ?>
        <p class="text-primary h4"><b><span id="nom-pointage"><?php echo $donnees['nom'];?></span></b> <span id="prenom-pointage"><?php echo $donnees['prenom'];?></span></p>
        <b>Adresse :</b> <?php echo $donnees['adresse'];?> <?php echo $donnees['cp'];?> <?php echo $donnees['ville'];?><br>
        <b>Telephone : </b> <i class="fas fa-phone" aria-hidden></i> <?php echo ($donnees['telephone'] == "" ? '<i class="gris_clair">Non communiqué ...</i>' : $donnees['telephone']);?><br>
        <b>Portable : </b> <i class="fas fa-mobile" aria-hidden></i> <?php echo ($donnees['portable'] == "" ? '<i class="gris_clair">Non communiqué ...</i>' : $donnees['portable']);?><br>
        <b>Numéro de dossier :</b>    <?php echo ($donnees['num_dossier'] == "" ? '<i class="gris_clair">Non communiqué ...</i>' : $donnees['num_dossier']);?><br>
        <b>Lieu de pointage : </b><br>
        <?php echo $donnees['pointe_adresse'];?> <?php echo $donnees['pointe_cp'];?> <?php echo $donnees['pointe_ville'];?><?php echo $donnees['pointe_ardt'];?>
        <hr size="1" color="808080">
        <div id="aff_maj_pointage">
          Dernier pointage effectué : <?php echo $date_dernier_pointage;?><br>
          <?php echo $date_perime_pointage;?><br>
        </div>
        <div id="aff_document_saisi">
          <?php
          if($donnees['id_doc_saisi'] > 0){
            $resultatsdoc = $connexion->prepare("
            SELECT s.id_document,s.num_document,s.destination_document,DATE_FORMAT( s.date_crea, '%d/%m/%Y à %Hh%i') AS date_crea
            FROM mos_cj_saisi_document s JOIN mos_document d ON  s.id_document=d.id
            WHERE s.id_cj=? ORDER BY s.id ASC LIMIT 0,1
            ");
            $resultatsdoc->execute(array($donnees['id']));
            $nb_resultatsdoc = $resultatsdoc->rowCount();
            if($nb_resultatsdoc > 0){
              while ($donneesdoc = $resultatsdoc->fetch())
              {
                ?>
                <hr size="1" color="808080">
                <?php
              }
            }else{
              ?>
              <?php
            }
            $resultatsdoc->closeCursor();
            ?>
            <hr size="1" color="808080">
            <span class='text-danger clignoter'>Document à saisir au premier pointage :<br></span>
            <select class="mdb-select colorful-select dropdown-primary" id="document_saisi">
              <option value="" selected disabled>Document à saisir au premier pointage</option>
              <?php
              $resultats_module2 = $connexion->prepare("SELECT * FROM mos_document  ORDER BY document ASC");
              $resultats_module2->execute(array());
              while ($donnees_module2 = $resultats_module2->fetch())
              {
                ?>
                <option value="<?php echo $donnees_module2['id'];?>" <?php if($donnees_module2['id'] == $donnees['id_doc_saisi']){ echo "selected";}?>><?php echo ucfirst ($donnees_module2['document']);?></option>
                <?php
              }
              $resultats_module2->closeCursor();
              ?>
            </select>
            <input id="numero_document" type="text" name="numero_document"  placeholder="Numéro du document" value="" class="form-control">
            <button type="button" class="btn btn-primary  btn-block" id="saisi_document" data-id-cj="<?php echo $donnees['id'];?>">Pointer un passage</button>
            <?PHP
          }
          ?>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-4">
        <?php
        $resultats_module1 = $connexion->prepare("SELECT * FROM mos_document  ORDER BY document ASC");
        $resultats_module1->execute(array());
        ?>
        <select class="mdb-select colorful-select dropdown-primary" id="document">
          <option value="" selected disabled>Document présenté</option>
          <?php
          while ($donnees_module1 = $resultats_module1->fetch())
          {
            ?>
            <option value="<?php echo $donnees_module1['id'];?>"><?php echo ucfirst ($donnees_module1['document']);?></option>
            <?php
          }
          $resultats_module1->closeCursor();
          ?>
        </select>
      </div>
      <div class="col-md-3">
        <input id="date_validite" type="text" name="date_validite"  placeholder="Date de validité du document" value="" class="form-control formdate">
      </div>
      <div class="col-md-5">
        <button type="button" class="btn btn-primary  btn-block" id="pointage" data-id-cj="<?php echo $_POST['id'];?>">Pointer un passage</button>
      </div>
    </div>


    <div class="row">
      <div class="col-sm border-top" id="aff_pointage">

        <?php
        $resultats5 = $connexion->prepare("
        SELECT p.id,p.id_document,DATE_FORMAT( p.date_crea, '%d/%m/%Y à %Hh%i') AS date_crea_pointage, p.date_validite,
        d.document,l.abrege
        FROM mos_cj_pointage p
        JOIN mos_document d ON  d.id=p.id_document
        JOIN mos_referentiel_lieu l ON  l.id=p.id_site_pointage
        WHERE p.id_cj=? ORDER BY date_crea_pointage ASC");
        $resultats5->execute(array($donnees['id']));
        $nb_resultats5 = $resultats5->rowCount();
        if($nb_resultats5 == 0){
          echo "<p class='text-danger'>Pas encore de pointage ....</p>";
        }else{
          ?>
          <table  id="table_pointage" class="table table-hover" style="width:100%">
            <thead>
              <tr>
                <th>POINTAGE</th>
                <th>LIEU</th>
                <th>DOCUMENT</th>
                <th>VALIDITE</th>
                <th>
                    Action
                </th>
              </tr>
            </thead>
            <tbody>
              <?php
              while ($donnees5 = $resultats5->fetch())
              {
                ?>
                <tr>
                  <td>
                    <?php echo $donnees5['date_crea_pointage'];?>
                  </td>
                  <td>
                    <?php echo $donnees5['abrege'];?>
                  </td>
                  <td>
                    <?php echo $donnees5['document'];?>
                  </td>
                  <td>
                    <?php echo $donnees5['date_validite'];?>
                  </td>
                  <td  id="<?php echo $donnees5['id'];?>">
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-danger btn-rounded eff_pointage" data-id="<?php echo $donnees5['id'];?>"><i class="fas fa-times rouge" aria-hidden="true"></i></button>
                      </div>
                  </td>
                </tr>
                <?php
              }
            }
            $resultats5->closeCursor();
            ?>
          </tbody>
        </table>


      </div>
    </div>
  </div>
</div>
<?php

}
$resultats->closeCursor();
?>

Mon script JS inclus à la page mère (celle qui reçoit le script ci dessus)

<script>
$(function() { // Init page
/////////////////////////////////////////////////////////
// pointage
var processing = false; //déclaration de la variable pour éviter le double clique
$(document).on('click', '#pointage', function(event)
{
  event.stopPropagation();
  if(processing) return; //Stoppe lexécution si la variable est à TRUE 	pour éviter le double clique
  processing = true; //Indique le début de lexécution des tâches
  var
  id_cj = $(this).data("id-cj"),
  id_document = $('#document').val(),
  date_validite = $('#date_validite').val();

  if (id_document === null) {
    toastr["error"]("Vous devez choisir <b>un document présenté</b>.");
    processing = false;
  }else if (date_validite.length==0) {
    toastr["error"]("Vous devez inscrire <b>une date de validté</b> du document présenté.");
    processing = false;
  }else
  {
    $.ajax({
      type: "POST",
      url: "pages/modules/cj/ajax/ajax_pointage.php",
      cache: false,
      async: false,
      global: false,
      data: "id_cj=" + id_cj + "&id_document=" + id_document + "&date_validite=" + date_validite,
      success: function(aff_table)
      {
//          $('#pointage-cj').prop('disabled', true);
          $('#aff_pointage').html(aff_table).fadeTo(300,1);
          ScalIniTablePointage();
          //On remet à zéro les données permettant le pointage
          type = 'document',
          data = '';
          selectType(type,data);
          $("#date_validite").val('');
          toastr["success"]("Enregistrement effectué avec succès.");
        //  setTimeout("location.reload();", 4000);
      }
    });
    // Remise à jour de la date dans la page
    $.ajax({
      type: "POST",
      url: "pages/modules/cj/ajax/ajax_majdate_cj.php",
      cache: false,
      async: false,
      data: "id_cj=" + id_cj,
      success: function(aff_maj)
      {
          $('#aff_maj_pointage').html(aff_maj).fadeTo(300,1);
      }
    });
    processing = false; //Indique la fin de l exécution des tâches
  }//test données
});/////////////////////////////////////////////////////////////////////
//Fin de l'init page
});

//////////////////////////////////////////////////
///////// Tableau pointage ///////////////////////////////
function ScalIniTablePointage(){
  //  var selected = [];
  var nomPointage = $("#nom-pointage").html();
  var prenomPointage = $("#prenom-pointage").html();
    var tablePointage =  $('#table_pointage').DataTable( {
    "language": {
      "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
    },
    dom: 'Bfrtip',
    scrollY: 500,
    order: [[ 1, "desc" ]],
    paging: true,
    pageLength: 10,
    lengthMenu: [
        [ 10, 25, 50, -1 ],
        [ '10 entrées', '25 entrées', '50 entrées', 'voir tous' ]
    ],
    buttons:
    [

      {
          extend:    'copyHtml5',
          text:      '<i class="fa fa-copy fa-2x gris_fonce"></i>',
          messageTop: 'Listing des pointages de '+ nomPointage +' '+ prenomPointage,
          titleAttr: 'Copier',
          exportOptions: {columns: ':visible:not(:last-child)'}// on exporte pas la dernière colonne
      },
      {
        extend:    'excelHtml5',
        text:      '<i class="fas fa-file-excel fa-2x vert" aria-hidden></i>',
        messageTop: 'Listing des pointages de '+ nomPointage +' '+ prenomPointage,
        titleAttr: 'Excel',
        customize: function( xlsx ) {
                var sheet = xlsx.xl.worksheets['sheet1.xml'];

                $('row c[r^="G5"]', sheet).attr('s', ['51', '56']);
            },
        exportOptions: {columns: ':visible:not(:last-child)'}// on exporte pas la dernière colonne

      },
      {
        extend:    'csvHtml5',
        text:      '<i class="fas fa-file-excel fa-2x bleu_info" aria-hidden></i>',
        messageTop: 'Listing des pointages de '+ nomPointage +' '+ prenomPointage,
        titleAttr: 'Excel - csv',
        exportOptions: {columns: ':visible:not(:last-child)'}// on exporte pas la dernière colonne
      },
      {
        extend:    'pdfHtml5',
        text:      '<i class="fas fa-file-pdf fa-2x rouge" aria-hidden></i>',
        messageTop: 'Listing des pointages de '+ nomPointage +' '+ prenomPointage,
        titleAttr: 'PDF',
        orientation: 'landscape',//change la position de la fenetre pour le pdf
        pageSize: 'LEGAL',//change la position de la fenetre pour le pdf
        exportOptions: {columns: ':visible:not(:last-child)'}// on exporte pas la dernière colonne
      },
      {
           extend: 'print',
           text: '<i class="fas fa-print fa-2x gris_fonce"></i>',
           messageTop: 'Listing des pointages de '+ nomPointage +' '+ prenomPointage,
           titleAttr: 'Imprimer cette page',
           exportOptions: {columns: ':visible:not(:last-child)'}// on exporte pas la dernière colonne
       }
    ],
    "columns": [
      null,
      null,
      null,
      null,
      {
        "sortable": false
      }
    ]
  });
  //////////////////////////////////////////////////////
  // Confirmation de suppression
  $(document).on("click", ".eff_pointage", function(){
  id = $(this).data('id');
  $('#confirmefface').modal('show');
  });
  // Si oui on supprime
  $(document).on("click", ".ok_eff_fiche", function(){
  $('#confirmefface').modal('hide');
  $.ajax(
    {
      type: "POST",
      url: "pages/modules/cj/ajax/ajax_supprime_pointage.php",
      data: "id=" + id,
      cache: false,
      success: function(msg0)
      {
        tablePointage.row($('#'+id).parents('tr')).remove().draw(false);
        $('#pointage-cj').prop('disabled', false);
        if (msg0 == 0){
          $('#aff_pointage').html("<p class='text-danger'>Pas encore de pointage enregistré ...</p>").fadeTo(300,1);
          $('#aff_maj_pointage').html(msg0).fadeTo(300,1);
        }

      }
    });
  });
} // Fin de la fonction ScalIniTablePointage()
</script>


Ensuite gràce à ce script j'effectue un pointage via le bouton id="pointage" jusqu'ici pas de souci.

La ou ça se complique c'est quand je veux effacer un pointage qui se trouve dans le tableau id="table_pointage" via le bouton eff_pointage.
La donnée s'efface bien ainsi que la ligne gràce à
tablePointage.row($('#'+id).parents('tr')).remove().draw(false);

mais je remarque que ce dernier script est exécuté plusieurs fois à savoir même autant de fois que j'aurai fait de pointage avant.
Je suppose fortement que ce doit être parceque j'appelle la fonction ScalIniTablePointage() dans mon script #pointage comme ceci
$('#aff_pointage').html(aff_table).fadeTo(300,1);
ScalIniTablePointage(); 

mais je remarque que j'ai besoin d'init mon tableau sinon je ne peux plus effacer de ligne après pointage si je ne le fait pas.

Avez vous une solution à m'apporter car je galère vraiment à comprendre ou j'ai fait une erreur ou un oubli.
Merci par avance pour votre aide Smiley smile