ボタンをクリックした後、ボタンを無効にしようとしています。私が試してみました:
_$("#ajaxStart").click(function() {
$("#ajaxStart").attr("disabled", true);
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
},
error: errorhandler,
dataType: 'json'
});
$("#ajaxStart").attr("disabled", false);
});
_
しかし、ボタンは無効になっていません。 $("#ajaxStart").attr("disabled", false);
を削除すると、ボタンが無効になります。
これは期待どおりに機能しませんが、コードシーケンスは正しいと思います。任意の助けをいただければ幸いです。
$("#ajaxStart").attr("disabled", false);
を成功関数内に配置します。
$("#ajaxStart").click(function() {
$("#ajaxStart").attr("disabled", true);
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
$("#ajaxStart").attr("disabled", false);
},
error: errorhandler,
dataType: 'json'
});
});
これにより、無効化がfalseに設定されますafterデータがロードされました...現在、同じクリック機能で、つまり同時にボタンを無効化および有効化しています。
コードでは、同じボタンクリックでボタンを無効化/有効化するだけです。
AJAX呼び出しの完了時に有効にする必要があります
このようなもの
success: function(response){
$("#ajaxStart").attr("disabled", false);
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
},
2つのjquery関数を定義することでこれを解決しました。
var showDisableLayer = function() {
$('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);
$("#loading").height($(document).height());
$("#loading").width($(document).width());
};
var hideDisableLayer = function() {
$("#loading").remove();
};
最初の関数は、すべての上にレイヤーを作成します。レイヤーが白で完全に不透明である理由は、そうでない場合、IEでクリックスルーできるためです。
私のajaxをやっているとき、私はこれが好きです:
$("#ajaxStart").click(function() {
showDisableLayer(); // Show the layer of glass.
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
hideDisableLayer(); // Hides the layer of glass.
},
error: errorhandler,
dataType: 'json'
});
});
私はajaxのグローバル機能を使用してこれを解決しました
$(document).ajaxStart(function () {
$("#btnSubmit").attr("disabled", true);
});
$(document).ajaxComplete(function () {
$("#btnSubmit").attr("disabled", false);
});
ここにドキュメントがあります link 。
$.ajax()
呼び出しは「ブロックしません」-つまりすぐに戻り、すぐにボタンを有効にするため、ボタンは無効になりません。
complete
を使用して、AJAXが成功した場合、エラーが発生した場合、または終了した場合にボタンを有効にできます。 http://api.jquery.com /jQuery.ajax/
complete(XMLHttpRequest、textStatus)
要求が完了したときに呼び出される関数(成功およびエラーコールバックが実行された後)。この関数には2つの引数が渡されます。XMLHttpRequestオブジェクトと、リクエストのステータスを分類する文字列( "success"、 "notmodified"、 "error"、 "timeout"、または "parsererror")。これはAjaxイベントです。