Question

我之前没有使用过Javascript / JQuery / AJAX的经验，而且我的实习项目给了我一项任务，我的实习依赖于这三项！我们的客户有一个用户创建配置文件的站点，但显然很多用户在保存表单之前离开页面或刷新，一切都被删除。

我应该这样做，所以每当用户从他们正在使用的文本区域更改焦点时，他们到目前为止输入的文本会在刷新页面时保存并重新加载，或者他们正在做的任何事情都会丢失所有内容。从我被告知我需要制作一个JQuery函数来做一个AJAX帖子然后得到，但我不知道如何在HAML和Rails项目中实现Javascript / JQuery / AJAX，更不用说如何使用任何JS我应该这样做。

我意识到并没有完全解决问题所需的所有信息都在这里给出，如果有人问，我会很乐意提供，但我认为当textarea失去焦点并从小开始时，最好只实现一个警报功能。

提前致谢！

*修订版＃1

好的，我填写了Tejs给我的东西并且有：

:javascript
  function post_text() {
    $(document).ready(function() {
      $.ajax({ 
        var currentTextBoxValue = $(textarea).val();
        var currentStatus = $(input).val();

        type: 'POST',
        url: '/profiles/:profile_id/profile_acts',
        data: ''
        success: function() {
          alert("Hello");
        }
      });
    });
  }

我目前在页面底部有这个，并{:onblur => "post_text()"}附加到text_area_tag我希望从中获取数据。我从rake routes获得了URL，我知道数据应该以JSON格式发送。我知道我需要发送一些JSON，但我需要包含profile_act_id's并且不想为我们拥有的每个行为编写脚本，我不确定如何在其中包含Ruby类变量代码。

至于需要使用JSON发送什么，我知道它需要是这样的：

profile_acts:{"profile_act_40":{
  "act_id":"40", 
  "additional_info":currentTextBoxValue, 
  "status":currentStatus
  }
}

理想情况下会是这样的：

profile_acts:{"profile_act_" + #{act.id}: {
  "act_id":#{act.id},
  "additional_info":currentTextBoxValue,
  "status":currentStatus
  }
}

我很确定我无法将profile_act_40切入"profile_act_" + #{act.id}，但必须有一种更简单的方法来执行此操作。

一旦弄明白这一点，我仍然不确定我需要将哪些内容合并到profile_acts_controller.rb中。

再一次，谢谢你。

*修订版＃2

经过多一点工作并从我的同事那里得到帮助后，我有了这个：

:javascript
  $(document).ready(function() {
    jQuery.ajaxSetup({  
      'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}  
    });

    ajaxPost = function (_url, _dataString) {
      $.ajax({
        type: 'POST',
        url: _url,
        data: _dataString,
        success: function() {
          alert("Success!");
        }
        failure: function () {
          alert("Failure!")
        }
      });
    };

    getId = function(object) {
      var _id = $(this).closest(".act").attr("act_id");
      alert("ID got!");
      return _id;
    }

    getInfo = function(object) {
      var _info = $(this).value();
      alert("Info got!");
      return _info;
    }

    getInfoString = function(_id, _info) {
      var _infoString = '"profile_acts":{"profile_act":{"act_id":_id, "additional_info":_info}}';
      alert("Info string got!");
      return _infoString;
    }

    getStatusString = function(_id, _status) {
      var _statusString = '"profile_acts":{"profile_act":{"act_id":_id, "status":_status}}';
      alert("Status string got!")
      return _statusString;
    }

    getUrl = function(_id) {
      var _url = "/profiles/" + _id + "/profile_acts";
      alert("URL got!");
      return _url;
    }

    showAlert = function(msg) {
      alert(msg);
    }

    $('.info_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getInfoString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello text";
      showAlert(message);
    });

    $('.status_yes_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getStatusString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello yes";
      showAlert(message);
    });

    $('.status_maybe_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getStatusString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello maybe";
      showAlert(message);
    });

    $('.status_no_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getStatusString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello no";
      showAlert(message);
    });
  });

我试图尽可能地调试alerts，但绝对没有注册，我完全失去了低赌注。我不知道从哪里开始，甚至是侧面步骤并尝试一些新的东西。我不禁感到我错过了一些非常基本的东西。再次感谢。

Answer 1

Welllllll，感谢Tejs，但这就是我需要的。

$(".description_form input, #certificates_holder ul li input").change(function(){

  form = $("#actions form");

$.ajax({data:jQuery.param(form.serializeArray()), dataType:'script', type:'post', url: "/profiles/" + $("#profile").attr("data-profile_id") + "/profile_acts"});

});


$(".additional_info_form textarea").change(function(){

    form = $("#actions form");

$.ajax({data:jQuery.param(form.serializeArray()), dataType:'script', type:'post', url: "/profiles/" + $("#profile").attr("data-profile_id") + "/profile_acts"});

});

Answer 2

您需要附加到文本框的blur / change事件。

 $(document).ready(function()
 {
     $('#myTextBoxId').change(function()
     {
          var currentTextBoxValue = $(this).val();

          $.ajax({
              type: 'POST',
              url: '/Route/To/Your/Ruby/Handler',
              data: { value: currentTextBoxValue },
              success: function()
              {
                   // Insert Code Here when the ajax call comes back successfully.
              }
          });
     });
 });

我假设您在视图中引用了jQuery。您只需添加事件处理程序（对change()的调用，然后获取值（对$(this).val()的调用），然后将ajax POST发送到您的路径。

当焦点丢失时在textarea中保存和显示文本Rails 2.3.12

*修订版＃1

*修订版＃2

2 个答案: