아약스 회

Question

나는 아약스 요청을 사용하여 JQuery와 이루어질 때 표시 스피너가 : 요청이 실제로이 경우의 keyup에 만들어

$(document).bind("ajaxStart", function() { 

    $('#myloader').show(); 

}); 

$(document).bind("ajaxStop", function() { 

    $('#myloader').delay(1000).fadeOut('fast'); 

}); 

, 내가 일을하려고 해요을 여러 필드에서이 스피너를 사용하는 방법을 알려면 스피너가 각 필드 옆에 표시됩니다.

회 전자 이미지 배치는 ​​문제가 아니지만 각 필드에 이미지를 연결하는 것이 어렵다는 것을 알고 있습니다. 그 말이 맞는다면?

--UPDATE--

대답은 매우 helpfull하지만 나는 그것의 어떤 메신저 찾고있는 것 같아요.

<div class="form_element"> 
    <%= f.label :email, :class=>"field_hint", :title=>"Email" %> 
    <%= f.text_field :email %> 
    <div class="myloader" style="display:none;"> 
    <p> 
    validating... 
    </p> 
    </div> 
</div> 

<div class="form_element"> 
    <%= f.label :username, :class=>"field_hint", :title=>"Username" %> 
    <%= f.text_field :username %> 
    <div class="myloader" style="display:none;"> 
     <p> 
     validating... 
     </p> 
    </div> 
</div> 

이러한 필드는 모두 원격 호출을하는의 keyup 있습니다

나는 다음과 같은 코드가 있습니다. 아약스는 두 스피너 내가 해당 분야에 대한 각 회 전자 사업부 관련 만드는 방법을 해결하려고 노력하고, 표시 발생했을 때 순간

$('.form_element').ajaxStart(function() { 
    $(this).children('.myloader').show(); 
}); 

$('.form_element').ajaxStop(function() { 
    $(this).children('.myloader').delay(1000).fadeOut('fast'); 
}); 

: 나는 약간의 코드를 변경했습니다.

저는 Ajax에 익숙하지 않기 때문에 아마도 ajaxStart/Stop을 다르게하는 데 대한 조언은 환영 할만한 것 이상입니다.

Answer 1

이 같은 것을 찾고 계셨습니까? 여기에 편집

$("input").ajaxStart(function(){ 
     // Access the field 
     if($(this).attr('id') == idThatTriggeredRequest) { 
      $("#myloader").show(); 
      // Position spinner 
     } 
}); 

는 이벤트를 가정을 위해 일 수있는 것은이 경우 '의 keyup'와 같은, 당신은 이벤트를 전달 플러그인에이 추상도 수 (항상 keyUp 등 또 다른 솔루션입니다 옵션) :

$("input").bind('keyup', function(){ 

    // Show the spinner 
    $("#myloader").show(); 

    // Initiate the ajax request 
    $.ajax({ 
     // Handle complete, hide spinner 
    }); 
}); 

Answer 2

여러 가지 방법을 사용할 수 있습니다. 나는 당신의 구조가 어떻게 보이는지 알고 있지만이 순수하게 검증되지 않은 아마도 격렬하게 깨진 코드 고려하지 않는다 :

var spinner = '<img class="spinner" />'; 

$('#myelement').click(function() { 
    var $el = $(this), 
     $sp = $(spinner).hide().appendTo($el).fadeIn(); 

    $el.ajax({ 
    // ... options to load me! 
    complete: function() { 
     $sp.delay(1000).fadeOut('fast', function() { $sp.remove() }); 
    } 
    }); 
}); 

거친, 그러나 당신은 아이디어를 얻을. Ajax를 어떻게 처리하는지에 따라 각 요소에 대해 스피너를 관리하지 않고 전역 콜백을 사용하여이를 처리하는 훨씬 더 우아한 방법이있을 수 있습니다.