Bootstrap Модал вызван из файла Javascript не работает - PullRequest
Новая
       10

Bootstrap Модал вызван из файла Javascript не работает

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

Моя цель такова:

  1. Я использую Javascript для отображения кнопки, когда на карте нажимается Маркер
  2. Когда кнопка отображается, то если пользовательщелкните по нему, на странице должен появиться модал.

Проблема, с которой я столкнулся: модал вообще не отображается.

Страница находится там: http://p4547.phpnet.org/bikes/reservation.html

Файл javascript называется: взаимодействовать-version3.js

Мой HTML-код для модальной одежды: 

<!-- Modal -->
  <div aria-hidden="true" aria-labelledby="exampleModalLongTitle" class="modal fade" id="bookingmodal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Réservation</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <div class="guide">
            <div class="row item">
              <div class="col-md-12 order-md-2">
                <h2 class="item-heading">Signature. <span class="text-muted">Signez pour valider votre réservation.</span></h2>
                <p class="lead">Titre<br></p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal" type="button">Fermer</button>
        </div>
      </div>
    </div>
  </div>

Вот раздел Javascript: 

onMarkerClick(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let name = info.name;
      let lowerName = name.toLowerCase();
      let address = info.address;
      let statusStation = info.status;
      let statusStationFr = statusStation.replace('OPEN', '<i class="fas fa-lock-open text-success"></i>&nbsp;&nbsp; Station Ouverte').replace('CLOSED', '<i class="fas fa-lock text-danger"></i>&nbsp;&nbsp; Station Fermée');
      let lastUpdate = info.last_update;
      let date = new Date(lastUpdate).toLocaleString();
      let availableBikes = info.available_bikes;
  // Affichage des infos de la station dans l'encart situé à droite :
      document.getElementById("name").innerHTML = `<h4 title="Adresse" class="details display-5"><i class="fas fa-map-marked-alt text-danger"></i>&nbsp;Détails de la station :</h4><div class="text-success"><h5>Station de Vélo'v</h5></div><h6>${name}</h6>`;
      document.getElementById("address").innerHTML = address;
      document.getElementById("status").innerHTML = statusStationFr;
      document.getElementById("last_update").innerHTML = `<i class="fas fa-clock"></i>&nbsp;&nbsp; Dernière mise à jour :  ` + date;
      if (availableBikes > 1) {
        document.getElementById("available_bikes").innerHTML = `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélos disponibles</strong><br>
          <br>
          <form>
          <div class="form-group row">
          <label for="lastname" class="col-sm-3 col-form-label">Nom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="lastname" placeholder="Votre Nom">
          </div>
          </div>
          <div class="form-group row">
          <label for="firstname" class="col-sm-3 col-form-label">Prénom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="firstname" placeholder="Votre Prénom">
          </div>
          </div>
          <div class="form-group row">
          <div class="col-sm-12">
          <button type="submit" class="btn btn-danger" data-target="#bookingmodal" data-toggle="modal">Réserver</button>
          </div>
          </div>
          </form>`;
        }

      else if (availableBikes == 1) {
        document.getElementById("available_bikes").innerHTML = `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélo disponible</strong><br>
          <br>
          <form>
          <div class="form-group row">
          <label for="lastname" class="col-sm-3 col-form-label">Nom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="lastname" placeholder="Votre Nom">
          </div>
          </div>
          <div class="form-group row">
          <label for="firstname" class="col-sm-3 col-form-label">Prénom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="firstname" placeholder="Votre Prénom">
          </div>
          </div>
          <div class="form-group row">
          <div class="col-sm-12">
          <button type="submit" class="btn btn-danger" data-target="#bookingmodal" data-toggle="modal">Réserver</button>
          </div>
          </div>
          </form>
          `;
      }
      else {
        document.getElementById("available_bikes").innerHTML = `<br><br><h3>Aucun vélo disponible dans cette station</h3><br><br>`;
      }
    }

Надеюсь, вы поможете мне в этом вопросе.

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Проблема в том, что кнопка имеет тип submit явно (а также по умолчанию) внутри формы. Браузер пытается отправить форму при нажатии на нее, что приводит к переходу от страницы. Вы можете предотвратить это поведение, изменив кнопку на button

<button type="button" ...>Réserver</button>
0 голосов
/ 12 июня 2019

Кнопка Reserver присутствует в форме, которая отправляет форму, и вызывает перезагрузку страницы.Вы можете прослушать кнопку click и предотвратить действие по умолчанию, используя e.preventDefault. 

const button = document.querySelector('button')
button.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('clicked');
})
<form action="">
  <button type="submit">Click Me</button>
</form>
...