성공은 succesfull $ .ajax 요청 이후에 호출되지 않습니다.

Question

일부 자바 스크립트를 작성하려고합니다. haml 템플릿의 javascript 클로저입니다. 아약스 호출을 통해 얻은 상태에 따라 컨트롤이있는 div를 표시하거나 숨겨야합니다. 그 코드가 바르게 작동하지 못합니다. 나는 이유를 모른다. Ajax 처리기의 성공과 완료는 호출되지 않습니다. 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}"); 

Answer 1

을 사용했다. 올바른 범위 (개체)를 사용하고 있는지 확인하기 위해 명시 적으로 부모 객체를 참조하려고 :

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 }); 
       } 

    ... 

편집 : 그냥 참조 용으로 this is a nice article을 자바 스크립트에 this 범위 지정에.

Answer 2

저는 파이어 폭스에서 오류가 발생했습니다. 그래서 나는 성공 방법을 인라인했습니다.

대신 성공

는 : this.success

나는 전역을 참조한다 jQuery의 아약스 방법 this 내부

success:function(){},