Callback success function doesn't receive data

Question

Background: I am inserting into a page content from external php file thru ajax.
Constraint: I want to follow object structure described in How to “properly” create a custom object in JavaScript?.
Problem: But along with this structure I don't receive the response data in success callback. In firebug I can see the correct html which was returned by post.

Problematic code:

// Abstract class for functionality of both QuizView and QuizAdmin
Quiz = Object.makeSubclass();
Quiz.prototype._init= function() {};
Quiz.prototype.fetchSuccess= function(data) {
    // fetchSuccess must be defined before fetch.
    console.log("Quiz.prototype.fetchSucces"); // This gets printed out - so the function is called.
    console.log(this.targetElement); // echoes the correct element - when I hoover it, I see it in the page.
    console.log(data); // echoes undefined
    this.targetElement.append(data); // Obviously this line is what I want to do.
};
//This function gets content specified by url.
Quiz.prototype.fetch= function(what,where) {
    console.log("Quiz.prototype.fetch");
    this.targetElement=where;
    console.log(this.targetElement);
    // Get the the content
    $.ajax({
          type: "POST",
          url: what,
          success: this.fetchSuccess,
          targetElement: this.targetElement,
          dataType: "html",
          async: false
    });
}; // End Quiz.prototype.fetch

Note: Basically the only difference between the Related question bellow and my code is that I use function expression and not function declaration. Which is because I want to follow the structure as described in constraint.

Simple code organization (this works!)

function fetchSuccess(data){
  $(".content-bottom").append(data);
}

  $(document).ready(function(){
  // Get the view content
    $.ajax({
      type: "POST",
      url: "../../../../includes/quiz1/index.php",
      success: fetchSuccess,
      dataType: "html", 
      async: false
    });
  });

score 1 · Answer 1 · answered May 18 '13 at 00:12

1

try this

You are passing function reference and this inside fetchSuccess is not what you expecting

// Abstract class for functionality of both QuizView and QuizAdmin
Quiz = Object.makeSubclass();
Quiz.prototype._init= function() {};
Quiz.prototype.fetchSuccess= function(data) {
    // fetchSuccess must be defined before fetch.
    console.log("Quiz.prototype.fetchSucces"); // This gets printed out - so the function is called.
    console.log(this.targetElement); // echoes the correct element - when I hoover it, I see it in the page.
    console.log(data); // echoes undefined
    this.targetElement.append(data); // Obviously this line is what I want to do.
};
//This function gets content specified by url.
Quiz.prototype.fetch= function(what,where) {
    console.log("Quiz.prototype.fetch");
    this.targetElement=where;
    console.log(this.targetElement);
    // Get the the content
    var self = this;
    $.ajax({
          type: "POST",
          url: what,
          success: function(){self.fetchSuccess.apply(self, arguments)}, 
          targetElement: this.targetElement,
          dataType: "html",
          async: false
    });
};

answered May 18 '13 at 00:12

Anoop

23,044
10
62
76

2

Isn't `success: function(){self.fetchSuccess.apply(self, arguments)}` equal to `success: self.fetchSuccess` ? – JAM May 18 '13 at 00:21
@JAM no, not at all. success: self.fetchSuccess will set scope of fetchSuccess different from its original scope. – Anoop May 18 '13 at 00:23
@JAM, Dude what you want to prove. I am saying this inside will get changed not arguments. argument will be same. for example in above case this.targetElement will be undefined as this got changed – Anoop May 18 '13 at 00:35
@Sushil: Just tried your suggestion. Unfortunately the result is the same: data is undefined :-( – sumid May 18 '13 at 00:35
@Sushil: No `this.targetElement` goes in as data (ajax 4th line). – sumid May 18 '13 at 00:36
@JAM check your example http://jsfiddle.net/rPFFR/1/. variable this does not represent instance of MyObject. – Anoop May 18 '13 at 00:38
@sumid I am not talking about data I am talking about this variable inside function. BTW data will be same in all cases(depend what server send) – Anoop May 18 '13 at 00:40
@JAM: Unfortunately your example from jsfiddle won't get along with the inheritance pattern :-( [How to “properly” create a custom object in JavaScript?](http://stackoverflow.com/a/1598077/775066) – sumid May 18 '13 at 00:44

Callback success function doesn't receive data

Problematic code:

Related questions:

Simple code organization (this works!)

1 Answers1