i have function ajax post that triggred after upload_btn click on my modal
// the modal
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="upload_btn" class="btn btn-primary btn-sm"><i class="fa fa-upload" data-toggle="tooltip" data-placement="top" title="Upload template"></i> Upload</button>
</div>
$("#upload_btn").on('click', function(){
var mydata = new FormData(document.getElementById("form_upload"));
$.ajax({
type : "POST",
data: mydata,
contentType: false,
dataType : 'json',
url : "<?php echo base_url();?>/C_MRCR_A/do_upload",
cache: false,
processData: false,
beforeSend:function(){
$("#loader").show();
},
success:function(response){
if(response.upload_success){
$('#response-alert').html('<div class="alert alert-success" role="alert"> '+response.upload_success+' </div>');
} else if(response.upload_success_partial){
$('#response-alert').html('<div class="alert alert-warning" role="alert"> '+response.upload_success_partial+' </div>');
} else if(response.upload_error){
$('#response-alert').html('<div class="alert alert-danger" role="alert"> '+response.upload_error+' </div>');
} else if(response.detail_error){
$('#response-alert').html('<div class="alert alert-danger" role="alert"> '+response.detail_error+' </div>');
} else {
$('#response-alert').html('<div class="alert alert-danger" role="alert"> '+response.db_error+' </div>');
}
$("#form_result").removeAttr("style", true);
$("#loader").hide();
}
...
//i place this outside my modal
<!-- loader -->
<div id='loader' style='display: none;'>
<img src='<?php echo base_url(); ?>assets/loading/ajax-loader.gif' width='32px' height='32px'>
</div>
<!-- loader -->
it supposed the loading appear after i click the upload_btn and dissmiss after the success:function. but it is not. what i did wrong?
