Как удалить контент из модального тела при закрытии модального? - PullRequest
Новая
       13

Как удалить контент из модального тела при закрытии модального?

0 голосов
/ 23 мая 2018

Моя цель - показывать свежий модал каждый раз, когда он открывается.В настоящее время это верно только тогда, когда модальное окно впервые отображается после обновления страницы.При последующем закрытии / открытии модального окна он просто добавляет текущий контент в конец предыдущего контента, который все еще отображается.

Возможно, стоит отметить, что при данной конкретной конфигурации предпринимались бесчисленные усилия, Я получаю

Uncaught ReferenceError: $ не определено

в моей консоли Javascript для строки 

$(document).ready(function() {

, но я неконечно почему.Библиотека jQuery (3.2.1) инициализируется для того типа скрипта, с которым она используется.Любая подсказка? 

<!-- Form -->
<form onsubmit="return false">

  <!-- Heading -->
  <h3 class="dark-grey-text text-center">
    <strong>Calculate your payment:</strong>
  </h3>
  <hr>

  <div class="md-form">
    <i class="fa fa-money prefix grey-text"></i>
    <input type="text" id="income" class="form-control">
    <label for="income">Your income</label>
  </div>

  <div class="text-center">
    <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
    <script type='text/javascript'>
      function calculator() {
        let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
        payment = Math.round(payment);
        if (payment <= 0) {
          $('.modal-body').append("$0 per month.");
        }
        else {
          $('.modal-body').append(payment + " or less per month.");
        }
       }
    </script>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="test" 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>

    <!-- Clear content from modal -->
    <script type="text/javascript">
      $(document).ready(function() {
        $('.exampleModal').on('hidden.bs.modal', function () {
          $('.modal-body').clear();
        });
      });
    </script>
    <hr>
    <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
    </fieldset>
  </div>

</form>
<!-- Form -->

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Вы должны использовать .html или .text вместо .append

if (payment <= 0) {
  $('.modal-body').text("$0 per month.");
}
else {
  $('.modal-body').text(payment + " or less per month.");
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
            <form onsubmit="return false">

              <!-- Heading -->
              <h3 class="dark-grey-text text-center">
                <strong>Calculate your payment:</strong>
              </h3>
              <hr>

              <div class="md-form">
                <i class="fa fa-money prefix grey-text"></i>
                <input type="text" id="income" class="form-control">
                <label for="income">Your income</label>
              </div>

              <div class="text-center">
                <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
                <script type='text/javascript'>
                  function calculator() {
                    let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
                    payment = Math.round(payment);
                    if (payment <= 0) {
                      $('.modal-body').text("$0 per month.");
                    }
                    else {
                      $('.modal-body').text(payment + " or less per month.");
                    }
                  }
                </script>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div id="test" 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>

                <!-- Clear content from modal -->
                <script type="text/javascript">
                  $(document).ready(function() {
                    $('.exampleModal').on('hidden.bs.modal', function () {
                      $('.modal-body').clear();
                    });
                  });
                </script>
                <hr>
                <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
                </fieldset>
              </div>

            </form>
            <!-- Form -->
0 голосов
/ 23 мая 2018

Попробуйте сделать $('modal-body').empty() вместо clear

...