3

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

编辑“捐赠积分”字段之前：
您还有 10 个积分。捐赠积分：0。

编辑“捐赠积分”字段后：
您还有 5 个积分。捐赠积分：5。

我研究了各种选项，看起来 jquery-in-place-editor 可以满足我的需求。以供参考：

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

这是我认为相关的 jQuery javascript（来自示例应用程序中的/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 中有一个工具可以调用 url。我可以用它来调用 ruby​​ 脚本并得到结果吗？我将如何在 Rails 中执行此操作？这是调用 url 的代码（同样来自/public/javascripts/application.js）；但它调用了一个php脚本。

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

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

4

2 回答 2

2

这个问题的解决方案相当复杂，但我已经找到了一种方法。令我惊讶的是，该解决方案并非现成的，因为正如 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。

除了所有这些，当用户在表单上单击“提交”时，整个表单都会以当前值提交。我不知道这是否是做我想做的最有效的方法，但它有效！

于 2010-11-11T01:19:23.197 回答
1

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

于 2010-11-09T18:21:10.367 回答