2017-09-25 46 views
0

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> 

“输入文本”我输入的东西后然后我关闭,我再次打开该模式。该模式也不会刷新页面,这让我之前获得的输入文本的价值。如何刷新模式?

回答

0

您可以清洁输入时显示的模式只需使用一个类型选择,你只需要等待“显示”的事件。首先,添加一个类到您的输入,所以我们可以稍后清理它:

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

希望这有助于

0

使用替代按钮提交按钮,因为它提交表单

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

或不做任何修改使用它会重新加载页面最简单的方式来隐藏模式

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

随着这个,你可以Clear modal fields after close it像由尤卡提到:)

0

通过使用JavaScript此复位功能将解决您的问题隐藏模式之前就重置表单。

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

最好是使用像id或class之类的东西,而不是使用form标签作为选择器。 –