2017-09-25 73 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標籤作爲選擇器。 –