0

Rails Unobtrusive JavaScript http://twitter.github.com/bootstrap/javascript.html#buttonsで Twitter Bootstrap のボタン読み込み状態を使用しています。

form 要素はdata-remote="true"オプションを使用し、.js ファイルを返します。送信ボタンは.button("loading")、次の JS を使用して を呼び出します。

$(document).on("click", ".btn-loading", function() {
  var btn;
  btn = $(this);
  btn.button("loading");
});

Ajax の成功とエラーの状態を検出し、ボタンの状態をリセットする方法はありますか?

以下のようなことをしようとしましたが、この関数がトリガーされた後、.btn-loadingアクティブな要素にアクセスする方法がわかりません

$(document).on("ajax:success", function(evt, data, status, xhr) {
  var btn;
  btn = $(this);  //how to access .btn-loading() that's active?
  btn.button("reset");
  btn.button("toggle");
});

ajax リクエスト後にボタンをリセットする方法について何か提案はありますか?

また、HTML5 エラーを検出してボタンの状態をリセットするにはどうすればよいですか?

更新: 2012 年 8 月 14 日

イベントをリッスンして、次の方法でボタンをトリガーできることがわかりました。

$(document).on("ajax:success", "form[data-remote]", function(evt, data, status, xhr) {
  var el;
  el = $(this).find('.btn-loading');
  el.button("reset");
  el.button("toggle");
});

このウィキを参照してください: https://github.com/rails/jquery-ujs/wiki/ajax

ただし、エラーキャッチ部分が機能していません。これで成功した人はいますか?

$("form").live("ajax:aborted:required", function(evt, elements) {
  var el;
  el = $(this).find('.btn-loading');
  el.button("reset");
  el.button("toggle");
});
4

3 に答える 3

2

jquerybindのドキュメント (一般的にイベント処理に使用されます) を見るとthis、ハンドラー関数では、イベントを発生させた要素ではなく、ハンドラーがバインドされたDOM 要素を参照していることに注意してください。したがって、最も簡単な方法は、すべての読み込みボタンに共通のクラスを与え (この例では「ajax-button」と呼びましょう)、成功ハンドラーをそれにバインドすると、thisハンドラー関数内で適切に使用できるようになります。

jquery を使用している場合 (必要resetButtonなリセットを実行する関数があると仮定して)、次のようなものを使用してリセットを実行します。

$(".ajax-button").bind("ajax:success", function() { 
     $(this).button("reset").button("toggle");})

Unobtrusive Javascript に関するこのチュートリアルには、Rails に固有の優れた追加情報が含まれています。

于 2012-08-14T17:12:12.573 に答える
0

これはうまくいくはずです。click()基本的に、イベントを にバインドするbuttonと、すぐに読み込み状態が表示されます。次に、 URL、HTTP メソッド(POSTまたはGET)、およびDataType (この場合は を使用) を使用して、AJAX 要求をまとめますJSON。jQuery は、AJAX 設定で機能を提供successします。errorボタンまたは適切なセクションで適用可能なものに対して、アプリ固有のロジックを実行します。

参考：http ://api.jquery.com/jQuery.ajax/

$("#yourbutton",).on("click", function() {
   var btn;
   btn = $(this);
   btn.button("loading");
$.ajax({
    url: yoururl,
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    error: function(jqXHR, textStatus, errorThrown){
     *perform error here*
    btn.button("failure");
    }
    success: function (data, textStatus, jqXHR) {
    *perform success here - for you it seems to be*
    btn.button("reset");
    btn.button("toggle");
    }
});    
});

押されたボタンのジェネリックに分解したい場合は、これを試してください。

$(document).on("click", ".btn-loading", function() {
doSomething($(this));
});
function doSomething(btn){
$.ajax({
    url: yoururl,
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    error: function(jqXHR, textStatus, errorThrown){
     *perform error here* 
    btn.button("failure");
    }
    success: function (data, textStatus, jqXHR) {
    *perform success here - for you it seems to be*
    btn.button("reset");
    btn.button("toggle");
    }
});
}
于 2012-08-13T15:32:13.310 に答える
0

以下はJavaScriptなしで動作します

<form ... data-remote="true">
   ...
   <input class="btn" data-disable-with="Disabling text" name="commit" type="submit" value="Initial text">
</form>
于 2012-08-17T19:07:44.843 に答える