CODEWITHSUNDEEP
javascriptjquery
Felipe Siqueira Queiroz
Felipe Siqueira Queiroz

Reputation: 23

NProgress with modal dialog to prevent click

I am usign a app using NProgress.js. Its amazing plugin.

I whanto know it is possible to use with NProgress, a modal dialog ou something like it, to prevent click when NProgress is running in my $.ajax request.

Tks

Upvotes: 0

Views: 748

Answers (2)

Zack Garza
Zack Garza

Reputation: 11

This can be done, but the fading effect of the modal obscures the loading bar shown by NProgress. So you may want to attach the loading bar to something other than the 'body' DOM element using something like

NProgress.configure({ parent: '#newContainer' });

In any case, simply drop a modal block somewhere in the body of the HTML page:

<!-- Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Fetching New Data</h4>
     </div>
   <div class="modal-body">
     Please wait...
  </div>
</div>

Initialize it in javascript (note that keyboard: false prevents typing from dismissing the modal, backdrop:static prevents clicking to dismiss):

$('#loadingModal').modal({ show: false, keyboard: false, backdrop: 'static'});

Then show/hide it in an Ajax call appropriately:

NProgress.start();
$('#loadingModal').modal('show');

$.ajax({...
  }).done(response => {
    // Handle success
  }).fail(err => {
    // Handle errors
  }).always(() => {
    $('#loadingModal').modal('hide');
    NProgress.done()
  });

Upvotes: 1

andalm
andalm

Reputation: 81

I think this

 NProgress.inc() 
 $.ajax({...})
  .done(function( data ) {
    ...
    NProgress.done()
  });

Remember that you must manage the errors.

Upvotes: 0

Related Questions