Javascript вызов функции недоступен

Question

У меня проблема со сценарием javascript. У меня есть объект с внутри некоторой функции и переменной. В одной из этих функций я делаю запрос ajax и внутри обработчика ошибок я вызываю функцию, определенную в одном и том же объекте, но отладчик говорит, что функция «недоступна», но переменные, определенные в объекте, видны ...

Это часть JavaScript, с объектом:

Utils = { 
"defaultErrorMessage" : "Ci scusiamo per il disagio ma qualcosa è andato storto, probabilmente è una cosa temporanea, ritenta in un altro momento", 
"base_url" : $('#base_url').val(), 
getApiUri : function(name) { 
    return window.location.protocol + "//" + window.location.host + PATH[ENV] + name + ENV == 'stub' ? '.json' : ''; 
}, 

callServer : function(uri, data, successCallback) { 
    $.ajax({ 
     type: "POST", 
     url: this.base_url + "index.php/" + uri, 
     data: data, 
     dataType: "json", 
     cache: false, 
     beforeSend: function(XMLHttpRequest) 
     { 
      waitingDialog.show('Caricamento...'); 
     }, 
     success: 
      function (data) { 

       //alert(data); //as a debugging message. 
       successCallback(data); 
      }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      //alert("Qualcosa di storto: "+ xhr.status + " messaggio: " + xhr.responseText); 
      this.showModalDialog('error','Siamo spiacenti :(', this.defaultErrorMessage); 
     }, 
     complete: function() { 
      waitingDialog.hide(); 
     } 
    }); 
}, 

hideAllMessages: function() 
{ 
    var messagesHeights = new Array(); // this array will store height for each 

    for (i=0; i<myMessages.length; i++) 
    { 
     messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); 
     $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport 
    } 
}, 

showMessage: function(type, title, message) { 
    var title = (typeof title !== 'undefined') ? title : ''; 
    var message = (typeof message !== 'undefined') ? message : ''; 

    this.hideAllMessages(); 
    if (title != '') 
     $('.'+type + ' h3').html(title); 
    if (message != '') 
     $('.'+type + ' p').html(message); 
    $('.'+type).animate({top:"0"}, 500); 
}, 

showModalDialog: function(type, title, message, withOK) { 
    var withOK = (typeof withOK !== 'undefined') ? withOK : false; 
    $div = $('<div id="error" title="'+title+'">'); 
    $div.append('<p>'+message+'</p>'); 
    if (!withOK) { 
     $div.dialog({ 
      modal: true, 
      maxHeight: 500 
     }).prev(".ui-dialog-titlebar").css("background", colorDialog[type]); 
    } 
    else { 
     $div.dialog({ 
      modal: true, 
      maxHeight: 500, 
      buttons: { 
       Ok: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }).prev(".ui-dialog-titlebar").css("background", colorDialog[type]); 
    } 
}, 

validateEmail: function(email) { 
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test(email); 
} 

};

Почему this.showModalDialog не доступен в обработчике ошибок? Я попытался также без «этого», но это же ...

Answer 1

this не всегда работает в функции обратного вызова, так как контекст меняется так this имеет в виду то, что больше не ваш Utils объект. Способ исправить это - сохранить переменную, чтобы помнить, что ваш контекст, когда вам это нужно. В вашей функции callServer перед вызовом ajax добавьте var self = this. И тогда, когда вам нужно ссылаться ShowModalDialog, вы можете вызвать его с self.showModalDialog();

callServer : function(uri, data, successCallback) { 
    var self = this; 
    $.ajax({ 
     ... 
      self.showModalDialog(); 

Answer 2

Проблема заключается в том, что this представляет ваш объект в callServer, но он не имеет то же значение внутри функции вы переходя к ваш вызов Ajax, вместо этого представляет объект, который вы передаете в $.ajax() в качестве аргумента.

Вам необходимо передать его как другую переменную, такую ​​как self.

Внутри callServer

var self = this; 

Внутри ошибки обработчику

self.showModalDialog();