0

我正在尝试从 ajax 调用的成功节点调用小部件函数，但是，我没有成功。

我的应用程序允许用户在 googlemaps 上添加一些带有一些描述的标记。它使用 JQuery-addresspicker 小部件和 Rails。我添加了一个负责添加标记的函数，它显示一个带有描述文本区域的表单和一个提交信息的按钮。因此，在用户提交后，应用程序调用一个 Ajax 函数来存储用户的数据，如果成功，我想调用另一个小部件函数，例如，仅用于关闭 InfoWindow。

问题是，我不知道如何从成功的 Ajax 节点调用另一个小部件函数。

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

结尾

浏览器的控制台引发“未捕获的类型错误：对象 [对象窗口] 没有方法 '_cleanFormFields'

有任何想法吗？谢谢！

4

1 回答 1

0

这里的问题是this的范围- ajax 调用覆盖this以引用 ajax 调用对象并且您丢失了小部件引用。

要解决此问题，只需添加一个变量来存储对小部件的引用，例如

 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!
    }
   });
});
于 2013-08-09T16:22:29.777 回答