Правильное использование AJAX ответа, ajaxStart и ajaxComplete

Question

Примечание: Я использую JQuery 1.9

Я не уверен, что это правильный способ сделать запрос Ajax и сделать типичный загрузки/обработки GIF/анимация во время обработки происходит и отображает ответ.

Я собрал код, используя некоторые вопросы и ответы о stackoverflow.

HTML:

<!-- start content --> 
<div class='content'> 

    <!-- start setup section --> 
     <div class='photo-setup'> 

      <div class='setup-head'> 
       <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name' value='Untitled'></div> 
      </div> 

      <div class='photo-section'> 
       <img src="<?php echo 'tmp/' . $imgUpload->getFileName() . $imgUpload->getType() ?>" alt='photo'> 
      </div> 

      <div class='tag-section'> 
       Photo Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'> 
      </div> 

      <div class='ajax-loading'> 
       <img src='ajax-loader.gif'> 
      </div> 

      <div class='response'> 
      </div> 

      <div class='commit-section'> 
       <a class='save' href='#'>Save</a><a class='cancel' href='upload.php'>Cancel</a> 
      </div> 

     </div> 
    <!-- end setup section--> 

</div> 
<!-- end content --> 

CSS:

img { border: none; } 
input { padding: 0.30em; } 

.photo-setup { 
    width: 600px; 
    height: auto; 
    margin: 0 auto; 
    font-weight: 200; 
    font-size: 0.9em; 
    letter-spacing: 1px; 
} 

.setup-head { 
    border-left: 1px solid #cacece; 
    border-right: 1px solid #cacece; 
    border-top: 1px solid #cacece; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    padding: 1em; 
    overflow: hidden; 
} 

.photo-name { float: left; } 

.photo-section { 
    border: 1px solid #cacece; 
    text-align: center; 
} 

.tag-section { 
    padding: 1em 0 1em 1em; 
} 

.tag-section input { 
    width: 81%; 
    display: inline-block; 
} 

.ajax-loading { 
    text-align: center; 
    margin: 1em; 
    display: none; 
} 

.response { 
    display: none; 
    text-align: center; 
} 

.commit-section { 
    text-align: center; 
} 

.commit-section a { 
    margin-left: 1em; 
} 

JQuery:

$(document).ready(function() { 

    $('.save').on('click', function(e) { 
     e.preventDefault(); 
     save(); 
    }); 

    $(document).ajaxStart(function() { 
     $('.commit-section .save').hide(); 
     $('.ajax-loading').fadeIn(); 
    }); 

    $(document).ajaxComplete(function() { 
     setTimeout(function() { 
      $('.ajax-loading, .commit-section').hide(); 
      $('.response').fadeIn(); 
     }, 500); 
    }); 

}); 

// collect all photo data and send to php for database storage 
function save() { 

    // regex to parse hashtags 
    var regex = /[#]+[A-Za-z0-9-_]+/g; 
    var name = $.trim($('.photo-name input').val()); 
    var tags = $.trim($('.tag-section input').val()).match(regex); 
    var photo = $.trim($('.photo-section img').attr('src')); 

    $.ajax({ 

     url: 'save_photo.php', 
     method: 'POST', 
     dataType: 'html', 
     data: { 
      title: name, 
      hash_tags: tags, 
      filename: photo 
     } 

    }) 
    .done(function(response) { 
     $('.response').html(response); 
    }) 
    .fail(function() { 
     alert('Something went wrong!') 
    }); 
} 

Answer 1

Я сделал что-то очень похожее, так что я буду делиться тем, что я сделал с информацией от вашего вопроса. Я положил свой modal div прямо перед тегом </body>, так что никакой другой стиль не повлияет на него. Это тот же самый div, что и ваш ajax-loading div.

HTML-:

<div class='modal'> 
    <div class='wait'>Please wait... <img src='/includes/img/loading29.gif' alt="Please wait"/><br /> 
    <span id='waitprogress'></span> 
    </div> 
</div> 
</body> 

CSS-:

body.loading{ 
overflow: hidden; 
} 
body.loading>.modal{ 
display: block; 
} 
.modal{ 
display: none; 
position: fixed; 
left: 0%; 
top: 0%; 
width: 100%; 
height: 100%; 
background: #000000; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
opacity: .8; 
z-index: 10000; 
} 
.wait{ 
position: fixed; 
left: 40%; 
top: 30%; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
opacity: 1; 
} 

JQuery:

var showLoader = true; 
var $body = $('body'); 
$.ajaxSetup({global:true, cache: false}); 
$(document).ajaxStart(function(){ 
if(showLoader){ 
    $body.addClass("loading"); 
} 
}); 
$(document).ajaxStop(function(){ 
if(showLoader){ 
    $body.removeClass("loading"); 
} 
}); 

В основном, modal ДИВ не отображается на странице загрузки, однако, когда Начинается вызов AJAX, затем класс loading добавляется к body. Когда вызов AJAX останавливается, класс loading удаляется. Надеюсь, что поможет вам в вашей реализации.