JQuery otomatik yükleme gif ve butonu devre dışı bırakmak için tıklayın

Question

ajax loading gif'in gösterilmesini/gizliliğini ve gönderme düğmesinin aynı anda devre dışı bırakılmasını/etkinleştirilmesini otomatikleştirmek mümkün mü? Birkaç yerde .ajaxStart nasıl kullanılacağı hakkında konuşmak gördüğüm

$("#save_button_id").click(function() { 
     if ($('#save_button_id').hasClass('ui-state-disabled')) return false; 
     Save(); 
}); 

function Save() { 
StartAjax($("#save_button_id")); 
$.ajax({ 
     success: function (data) { 
      EndAjax($("#save_button_id")); 
      // etc... 
     }, 
     error: function (xhr, status, error) { 
      EndAjax($("#save_button_id")); 
      // etc ... 
     } 
}); 
} 

function StartAjax(button) { 
    DisableButtonClick(button); 
    $("#ajaxLoad").show(); 
} 

function EndAjax(button) { 
    EnableButtonClick(button); 
    $("#ajaxLoad").hide(); 
} 

: Bunu gönderirken Şu

(zaman düğme tarz < a> bir giriş türüdür = submit)() yükleme gifini otomatik olarak göstermek için, ancak tıklatılan düğmeyi (stil sahibi bir < a> etiketi) bulmak ve otomatik olarak devre dışı bırakmak/etkinleştirmek mümkün mü?

Bunun anlamı, her seferinde Start/EndAjax'a manuel olarak yazmak ve uygulamanın her yerde tutarlı olduğundan emin olmaktır.

DÜZENLEME

cevaplar şu ana kadar teklif otomasyonu ait

Hiçbiri - el her $ .ajax (öncesi ve sonrası başlangıç ​​/ son yazmak zorunda (yukarıda benim şimdiki gibi) herhangi bir çözelti) bir bakım soruna neden : Başlangıç ​​/ bitiş değerini bazı $ .ajax() çağrılarının yanına yerleştirmeyi unutmak ve daha sonra nasıl çalışacağını değiştirmek isterseniz, değişikliği yapmak için her birinden geçmeniz gerekir. (Ama her düğmesi eleman ekleyin istiyorum -

DÜZENLEME 2 - .delegate() öneri

Sen "Sen herhangi eleman etkinlik işleyicisi ekleyebilirsiniz" yeniden noktayı açıklığa kavuşturmak KURU):! yüzden Önerinizin 1 parçası olmak değiştirdik:

$('div#buttons a.ui-icon').each(function(index) { 
    $(this).ajaxStart(function() { 
     $("#ajaxLoad").show(); 
    }); 
}); 

Bu, nasıl herhangi bir düğme için yükleme .gif göstermektir ilk yöntem sorunu çözdü tekrar tekrar yazmak zorunda kalmadan " $ ("# ajaxLoad"). show() "her yerde bir $ .ajax() çağrısı var.

Bir sonraki kısım, tıklandığında herhangi bir düğmeyi nasıl devre dışı bırakacağınızdır (tekrar eden kod içermeyen) - .delegate() öğesini önerdiniz. Ancak, örneğinizde, her düğmenin tıklatılması Save() yöntemini çağırır. Bu sorun $ (this) kaydetmek düğmesi (seçici TÜM düğmeleri döndürür), bu silme düğmesi veya olabileceğini her zaman olmadığıdır

$('div#buttons a.ui-icon').delegate('button:not(.ui-state-disabled)', 'click', function() { 
    $(this).toggleClass('ui-state-disabled'); 
    Save(); // this line needs replacing with a call to $(this).something 
}); 

(benim html maç için seçici değişti) İptal düğmesi vb. Yani $ (this) .toggleClass çağırmak iyidir, ancak Save() çağırmak yanlış işlevi çağırıyor demektir. Yukarıda .something $ (this) yazan yere

$("#SaveButton").click(function() { 
    Save(); 
}); 

$("#DeleteButton").click(function() { 
    Delete(); 
}); 

Yani bu çağrılması gerekir orijinal tıklama fonksiyonudur: Tüm bu düğmeler zaten .click yöntem var. Bu noktada, orijinal tıklamayı çağırıyor olmalıydı - ya da belki daha sonra orijinal .click'e kadar kabarcık yapması gerektiğini söylemek daha doğru. .delegate daha genel olmalı ve orijinal .click özel uygulamayı sağlayacaktır.

Answer 1

