How to call a JQuery widget function from ajax success? - ruby-on-rails-3

Question

I'm trying to call a widget function from success node of an ajax call, however, I'm having no success with it.
My app allows users to add some markers on googlemaps with some description. It is using JQuery-addresspicker widget and Rails. I added a function responsible for adding a marker, it displays a form with a description textarea and a button to submit the information. So, after user submits, the app calls an Ajax function to store user's data and if successfully, I want to call another widget function, just for close InfoWindow, for example.
The problem is, I don't know how to call another widget function from success Ajax node.
JQuery-addresspicker.js
.
.
.
_addFormListener: function(map, marker) {
var form = $(".add-form").clone().show();
var infoWindowContent = form[0];
var infoWindow = new google.maps.InfoWindow({
content: infoWindowContent
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, this);
});
form.submit(function (event){
event.preventDefault();
var description = $("textarea[name=description]", this).val();
var latitude = marker.getPosition().lat();
var longitude = marker.getPosition().lng();
var data = {
description : description,
latitude : latitude,
longitude : longitude
};
$.ajax({
type : "POST",
url : "/places",
data: {place: data},
beforeSend: function(x) {
x.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
},
success: function(x) {
this._closeFormFields(); // Not working!
}
});
});
},
_cleanFormFields: function() {
console.log("testing");
}
.
.
PlacesController
def create
#place = Place.new(params[:place])
if #place.save
redirect_to places_path
else
render :status => 422
end
end
The browser's console raises "Uncaught TypeError: Object [object Window] has no method '_cleanFormFields'
Any ideas? Thanks!

Answer 1

The problem here is the scope of this - the ajax call overwrites this to reference the ajax call object and you loose the widget reference.
To fix this, just add a variable to store the reference to the widget like
form.submit(function (event){
event.preventDefault();
var description = $("textarea[name=description]", this).val();
var latitude = marker.getPosition().lat();
var longitude = marker.getPosition().lng();
var data = {
description : description,
latitude : latitude,
longitude : longitude
};
//new widget reference var (this here still refers to the widget)
var widget = this;
$.ajax({
type : "POST",
url : "/places",
data: {place: data},
beforeSend: function(x) {
x.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
},
success: function(x) {
//now use the var widget here
widget._closeFormFields(); // Works!
}
});
});