阿賈克斯微調

我有一個顯示當一個Ajax請求時使用jQuery旋：阿賈克斯微調

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

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

}); 

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

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

});

的請求被KEYUP在這種情況下，實際上使，我努力工作了解如何在多個字段上使用此微調器，因此微調器將顯示在每個字段旁邊。

放置微調圖像不是問題，但將圖像連接到每個字段是我覺得很困難。如果這有道理？

--UPDATE--

的答案是非常有益的，但我不認爲它有什麼即時尋找。

我有以下代碼：

<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是值得歡迎的。

來源

2011-09-10 Darcbar

你是否在尋找類似的東西？

$("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 
    }); 
});

來源

2011-09-10 16:32:34

你可以用多種方法做到這一點。我不知道你的結構看起來如何，但認爲這純粹是未經測試並可能瘋狂斷碼片段：

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，可能有更好的方法來處理這個使用全局回調的方法，而不必爲每個元素管理微調器。

來源

2011-09-10 16:46:56 numbers1311407

阿賈克斯微調

回答

相關問題