如何刷新模式页面

Question

JS:

function createNewCategory(idx){
$('#category').modal('show');
var modal = $('#category').modal();
$('.ok').unbind().click(function(){
modal.find('form').ajaxSubmit({
    url: "<?php echo url('/category') ?>",
    type: "POST",
    dataType : 'json',
    success : function(data){
        var app = '<option selected="" value="'+data.CategoryID+'">'+data.CategoryName+'</option>';
        $('.cats-' + idx).append(app);
        $('.cats-' + idx).multiselect();
    }
});
modal.modal('hide');
});
    return false;
  }

Modal Form (HTML)

 <div class="modal fade" id="category"> 
            <div class="modal-dialog"> 
              <div class="modal-content"> 
                <div class="modal-header"> 
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Kategori baru</h4>
                </div> 
                <div class="modal-body"> 
                  <form class="form-horizontal" id="category-form" enctype="multipart/form-data">
                  {{ csrf_field() }}
                  <div>
                    <ul class="nav nav-tabs language" role="tablist" id="myTab" >
                    @foreach($languages as $language)
                      <li name="LanguageName" class="{{$language->id == 1 ? 'active' : ''}}"><a href="#catlang-{{$language->id}}" data-toggle="tab">{{$language->LanguageName}}</a></li>
                    @endforeach
                    </ul>
                    <div class="tab-content">
                    @foreach($languages as $language)
                      <div class="tab-category tab-pane fade {{$language->id == 1 ? 'in active' : ''}}" id="catlang-{{$language->id}}">
                        <label>Nama Kategori <span class="required">*</span></label>
                          <input type="text" name="CategoryName[{{$language->id}}]" class="form-control" required></input>
                      </div>
                    @endforeach
                    </div>
</form>
                </div> 
                <div class="modal-footer"> 
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
                  <button type="button" class="btn btn-primary ok">OK</button> 
                </div> 
              </div> 
            </div> 
          </div>

After I input something in "input text" then I close and I open the modal again.. The modal page does not refresh and It makes me get the value of input text before.. How to refresh the modal?

Answer 1

You need to clear all fields in modal. As answered in Clear modal fields after close it

Just use one-type selector on each modal window field

Answer 2

You can clean the inputs when the modal is shown, you just have to wait for the event "shown". First, add a class to your inputs, so we can clean it later:

    @foreach($languages as $language)
                              <div class="tab-category tab-pane fade {{$language->id == 1 ? 'in active' : ''}}" id="catlang-{{$language->id}}">
                                <label>Nama Kategori <span class="required">*</span></label>
<!-- Please note: I add a class "clean-modal" -->
                                  <input type="text" name="CategoryName[{{$language->id}}]" class="form-control clean-modal" required></input>
                              </div>
                            @endforeach

Then, wait for the modal to be shown. And inside the function clean the inputs

$('#category').on('shown.bs.modal', function() {
    $(".clean-modal").val(""); //We empty the inputs with the class "clean-modal"
})

Hope this helps

Answer 3

Use submit button in place of button it will reload the page as it submits the form

<button id="yourID" class="btn btn-primary" type="submit">Send</button>

or without any modification use the simplest way to hide a modal

$('#category').modal('hide');

along with this you can Clear modal fields after close it like mentioned by Jukka :)

Answer 4

通过使用JavaScript的重置功能，只需在隐藏模式之前重置表单即可解决您的问题。

$('form')[0].reset();