How to format modal contents without refreshing the page

Question

I'm now developing rails app and I've some issues with refreshing modal content without reloading the page. I have made a modal in my html.erb file and if I click a button, the modal opens and when I click close button during it's steps, the modal closes and the contents of modal(ex: value of input and textarea) are still remaining. How can I format modal as default without refreshing page.

Here are modal structure

 <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> 

Tell me the way as simple. Thanks

Answer 1

You'll have to override modal opening functionality to make this work.

let's say you've an input field as:

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

you'll have to use JQuery to override it's functionality.

let's also assume your modal id is something like 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
});