Question

I created two methods on a Javascript class:

this.saveData = function(){
    var url_send = 'm1=1&m2=2'
    $.ajax({
        url: '/save.php',
        dataType : "text",
        data:url_send,
        type:'POST',
        success: function(data) {
            // this is does not correct
            this.showAcceptBox('error_msg_0');
        }
    });
};

this.showAcceptBox = function(msg_id){
    $('#error_box').removeClass('alert-negative');
    $('#error_box').html($('#'+msg_id).html());
    $('#error_box').show();
    setTimeout(function(){
        $('#error_box').fadeOut('slow',function(){
            $('#error_box').addClass('alert-negative');
        });
    },this.message_box_timeout);
};

How do I correct the call method from my class into jQuery .ajax()?

Answer 1

Try to capture this in a closure:

this.saveData = function() {
    var url_send = { m1: 1, m2: 2 };
    var _self = this;
    $.ajax({
        url: '/save.php',
        dataType : 'text',
        data: url_send,
        type: 'POST',
        success: function(data) {
            _self.showAcceptBox('error_msg_0');
        }
    });
};

or pass it as parameter using the context switch:

this.saveData = function() {
    var url_send = { m1: 1, m2: 2 };
    $.ajax({
        url: '/save.php',
        dataType : 'text',
        data: url_send,
        context: this,
        type: 'POST',
        success: function(data) {
            this.showAcceptBox('error_msg_0');
        }
    });
};

Quote from the documentation:

context

This object will be made the context of all Ajax-related callbacks. By
default, the context is an object that represents the ajax settings
used in the call ($.ajaxSettings merged with the settings passed to
$.ajax). For example specifying a DOM element as the context will make
that the context for the complete callback of a request, like so:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});