I am encountering an issue with two objects where one inherits from the other. The parent object is sending an ajax request to send some contact email.
However, when I use the child object to send the request, all data is empty for some reason. The ajax request is being sent to the correct URL, but the data object is empty.
var contact_A = function(){
var self = this;
this.url = '/xxx/xxx/xxx';
this.constructor = function(){
this.dialog = $('.contact_box');
this.sender = this.dialog.find('input[name=sender]');
this.name = this.dialog.find('input[name=name]');
this.content = this.dialog.find('textarea[name=content]');
...
}
this.init = function(){
...
this.dialog.find('.button_blue').bind('click', function(){
var data = self.process_form();
if(data != false) self.send(data);
});
...
}
this.process_form = function(){
this.validator = new validator('contact_box', true);
if(this.validator.validate(true)) {
var data = {
sender: this.sender.val(),
name: this.name.val(),
content: this.content.val()
}
return data;
} else return false;
}
this.send = function(data){
$.ajax({
type: "POST",
url: self.url,
data: data,
success: function(msg){
//if not successful
self.successful(msg);
},
async: true
});
this.close();
}
...
this.constructor();
this.init();
}
Here is the inheriting object:
var conteact_B = function(){
var self = this;
this.constructor();
this.init();
}
conteact_B.prototype = new contact_A;
conteact_B.prototype.url = '/yyy/yyy/yyy';