Как отформатировать модальное содержимое без обновления страницы

Question

Сейчас я занимаюсь разработкой приложения rails, и у меня возникли проблемы с обновлением модального содержимого без перезагрузки страницы.Я сделал модальное в моем файле html.erb, и если я нажимаю кнопку, открывается модальное окно, и когда я нажимаю кнопку закрытия во время его шагов, модальное закрытие и содержимое модального окна (например, значение ввода и текстовое поле) все еще остаютсяостальной.Как я могу отформатировать модальный по умолчанию без обновления страницы.

Вот модальная структура

<div class="modal fade new-invest-modal" id="new-investment-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalThree" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="tabs-wrap">
        <ul class="nav nav-tabs modal-navs-two" id="myTabTwo" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="start-invest-tab" data-toggle="tab" href="#start-invest" role="tab" aria-controls="start-invest" aria-selected="true"></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="new-invest-name-tab" data-toggle="tab" href="#new-invest-name" role="tab" aria-controls="new-invest-name" aria-selected="false"></a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContentTwo">
          <div class="tab-pane fade show active default-text-wrapper" id="start-invest" role="tabpanel" aria-labelledby="start-invest-tab">
            <div class="modal-body">
             ...
            </div> <!-- /.modal-body -->
          </div> <!-- /.tab-pane -->

          <div class="tab-pane fade" id="new-invest-name" role="tabpanel" aria-labelledby="new-invest-name-tab">
            <div class="main-container clearfix">
            ...
            </div> <!-- /.main-container -->
         </div> <!-- /.tab-pane -->
      </div>
    </div>

Скажи мне, как просто.Спасибо

Answer 1

Вам придется переопределить функциональность opening, чтобы это работало.

Допустим, у вас есть поле ввода:

<div class="modal fade new-modal" id="test-modal" tabindex="-1" role="dialog" aria-hidden="true"><br> <input type="text" id="test-input" value="test">

вам придется использовать JQuery, чтобы переопределить его функциональность.

давайте также предположим, что ваш модальный идентификатор похож на test-modal

$('#test-modal').on('shown.bs.modal', function (e){//shown.bs.modal will
                                                   //trigger before modal is opened.
  $('#test-input').val('');//this will make the values in the input field empty
});