CODEWITHSUNDEEP
javascriptphphtmlbootstrap-modal
Jems
Jems

Reputation: 1706

How to refresh page in modal

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?

Upvotes: 0

Views: 6054

Answers (4)

M. Verma
M. Verma

Reputation: 1

Just reset the form before hiding the modal by using reset function of JavaScript this will solve your problem. 

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

Upvotes: 0

Mr. Pyramid
Mr. Pyramid

Reputation: 3935

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 :)

Upvotes: 0

Parzibyte
Parzibyte

Reputation: 1598

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

Upvotes: 0

Jukka Newkampton
Jukka Newkampton

Reputation: 415

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

Upvotes: 2

Related Questions