Darin さん、ご提案ありがとうございます。あなたのソリューションは完璧に機能しますが、組み込みの Ajax ユーティリティを試してみたかったのです。
Jquery.Ajax() Docsを見て、「jquery.unobtrusive-ajax.js」を調べた後、回避策を見つけました。これは適切な使用というよりもハックです。誰が「jquery.unobtrusive-ajax. js" ファイルを一緒に送信しますが、メールの送信方法を知っている人は、このページへのリンクを送ってください :-)
これは、この関数「function asyncRequest(element, options)」の「jquery.unobtrusive-ajax.js」の興味深い部分です。
$.extend(options, {
type: element.getAttribute("data-ajax-method") || undefined,
url: element.getAttribute("data-ajax-url") || undefined,
beforeSend: function (xhr) {
var result;
asyncOnBeforeSend(xhr, method);
result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments);
if (result !== false) {
loading.show(duration);
}
return result;
},
complete: function () {
loading.hide(duration);
getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(this, arguments);
},
success: function (data, status, xhr) {
asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(this, arguments);
},
error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
});
このコードがbeforeSend、Complete、error の各ステップでapplyメソッドを呼び出すと、「this」と「arguments」の 2 つのパラメーターが渡されます...
作成は機能しますが、コンテキストでは「これ」はクリックされた要素ではなくXHR（XMLHttpRequest）です...また、関数ヘッダーを調べると、XHRオブジェクトが最初のperamとして渡されることがわかります。では、なぜそれを呼び出しコンテキストにする必要があるのでしょうか?
私の解決策...「jquery.unobtrusive-ajax.js」および「jquery.unobtrusive-ajax-min.js」ファイルを変更します...
apply メソッドで "this" (XHR) を渡すのではなく、実際の要素を送信しましょう!
したがって、関数全体は次のようになります。
function asyncRequest(element, options) {
var confirm, loading, method, duration;
confirm = element.getAttribute("data-ajax-confirm");
if (confirm && !window.confirm(confirm)) {
return;
}
loading = $(element.getAttribute("data-ajax-loading"));
duration = element.getAttribute("data-ajax-loading-duration") || 0;
$.extend(options, {
type: element.getAttribute("data-ajax-method") || undefined,
url: element.getAttribute("data-ajax-url") || undefined,
beforeSend: function (xhr) {
var result;
asyncOnBeforeSend(xhr, method);
result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);
if (result !== false) {
loading.show(duration);
}
return result;
},
complete: function () {
loading.hide(duration);
getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments);
},
success: function (data, status, xhr) {
asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments);
},
error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
});
options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });
method = options.type.toUpperCase();
if (!isMethodProxySafe(method)) {
options.type = "POST";
options.data.push({ name: "X-HTTP-Method-Override", value: method });
}
$.ajax(options);
}
これらのイベントを処理する関数を作成すると、「this」を使用して実際の要素を取得できます。
例：
function BeginUpdatePage(xhr) {
$("#MainMenu li").removeClass('selected');
$(this).parent().addClass('selected');
$("#pageBody").fadeTo('slow', 0.5);
}
function EndUpdatePage(xhr,status) {
$("#pageBody").fadeTo('slow', 1);
}
function FailUpdatePage(data,status,xhr) {
alert('There has been an error loading this page please try again.');
}
一部の人々にとっては、クリックイベントを処理するために独自の Jquery を作成するだけで、Darin のソリューションを使用する方が簡単です。おそらく、すべてをより適切に制御できます。
しかし、組み込みのものも機能するはずだと私は信じています。それをいじる必要はありません。ですから、誰かが私が間違っていることを証明し、実際にはこれを行うより良い方法があるか、またはこのスクリプトをまとめた人がそれを変更できることを願っています.
彼らがこのようにする正当な理由がない限り？説明歓迎:-)
この質問に対して良い提案をしてくれたすべての人に感謝します。これが将来人々に役立つことを願っています。