Ajax/Jquery - 콜백 이전의 Ajax 처리, beforeSend, ajaxStart, .always

Question

현재 jquery의 ajax 호출에 문제가 있습니다. 내가 뭘 하려는지 몇 가지 div의 비어있는, 컨테이너를 숨기고 다시 한 번 div 채우기 위해 요청한 Ajax 코드를 호출하고 표시 할 수 있습니다.

// This is defined within an element and is retrieving properly as well 
cleanInfo(getCharacter($this.attr('id'))); 

function cleanInfo(callback){ 
    // hide the container first, then empty and callback to ajax function 
$('.sel_information_container').hide('slide', {direction: 'down'}, 'fast',function(){ 
    $('.sel_info_top').html(''); 
    $('.sel_info_description').html(''); 
    $('.skill_tree').html(''); 
    callback; 
     // OR 
}, callback); 
} 

function getCharacter(id){ 

if(!id){ 
    id = 0; 
} 

$.ajax({ 
// path is defined in core file this works right as it's retrieving the data properly... and everything is   
    // and everything is right in php... 
     url : _path + "/core/ajax.php", 
     type : 'POST', 
     data : { f: 'getCharacter', i: id }, 
     dataType : 'json', 
     success : function(data) { 
     // if data error is sent back process it ... 
     if(data.error){ 

      $('body').html(data.error); 

     }else{ 
      // if no error populate and show the container 
      $('.sel_info_top').html(data.info); 
      $('.sel_info_description').html(data.desc); 
      $('.skill_tree').html(data.skills); 
      $('.sel_information_container').show('slide', {direction: 'down'}, 'slow');   
     } 

    } 
}); 

} 

샘플 코드 : 그러나, 내 코드는

샘플 코드 정의 콜백 (작동하지 않음) ... 요청에 따라 호출하고, 공백으로 DIV 년대의 원인 아약스 요청을 처리하는 동안을 숨 깁니다 ajaxSend/beforeSend/ajaxStart/항상 (작동하지 않는) :

// This is defined within an element and is retrieving properly as well 
getCharacter($this.attr('id')); 
// without callback and utilizing variable request... 
function cleanInfo(){ 

$('.sel_information_container').hide('slide', {direction: 'down'}, 'fast',function(){ 
    $('.sel_info_top').html(''); 
    $('.sel_info_description').html(''); 
    $('.skill_tree').html(''); 
}); 
} 

function getCharacter(id){ 

if(!id){ 
    id = 0; 
} 

    // Instead of attaching the results to the var, I have also ran beforeSend: cleanInfo() which 
    // does the exact same thing as the above... 

var request = $.ajax({ 
// path is defined in core file this works right as it's retrieving the data properly... and everything is   
    // and everything is right in php... 
     url : _path + "/core/ajax.php", 
     type : 'POST', 
     data : { f: 'getCharacter', i: id }, 
     dataType : 'json', 
     success : function(data) { 

     if(data.error){ 

      $('body').html(data.error); 

     }else{ 

      $('.sel_info_top').html(data.info); 
      $('.sel_info_description').html(data.desc); 
      $('.skill_tree').html(data.skills); 
      $('.sel_information_container').show('slide', {direction: 'down'}, 'slow');   
     } 

    } 
}); 
    // ajaxSend, always, ajaxStart, all not working with this... 
    request.ajaxSend(cleanInfo()); 

} 

모든 솔루션 사람들을?

Answer 1

ajax 호출이 비동기이기 때문에 getCharacter 호출은 즉시 반환됩니다. 나는 ajax 호출에 beforeSend에 숨어 및 비우는 부분을 이동하고, 또한 ajax 호출에 오류 처리를 추가

:

// This is defined within an element and is retrieving properly as well 
cleanInfo($(this).attr('id')); 

function cleanInfo(id){ 
    if(!id){ 
     id = 0; 
    } 

    $.ajax({ 
     url : _path + "/core/ajax.php", 
     type : 'POST', 
     data : { f: 'getCharacter', i: id }, 
     dataType : 'json', 
     cache: 'false', 
     beforeSend: function() { 
        console.log("Emptying"); 
        // hide the container first, then empty and callback to ajax function 
        $('.sel_information_container').hide('slide', {direction: 'down'}, 'fast',function(){ 
         $('.sel_info_top').html(''); 
         $('.sel_info_description').html(''); 
         $('.skill_tree').html(''); 
        } 
     }, 
     success : function(data) { 
      // if data error is sent back process it ... 
      if(data.error){ 
       $('body').html(data.error); 
      }else{ 
       // if no error populate and show the container 
       console.log("Populating"); 
       $('.sel_info_top').html(data.info); 
       $('.sel_info_description').html(data.desc); 
       $('.skill_tree').html(data.skills); 
       $('.sel_information_container').show('slide', {direction: 'down'}, 'slow');   
      } 
     }, 
     error: function (xhr, textStatus, thrownError) { 
     $('body').html("Error: " + xhr.status + " - " + thrownError); 
     } 
    }); 
}