Question

我正在尝试从ajax调用的成功节点调用一个widget函数，但是，我没有成功。

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

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

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

端

浏览器的控制台引发“Uncaught TypeError：Object [object Window]没有方法'_cleanFormFields'

有什么想法吗？谢谢！

Answer 1

这里的问题是 this 的范围 - ajax调用覆盖 this 以引用ajax调用对象，并且你松开了widget引用。

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

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

如何从ajax成功调用JQuery小部件函数？

1 个答案: