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

Сейчас я разрабатываю приложение 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>

Подскажите как простой способ. Спасибо

Можете ли вы опубликовать модальный код?

Anand 26.10.2018 07:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

скажем, у вас есть поле ввода как:

<div class = "modal fade new-modal" id = "test-modal" tabindex = "-1" role = "dialog" aria-hidden = "true">
<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
});

Другие вопросы по теме