Question

我正在尝试在Rails 3应用程序中实现就地编辑，该应用程序获取已编辑的值并根据该值修改计算。例如：

在编辑“捐赠捐赠”字段之前：
  你剩下10个学分。捐赠积分：0。

编辑“捐赠捐赠”字段后：
  你剩下5个学分。捐赠积分：5。

我已经研究了各种选项，看起来jquery-in-place-editor正在寻找我正在寻找的东西。供参考：

演示有效。但我认为我需要做的是使用回调函数来调用ruby脚本，所以我可以做更多的处理。我不完全确定这是否是我需要做的，所以我正在寻找一些指导。

以下是我认为相关的jQuery javascript（来自Sample app中的/public/javascripts/application.js）：

// Using a callback function to update 2 divs
$("#editme4").editInPlace({
    callback: function(original_element, html, original){
        $("#updateDiv1").html("The original html was: " + original);
        $("#updateDiv2").html("The updated text is: " + html);
        return(html);
    }
});

看起来我需要做的是取original和html并稍微玩一下，然后将它们反馈给相应的div。问题是，我该怎么做？我在考虑两种可能性：

A. 在jquery-in-place-editor中有一个工具来调用网址。我可以使用它来调用ruby脚本并获得结果吗？我怎么在铁轨上这样做？以下是调用网址的代码（同样来自/public/javascripts/application.js）;但它调用了一个PHP脚本。

$("#editme1").editInPlace({
    // callback: function(unused, enteredText) { return enteredText; },
    url: 'server.php',
    show_buttons: true
});

B。直接在javascript中修改更新的文本，并将其传递给相应的div。我更喜欢使用ruby脚本，但也许这会更容易。

Answer 1

这个问题的解决方案非常复杂，但我找到了一种方法。令我惊讶的是，解决方案并不容易获得，因为正如r-dub所说的那样，它似乎很常见。我最终没有使用jQuery插件的任何编辑设备，而是在表单文本字段的基础上直接在jQuery的帮助下修改了一个文本字段。换句话说，我跟着上面的（B）。

我的观点如下：

Available: <span id="available_cr"><%= @available_credits %></span>
Remaining: <span id="remaining_cr"><%= @remaining_credits %></span>

<%= form_for(@page, :html => { :id => 'do_fvalue' }, :remote => true) do |f| %>
  <div class="field">
    How many to buy at <%= @cost %> credits per unit? <%= f.text_field :fvalue, :autocomplete => :off %>
  </div>
  <div class="field">
    How many to buy at <%= @cost_20 %> credits per unit? <%= f.text_field :gvalue, :autocomplete => :off %>
  </div>
  <div class="actions">
    <%= f.submit "Update" %>
  </div>
<% end %>

然后我将rails @ -variables填充到.html.erb部分（在我的页面.html.erb的开头呈现），以便javascript / jQuery可以访问它们：

<script type="text/javascript">
  var cost = parseInt(<%= @cost %>)
  var cost_20 = parseInt(<%= @cost_20 %>)
  var available_credits = parseInt(<%= @available_credits %>)
  var remaining_credits = parseInt(<%= @remaining_credits %>)
</script>

然后，在public / javascripts / applications.js中，我有以下代码：

function checkFields(){
  var to_buy_f = $("#page_fvalue").val();
  var to_buy_g = $("#page_gvalue").val();
  var subtract_f = to_buy_f * cost;
  var subtract_g = to_buy_g * cost_20;
  var remain = available_credits - subtract_f - subtract_g;
  $("#remaining_cr").text(remain);
};

$("#page_fvalue").keyup(function () {
   checkFields();
}).keyup();

$("#page_gvalue").keyup(function () {
   checkFields();
}).keyup();

checkFields函数根据#page_fvalue和#page_gvalue中的值更新#remaining_cr。请注意，它使用了available_credits，cost和cost_20，我们将其填充到上面的javascript变量中。最后两个函数告诉jQuery监视#page_fvalue和#page_gvalue的keyup事件。当用户按下某个键时，它会调用checkFields（）来更新#remaining_cr。

除此之外，当用户点击表单上的“提交”时，整个表单将以当前值提交。我不知道这是否是我尝试做的最有效的方式，但它有效！

Answer 2

你要做的事情很常见。您要做的是在该回调中发出一个AJAX请求，将原始数据发送到您的rails应用程序并将修改后的html返回到您的页面。这是jQuery AJAX manual page。向下滚动以查看一些示例。

Rails 3就地编辑

2 个答案: