1

Ajax呼び出しを行うチェックボックスにjQuery変更イベントがあり、チェックボックスが属するテーブル行を強調表示します。Ajax呼び出しでエラーが報告されたときに問題が発生しました。この場合、チェックボックスのクリックを元に戻したいと思います（これを使用that.prop("checked", !that.prop("checked"))しています）。ただし、何が起こっているのかというと、変更イベントを呼び出すという無限ループに入ります。ご覧のとおり、この動作を停止するために、ajaxInProgressという変数を設定しようとしましたが、期待どおりに機能していないようです。誰かが別のアプローチを提供したり、バグを見つけたりできますか？チェックボックスをリセットする方法が必要かどうかわかりません-チェックボックスをリセットしても、変更イベントが開始されないようにすることは可能ですか？

var ajaxInProgress = false; //add this to stop recursive calls when errors occur 
jQuery(document).ready(function() {
  jQuery(".cc").change(function (e) {

    if (ajaxInProgress) return;

    var mode = "remove"
    if (jQuery(this).attr("checked")) {
       mode = "add"
    } 

    //grab the application ID from the checkbox ID
    var thisApp = this.id.substr(3);
    var that = jQuery(this);
    ajaxInProgress = true;
    jQuery.get("/particular/edit-ajax", { application_id: thisApp, 
                                          party_id: 1920, 
                                          party_rel_id: 21,
                                          mode: mode} , function(response) {
            if (response == 0) {
              that.closest('tr').removeClass('even').removeClass('odd').addClass('highlight');//highlight the tr
            } else {
              e.preventDefault();
              that.prop("checked", !that.prop("checked")); //reset the checkbox if there was an error
              alert("Please contact support - couldn't update database for application  "+thisApp+". Response was: "+response);
            }
    });       
    ajaxInProgress = false;
  });
});
4

3 に答える 3

2

それはすべて非常に複雑に思えますが、私はそうします：

(function($) {
    $(function() {
        function sendAjax(e) {
            var data = {
                application_id: this.id.substr(3), 
                party_id: 1920, 
                party_rel_id: 21,
                mode: this.checked?'add':'remove',
            },
                that=this;

            $.ajax({
                type: 'GET',
                data: data
            }).done(function() {
                $(that).closest('tr').removeClass('even odd').addClass('highlight');
            }).fail(function(response) {
                e.preventDefault();
                that.checked = !that.checked;
                alert("Please contact support - couldn't update database for application  "+that.id.substr(3)+". Response was: "+response);
            }).always(function() {
                $(".cc").one('change', sendAjax);
            });
       }
       $(".cc").one('change', sendAjax);
    });
})(jQuery);
​
于 2012-10-15T16:51:39.487 に答える
1

ajaxInProgress = false;それはあなたがあなたの後に持っているからかもしれませんjQuery.get。これfalseにより、ajaxリクエストから何かを取り戻す前に設定されます。その行をコールバックの内側に移動します。

jQuery.get("/particular/edit-ajax",
    {
        application_id: thisApp,
        party_id: 1920,
        party_rel_id: 21,
        mode: mode
    },
    function(response) {
        ajaxInProgress = false;

        if (response == 0) {
            that.closest('tr').removeClass('even').removeClass('odd').addClass('highlight');//highlight the tr
        } else {
          e.preventDefault();
          that.prop("checked", !that.prop("checked")); //reset the checkbox if there was an error
          alert("Please contact support - couldn't update database for application  "+thisApp+". Response was: "+response);
        }
    }
);

フィドル： http： //jsfiddle.net/gromer/BgNfR/

私のフィドルはwindow.setTimeoutajax呼び出しをシミュレートするために使用しています。私のソリューションは機能していないと思いましたが、最初に使用したため、何度も呼び出されているようwindow.setIntervalに見えました。つまり、本来のajaxリクエストをシミュレートしていなかったためです。

于 2012-10-15T16:39:09.943 に答える
0

「処理中」変数を使用してTrue：

var ajaxInProgress = false, handlingInProgress = false; //add this to stop recursive calls when errors occur
jQuery(document).ready(function() {
  jQuery(".cc").change(function (e) {
    if (handlingInProgress) return;
    if (ajaxInProgress) return;

    var mode = "remove"
    if (jQuery(this).attr("checked")) {
       mode = "add"
    } 

    //grab the application ID from the checkbox ID
    var thisApp = this.id.substr(3);
    var that = jQuery(this);
    ajaxInProgress = true;
    jQuery.get("/particular/edit-ajax", { application_id: thisApp, 
                                          party_id: 1920, 
                                          party_rel_id: 21,
                                          mode: mode} , function(response) {
            if (response == 0) {
              that.closest('tr').removeClass('even').removeClass('odd').addClass('highlight');//highlight the tr
            } else {
              e.preventDefault();
              that.prop("checked", !that.prop("checked")); //reset the checkbox if there was an error
              handlingInProgress = true; // Please see not below
              alert("Please contact support - couldn't update database for application  "+thisApp+". Response was: "+response);
            }
    });       
    ajaxInProgress = false;
    handlingInProgress = false; // 
  });
});

チェックボックスを変更すると、イベントが再度発生しますが、handlingInProgresstrueに設定されているため、すぐにハンドラーから抜け出します。

于 2012-10-15T16:36:03.123 に答える