Модальный и якорный тег href bug - PullRequest
Новая
       12

Модальный и якорный тег href bug

0 голосов
/ 12 июня 2018

Я использую bootstrap 4 (я также пытался использовать bootstrap 3), и я думаю, что у меня глючит модальный режим, потому что, когда я добавляю что-то в тег привязки href, это вызывает его поломку, как будто его содержимое изменилось так же, как и в моем mainстраница или он просто показывает и исчез.Вот мой модал и мой тег привязки выглядит (мой модал находится в моем package.php, в то время как тег привязки находится внутри функции, которая находится в packageclass.php): 

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

packageclass.php 

    public function GetAllData($getTbl){
    try{
        $query = $this->dbconn->prepare("SELECT * FROM tblpackages P JOIN tblpackageincluded I ON P.PackageID = I.PackageID JOIN tblrates R ON P.PackageID = R.PackageID");
        $query->execute();
        if($query->rowCount() > 0){
            while ($row = $query->fetch(PDO::FETCH_ASSOC)){
                if($getTbl == 1){
                    echo "<tr>";
                    echo "<td>". $row['PackageID'] ."</td>";
                    echo "<td><a href='DeletePackages.php?id=". $row['PackageID'] ."'><i class='fas fa-trash-alt'></i></a></td>";
                    echo "<td><a href='EditPackages.php?id=". $row['PackageID'] ."'><i class='fas fa-edit'></i></a></td>";
                    echo "<td>". $row['PackageName'] ."</td>";
                    echo "<td>". $row['PackageCost'] ."</td>";
                    echo "<td>". $row['PackNote'] ."</td>";
                    echo '<td> <a href="?id='. $row['PackageID'] .'" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-eye"></i></a></td>';
                    echo '<td> <a href="?id='. $row['PackageID'] .'" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-eye"></i></a></td>';
                    echo "</tr>";
                }
                else if($getTbl == 2){
                    echo "<tr>";
                    echo "<td>". $row['PackageIncID'] ."</td>";
                    echo "<td>". $row['PackIncluded'] ."</td>";
                    echo "</tr>";
                }
                else if($getTbl == 3){
                    echo "<td>". $row['RateID'] ."</td>";
                    echo "<td>". $row['RateCount'] ."</td>";
                    echo "<td>". $row['CostPerHead'] ."</td>";
                }
            }
        }
    }
    catch(PDOException $e){
        echo $e->getMessage();
    }
}

Спасибо

Изображение через 1 секунду выглядит так: Modal After a second

1 Ответ

0 голосов
/ 12 июня 2018

У вас есть конфликт:

  1. <a> теги вызывают обратную передачу.
  2. При нажатии js

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

  • закрытие исходного режима,
  • извлечение данных,
  • и создание новой таблицы modal-body
  • , которая не будет отображаться, пока вы не нажметеякорь ... который запускает процесс заново.

Что делать?

Вам необходимо устранить конфликт.Вы можете ...

  1. Отправлять и извлекать данные, заполнять модальное тело, а затем автоматически отображать модальное значение с помощью js на готовом документе.-OR-
  2. На стороне клиента щелкните, чтобы получить данные через ajax и заполнить динамическую таблицу во время события модального показа.

Если вы используете опцию обратной передачи, вы можете делать все как вам.сейчас с PHP.Вам нужно удалить модальное отображение из тега привязки и запустить его в функции готовности jquery или любом другом методе готовности, который вы предпочитаете.Это не очень чистый способ сделать это, но это вариант.

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

...