Aslında çok basit olduğu ortaya çıktı: ajax-y düğmelerinden herhangi tıklanan Şimdi ne zaman

$(document).ready(function() { 
    $('div#buttons a.fm-button').each(function (index) { 
     $(this).ajaxStart(function() { 
      $("#ajaxLoad").show(); 
      DisableButtonClick($(this)); 
     }); 
     $(this).ajaxStop(function() { 
      $("#ajaxLoad").hide(); 
      EnableButtonClick($(this)); 
     }); 
    }); 
}); 

: Her sayfa için çalıştırılan benim helper.js dosyasında bu yer verdik herhangi bir sayfa, düğmeler devre dışı bırakılır ve ajax yükleme gif'i gösterilir. Ajax çağrısı bittiğinde, normal durumlarına döndürülür. Ve her defasında sürekli olarak kod yazarak bitti. Her zaman .ajax() denir.

Answer 2

$("#save_button_id").click(function() { 
    if ($('#save_button_id').hasClass('ui-state-disabled')) { 
    return false; 
    } else { 
    // add disabled class 
    $('#save_button_id').addClass('ui-state-disabled'); 

    // optionally disable the button if it's an input button 
    $('#save_button_id').attr('disabled','disabled'); 

    // show ajax loader 
    $("#ajaxLoad").show(); 

    $.ajax({ 
     url: 'ajax/stuff.html', 
     success: function(data) { 
     // do stuff 

     // re-enable button 
     $('#save_button_id').removeClass('ui-state-disabled'); 

     // optionally re-enable the button if it's an input button 
     $('#save_button_id').attr('disabled',''); 

     // hide ajax loader 
     $("#ajaxLoad").hide(); 
     }, 
     error: function (xhr, status, error) { 
     // do stuff 

     // re-enable button 
     $('#save_button_id').removeClass('ui-state-disabled'); 

     // optionally re-enable the button if it's an input button 
     $('#save_button_id').attr('disabled',''); 

     // hide ajax loader 
     $("#ajaxLoad").hide(); 
     }); 
    } 

    // prevent default action, if any 
    return false; 
});

Düzenleme: bir işlevde, bunu yapmaya:

function processing(status) { 
    if (status == 1) { 
    // add disabled class 
    $('#save_button_id').addClass('ui-state-disabled'); 

    // optionally disable the button if it's an input button 
    $('#save_button_id').attr('disabled','disabled'); 

    // show ajax loader 
    $("#ajaxLoad").show(); 
    } else { 
    // re-enable button 
    $('#save_button_id').removeClass('ui-state-disabled'); 

    // optionally re-enable the button if it's an input button 
    $('#save_button_id').attr('disabled',''); 

    // hide ajax loader 
    $("#ajaxLoad").hide(); 
    } 
}

Ve sonra o işlevini çağırır:

$("#save_button_id").click(function() { 
    if ($('#save_button_id').hasClass('ui-state-disabled')) { 
    return false; 
    } else { 
    processing(1); 

    $.ajax({ 
     url: 'ajax/stuff.html', 
     success: function(data) { 
     // do stuff 

     processing(0); 
     }, 
     error: function (xhr, status, error) { 
     // do stuff 

     processing(0); 
     }); 
    } 

    // prevent default action, if any 
    return false; 
});

Answer 3

herhangi elemana olay işleyicinizi ekleyebilirsiniz; senin düğmesine kaydetmek için çok: Artık

$(this).ajaxStart(function() { 
    $("#ajaxLoad").show(); 
}); 

, sayfanızda her düğme için tıklama etkinliğinde dinlemek ve bu elementten ajax işlevini çağırabilirsiniz:

$('div').delegate('button:not(.ui-state-disabled)', 'click', function() { 
    $(this).toggleClass('ui-state-disabled'); 
    Save(); 
}); 

$.delegate() fonksiyon tıklayın dinler .ui-state-disabled sınıfına sahip olmayan her öğe için olaylar. Bir etkinlik tetiklendiğinde, o düğmenin sınıfını devre dışı durumuna geçirir, Kaydetme işlevinizi çağırır ve $ .ajaxStart() olayı tetiklenir. Bu olay animasyonlu ajax gif'inizi gösterecek.

Düğmelerinizin bu örnekte bir divda yer aldığını varsaydım. Birçok kişi kodu değiştirmek istersiniz, böylece aslında düğmelerinizin içeriklerini belirtir. Ayrıca jQuery 1.4.2 kullandığınızı kabul ediyorum.

Her şeyi geri almak için $.ajaxStop() işlevini kullanabilmeniz gerekir.