Javascript Проблемы с SideBar после Ajax вызова - PullRequest
Новая
       11

Javascript Проблемы с SideBar после Ajax вызова

0 голосов
/ 24 апреля 2020

У меня проблема, которая сводит меня с ума, у меня есть страница с боковой панелью слева, которая сворачивается вниз. Эта боковая панель работает очень хорошо, когда не вызывается ajax. Проблема возникает, когда вызывается Ajax. Чтобы быть более понятным, проблема возникает с require_once('../include/js/js.php');.

. Если я удаляю эту часть кодов различных вызовов ajax, проблема исчезает, но мне нужно это потребовать один раз, чтобы массив генерировался в ajax возвращается с помощью кнопок, предоставленных «DataTables. net» (кнопка печати, копирование ....)

Я думал, что решил проблему, удалив require_once('../include/js/js.php'); на моем Ajax файлов, но на самом деле не потому, что он удаляет нужные мне кнопки.

Из того, что я вижу, требование однажды не работает так, как мне хотелось бы ... Я искал 5 часов, пробуя все, но Я думаю, что мне не хватает знаний, чтобы решить эту проблему ...

Я покажу вам мой полный код:

Главная страница: 

<?php
session_start();
if(isset($_SESSION["connection"]) && ($_SESSION["role"] >= 0)){
require_once("../../include/js/ShowNotif.php");
$title_page = "Historique d'un NameSpace - Beluga";
require_once("../../include/head.php");

?>
  <!-- Main content -->
  <div class="main-content" id="panel">
    <!-- Topnav -->
    <?php
    require_once("../../include/navbar.php");
    ?>
    <!-- Header -->
    <!-- Header -->
    <div class="header bg-primary pb-6">
      <div class="container-fluid">
        <div class="header-body">
          <div class="row align-items-center py-4">
            <div class="col-lg-6 col-7">
              <h6 class="h2 text-white d-inline-block mb-0">Consultation</h6>
              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                  <li class="breadcrumb-item"><a href="dashboard.php"><i class="fas fa-home"></i></a></li>
                  <li class="breadcrumb-item"><a href="historyofnamespace.php">NameSpace</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Liste</li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Page content -->
    <div class="container-fluid mt--6">
      <!-- Table -->
      <div class="row">

        <div class="col-md-12">
          <div class="card-wrapper">
            <!-- Input groups -->
            <div class="card">
              <!-- Card header -->
              <div class="card-header bg-Default">
                <h3 class="mb-0" style="color:white;">Historique d'un NameSpace</h3>
              </div>
              <!-- Card body -->
              <div class="card-body bg-Default">

                  <!-- Input groups with icon -->

                  <div class="row">
                    <div class="col-md-6 mr-auto ml-auto">
                      <div class="form-group">
                        <!-- <div class="input-group input-group-merge">
                          <div class="input-group-prepend">
                            <span class="input-group-text"><i class="ni ni-collection"></i></span>
                          </div>
                          <input class="form-control" placeholder="Code SA" type="text" name="codesa" onkeyup="checkForEnterKey(this.value);" id="codesa" value="">
                        </div> -->
                        <label for="codesa" style="color:white;">CodeSA</label>
                        <div class="input-group mb-3">
                          <input type="text" class="form-control" id="codesa" name="codesa" placeholder="Saisir le code applicatif" aria-label="Saisir le code applicatif" aria-describedby="button-addon2">
                          <div class="input-group-append">
                            <button class="btn btn-outline-primary" type="button" id="clicksubmitsa" onclick="SubmitSA('SearchHistoryOfNamespace();');">Valider</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>


                  <div id="resultatlistsa"></div>
                  <!-- Input groups with icon -->


              </div>



<div id="resultatlistofhistory"></div>
            </div>

          </div>

        </div>






      </div>
      <!-- Footer -->
      <?php
      require_once("../../include/footer.php");
      ?>



    </div>
  </div>
  <!-- Argon Scripts -->
  <!-- Core -->


  <?php
  require_once("../../include/js/js.php");
  require_once("../../include/js/historydeploymentofnamespacejs.php");
  ?>

</body>

</html>

<?php
}else{
  header('Location: ../../connect.php');
} ?>

Первый Ajax вызов : 

<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$codesa = strtolower($_POST['codesa']);
$fonction = $_POST['fonction'];
// SearchServicesOfANamespace(); SearchHistoryOfNamespace();

if(isset($codesa) && !empty($codesa)){
    $bearer = "";
    $Link = $ApiBaseLink."allhistorydeploymentnamespace";
    $object = GetHTTPRequest($Link, $bearer);

    if ($object != FALSE){
        $NombreSA = sizeof($object);
        ?>
        <div class="row">
            <div class="col-md-8 mr-auto ml-auto">
              <div class="form-group">
                <label for="namespace" style="color:white;">NameSpaces</label>
                <select id="namespace" name="namespace" data-toggle="select" class="form-control" onchange="<?php echo $fonction; ?>">
                  <!-- ShowLoadingProcess(); -->
                    <option selected disabled>Liste des namespaces</option>

                    <script>
                    var table = $('#datatable-buttons').DataTable();
                    table.destroy();
                    </script>

        <?php
                        for($SA = 0; $SA < $NombreSA; $SA++){
                          $namespace = $object[$SA]["namespacename"];

                          if (strpos($namespace, $codesa) !== false) {

        ?>
                            <option value="<?= $namespace; ?>"><?= $namespace; ?></option>
        <?php

      }
                        }
        ?>
                </select>
              </div>
            </div>
        </div>
        <?php
    }else{
      return http_response_code(404);
    }
}
?>

После выбора, последний ajax вызов: 

<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$bearer = "";
$namespace = strtolower($_POST['namespace']);
?>
<div class="row">
  <div class="col">
    <div class="card bg-Default">
      <!-- Card header -->
      <div class="card-header bg-Default">
        <h3 class="mb-0" style="color:white;">Liste des services</h3>
        <p class="text-sm mb-0" style="color:white;">
          Voici l'ensemble de l'historique pour ce NameSpace.
        </p>
      </div>
      <div class="table-responsive py-4">
        <table class="table bg-white" id="datatable-buttons" data-turbolinks="false">
          <thead class="thead-light">
            <tr>
              <th>NameSpace</th>
              <th>Composant</th>
              <th>Tag</th>
              <th>Date déploiement</th>
              <th>Date Création du Tag</th>
              <th>Par</th>
              <th>Date ajout composant</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>NameSpace</th>
              <th>Composant</th>
              <th>Tag</th>
              <th>Date déploiement</th>
              <th>Date Création du Tag</th>
              <th>Par</th>
              <th>Date ajout composant</th>
            </tr>
          </tfoot>
          <tbody>
          <?php
          if(!empty($namespace)){

             $Link = $ApiBaseLink."historydeployment/".$namespace;
             $object = GetHTTPRequest($Link, $bearer);
             if($object != FALSE){
               $NombreHistoriques = sizeof($object);
               if ($NombreHistoriques > 0){
                    for($historique = 0; $historique < $NombreHistoriques; $historique++){
                      $id = $object[$historique]["id"];
                      $servicename = $object[$historique]["servicename"];
                      $tagversion = $object[$historique]["tagversion"];
                      $datedeploiement = $object[$historique]["datedeploiement"];
                      $datecreationtag = $object[$historique]["datecreationtag"];
                      $actionby = $object[$historique]["actionby"];
                      $dateajout = $object[$historique]["dateajout"];

                            ?>
                            <tr>
                              <td><span><?= $namespace ?></span></td>
                              <td><span><?= $servicename ?></span></td>
                              <td><span><?= $tagversion ?></span></td>
                              <td><span><?= $datedeploiement ?></span></td>
                              <td><span><?= $datecreationtag ?></span></td>
                              <td><span><?= $actionby ?></span></td>
                              <td><span><?= $dateajout ?></span></td>
                            </tr>
                          <?php

                  }
                }
              }else{
                ?>
                <script>
                ShowMessageNotification('error', 'Aïe ! L\'API n\'a pas répondu... ', 4000, 'top-end');
                </script>
                <?php
              }
          }else{
            ?>
            <script>
            ShowMessageNotification('error', 'Aïe ! Le NameSpace est vide... ', 4000, 'top-end');
            </script>
            <?php
          }
          ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Файл JS. PHP: 

<script src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/vendor/js-cookie/js.cookie.js"></script>
<script src="../../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="../../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="../../assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="../../assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/jszip.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/pdfmake.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/vfs_fonts.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- Argon JS -->
<script src="../../assets/js/argon.js?v=1.2.0"></script>

Сразу после при загрузке первой Ajax боковая панель перестает быть выпрямляемой, она зависает. Он остается зависшим после второго AJAX.

Проблема заключается в следующем: 

VM8230:2655 Uncaught TypeError: $this.select2 is not a function
    at init (<anonymous>:2655:9)
    at HTMLSelectElement.<anonymous> (<anonymous>:2667:4)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at <anonymous>:2666:11
    at <anonymous>:2671:3
    at b (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at Object.dataFilter (jquery.min.js:2)
    at jquery.min.js:2

Но мой jquery загружается только один раз, я надеюсь, что кто-то с опытом может решить эту проблему , это сводит меня с ума на самом деле .. я не понимаю, почему require_once может вызвать это ..

...