如何在模态中刷新页面答案

【问题标题】：How to refresh page in modal如何在模态中刷新页面
【发布时间】：2017-09-25 05:24:49
【问题描述】：

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>

在 “输入文本” 中输入内容后，我关闭并再次打开模式。模式页面不刷新，它让我之前获得输入文本的值。如何刷新模态？

【问题讨论】：

标签： javascript php html bootstrap-modal

【解决方案1】：

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

只需在每个模态窗口字段上使用一种类型的选择器

【讨论】：

【解决方案2】：

您可以在显示模式时清除输入，您只需等待“显示”事件。首先，为您的输入添加一个类，以便我们稍后清理它：

    @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"
})

希望对你有帮助

【讨论】：

【解决方案3】：

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

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

或者不做任何修改，使用最简单的方法来隐藏模态

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

除此之外，您还可以像 Jukka 提到的那样 Clear modal fields after close it :)

【讨论】：

【解决方案4】：

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

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

【讨论】：

最好使用特定的东西，例如 id 或 class，而不是使用表单标签作为选择器。