CODEWITHSUNDEEP
jqueryajaxjquery-callback
sumid
sumid

Reputation: 2073

Callback success function doesn't receive data

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.

Related questions:

Jquery ajax external callback function
JavaScript: var functionName = function() {} vs function functionName() {}
Where to define a jQuery $.ajax() success function if you don't want to define in the call to $.ajax()?
jQuery ajax success callback function definition

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

Upvotes: 0

Views: 400

Answers (1)

Anoop
Anoop

Reputation: 23208

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

Upvotes: 1

Related Questions