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

模态表格（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>

在＆＃34;输入文字＆＃34; 之后输入内容然后我关闭并再次打开模态...模态页面不刷新它让我得到输入的值之前的文字..如何刷新模态？

Answer 1

您需要清除模态中的所有字段。正如Clear modal fields after close it

中所回答的那样

在每个模态窗口字段

上使用单一类型选择器

Answer 2

您可以在显示模态时清洁输入，您只需等待事件＆＃34;显示＆＃34;。首先，在输入中添加一个类，以便我们以后可以清除它：

    @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

然后，等待显示模态。在函数内部清理输入

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

希望这有帮助

Answer 3

使用提交按钮代替按钮，它将在提交表单时重新加载页面

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

或没有任何修改使用隐藏模态的最简单方法

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

与此一起，你可以像Jukka所提到的那样Clear modal fields after close it：）

Answer 4

只需在使用JavaScript的重置功能隐藏模态之前重置表单，这将解决您的问题。

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

如何在模态中刷新页面

4 个答案: