How to show the image of the bootloader with the message in the center and prevent the automatic boot dialog while the AJAX response comes from the PHP file?

Question

I am using Bootstrap v 3.0.0 . I follow the Bootstrap Modal HTML code:

<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Submit Form</h4> </div> <div class="modal-body" style="max-height: 300px; overflow-y: auto;"> <br/> <!-- The form is placed inside the body of modal --> <form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action=""> <div class="form-group"> <label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label> <div class="col-sm-5"> <input type="text" class="form-control" name="reg_id" id="reg_id"/> </div> </div> <div class="form-group"> <label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label> <div class="col-sm-5"> <input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd"> </div> </div> <div class="form-group"> <label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label> <div class="col-sm-5"> <input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" /> </div> </div> <div class="form-group"> <div class="col-sm-5 col-sm-offset-5"> <button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </div> </form> </div> </div> </div> </div> 

For the above boot modal code, I wrote the following AJAX-jQuery code:

 $('#request_form').submit(function(e) { var form = $(this); var formdata = false; var reg_id = $('#reg_id').val(); var reg_date = $('#reg_date').val(); if(window.FormData) { formdata = new FormData(form[0]); } var formAction = form.attr('action'); $.ajax({ url : 'xyz.php', type : 'POST', cache : false, data : formdata ? formdata : form.serialize(), contentType : false, processData : false, beforeSend: function() { $(".btn").prop('disabled', true); // disable both the buttons on modal }, success: function(response) { $(".btn").prop('disabled', false); // enable both the buttons on modal var responseObject = $.parseJSON(response); if(responseObject.error_message) { if ($(".alert-dismissible")[0]) { $('.alert-dismissible').remove(); } var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>"; $(htmlString).insertBefore('div.modal-body #request_form'); } else { $('#newModal').modal('hide'); $('#Modal2').modal('show'); } } }); e.preventDefault(); }); 

I want to show the corresponding loader image exactly in the center of the screen along with the message "Your request is being processed ... wait" when the AJAX request is sent to the PHP file and it should be displayed exactly on the center of the screen until the response from the PHP file appears.

Also during this time, the user should not be able to close the modal, and he should not hide if the user clicks somewhere separately from the modal. In other words, until a response from the PHP file is received, the user cannot do anything.

I tried many tricks, but I can turn off the two buttons that appear on the form until the answer comes up. But actually I want to do much more.

Answer 1

http://jsfiddle.net/cnvusn04/2/

CSS

.modal {text-align: center; }

.modal: before {display: inline-block; vertically aligned: medium; content: ""; height: 100%; }

.modal-dialog {display: inline-block; text-align: left; vertically aligned: medium; }

JQ:

 $('#myModal').modal({ show:false, }) // prevents closure while the ajax call is in progress $('#myModal').on('hide.bs.modal', function (e) { if(inProgess == true) return false; }) var inProgess = false; ajaxCall(); function ajaxCall() { inProgess = true; $('#myModal').modal('show'); //simulates the ajax call setTimeout(function(){ inProgess = false; $('#myModal').modal('hide'); }, 5000); } 

Answer 2

Here is what you could do:

• Use css to create a rotation symbol
• Regarding the positioning of the icon and message, follow these steps:
  • create a div that spans the entire page
  • set z-index to a value greater than the modal value
  • use css to center content in div
  • div must be hidden first
  • When a dispatch event fires a div, it becomes visible, and then disables any user action.
• Use the following JavaScript:

JavaScript:

 $(function() { var mod1 = $('#newModal'), mod2 = $('#modal2'), btn = $('.open-form'), ldg = $('#loading'); mod1.add(mod2).modal({show: false}); btn.on('click', function() { mod1.modal( 'show' ); }); $('#request_form').submit(function(e) { e.preventDefault(); ldg.find('> div > span').text('Please wait as your file is uploaded') .end().show(); var form = $(this); var formdata = false; var reg_id = $('#reg_id').val(); var reg_date = $('#reg_date').val(); if(window.FormData) { formdata = new FormData(form[0]); } var formAction = form.attr('action'); $.ajax({ url : formAction, type : 'POST', cache : false, data : formdata ? formdata : form.serialize(), contentType : false, processData : false, success: function(response) { ldg.hide(); var responseObject = $.parseJSON(response); if(responseObject.error_message) { if ($(".alert-dismissible")[0]) { $('.alert-dismissible').remove(); } var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>"; $(htmlString).insertBefore('div.modal-body #request_form'); } else { $('#newModal').modal('hide'); $('#Modal2').modal('show'); } } }); }); }); 

Demo:

Demo

Answer 3

Please note that I expect your question to be close because it is "too wide."

You can try to disable the mouse event in modal mode:

 $(".modal").css('pointer-events','none'); 

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

The above does not disable the button (used to open the modal), but you can save your first decision. Also note that you will need to set the modal keyboard false option to close the closure with the escape key.

Alternatively, you can set the overlay with a higher z-index than modal

CSS

 html, body{ height:100%; } #disableall{ position: absolute; width: 100%; height:100%; z-index:1050; background-color: rgba(255,0,0,0.5); display:none; } 

html immediately after the <body> :

 <div id="disableall"></div> 

Javascript

  beforeSend: function() { $("disableall").show(); }, 

Answer 4

it worked for me, try this

CSS

 #pageloaddiv { position: fixed; margin: 0px; width: 100%; height: 100%; z-index: 100000; background: url('../img/ajax-loader.gif') no-repeat center center rgba(0, 0, 0, 0.38); } 

HTML

 <div id="pageloaddiv" style="display: none;"></div> 

Javascript

 $.ajax({ url: 'your url', beforeSend:function(){ $('#pageloaddiv').show(); }, success: function() { $('#pageloaddiv').hide(); $('#newModal').hide(); }, }); 

Answer 5

Is there anything wrong with using font awesome that are animated

 <i class="fa fa-spin fa-3x"></i> 

above then can do the trick for you