0

Haml テンプレートの :javascript クロージャー内に JavaScript を書き込もうとしています。ajax 呼び出しを介して取得するステータスに応じて、コントロールを含む div を表示/非表示にする必要があります。そのコードを正しく実行できません。理由はわかりません。Ajax ハンドラーの success および complete は呼び出されません。Firebug は、成功した ajax 要求を示し、コンソールにエラーはありません。Thin.ajax の「self」が壊れているのではないかと思います。

function Thin() {
  this.ajax = function() {
    $.ajax({ url: "#{check_if_running_user_case_path(@user_case)}", success: this.on_success, error: this.on_error, dataType: "json", complete: this.poll, timeout: 30000 });
  }

  this.poll = function() {
    alert("poll");
    setTimeout(this.ajax, 2000);
  };

  this.manage_divs = function(st) {
    if (st != this.running) {
      if (st == "running") {
        this.hide_div_arr_show_div([this.start_div, this.starting_div, this.stopping_div], this.stop_div);
      } else if (st == "starting"){
        this.hide_div_arr_show_div([this.start_div, this.stop_div, this.stopping_div], this.starting_div);
      } else if (st == "stopping"){
        this.hide_div_arr_show_div([this.start_div, this.stop_div, this.starting_div], this.stopping_div);
      } else {
        this.hide_div_arr_show_div([this.stopping_div, this.stop_div, this.starting_div], this.start_div);
      }
      this.running = st;
    }
  };

  this.setup  = function(start_div, starting_div, stop_div, stopping_div) {
    this.start_div    = start_div;
    this.starting_div = starting_div;
    this.stop_div     = stop_div;
    this.stopping_div = stopping_div;
    // set as stopped
    this.running = "12345";
    this.poll();
  };

  this.on_error   = function(jqXHR, textStatus, errorThrown){
    alert(["Thin polling error", textStatus]);
  };

  this.on_success = function(data, textStatus, jqXHR) {
    alert("success!");
    var st = data.user_case;
    this.manage_divs(st);
  };

  this.hide_div_arr_show_div  = function(div_arr, div){
    for(var i = 0; i < div_arr.length; i++)
        div_arr[i].hide();
    div.show();
  };
};

var thin = new Thin();
thin.setup($("#user_case_stopped"), $("#user_case_starting"), $("#user_case_running"), $("#user_case_stopping"));
thin.manage_divs("#{@running}");
4

2 に答える 2

1

jQuery の Ajax メソッド内thisでは、グローバル スコープが参照されます。親オブジェクトを明示的に参照して、正しいスコープ (オブジェクト) を使用していることを確認します。

function Thin() {
    var that = this;

    that.ajax = function() {
                  $.ajax({ url: "#{check_if_running_user_case_path(@user_case)}",
                        success: that.on_success, 
                        error: that.on_error, 
                        dataType: "json", 
                        complete: that.poll, 
                        timeout: 30000 });
                }

    ...

編集: 参考までに、これはJavascriptでのスコーピングに関する素晴らしい記事です。this

于 2012-06-11T17:41:19.810 に答える
0

Firefox でそのエラーが発生したので、success メソッドをインライン化しました。

成功の代わりに: this.success

使った

success:function(){},
于 2012-06-11T17:37:04.910 に答える