Rails 3就地编辑

Question

我试图在Rails 3应用程序中进行就地编辑，该应用程序接受编辑后的值并根据该值修改计算。例如：

的编辑的前“信用捐”字段：
你有剩余的10个学分。积分捐款：0.

编辑“学分捐赠”字段后：
您还剩5个学分。现金捐赠：5

我已经看过成各种选项，它看起来像jQuery的就地编辑器做什么我要找的。供参考：

• jQuery-in-place-editor code
• Sample Rails app
• Github Repo of Sample Rails app

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

这里是（在示例应用程序从/public/javascripts/application.js）jQuery的JavaScript的，我认为是相关的：

// 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。问题是，我该怎么做？我在考虑两种可能性：

答：在jquery-in-place-editor中有一个工具可以调用url。我可以用它来调用ruby脚本并获得结果吗？我将如何在轨道中做到这一点？这里是调用url的代码（来自/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 %> 

我的东西，然后在轨道@开头的变量为.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> 

然后，在公共/ JavaScript的/ 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功能更新#remaining_cr基于在#page_fvalue和#page_gvalue中找到的值。请注意，它利用了我们填充到上面的javascript变量中的available_credits，cost和cost_20。最后两个函数告诉jQuery监视关键事件的#page_fvalue和#page_gvalue。当用户按下一个键时，它会调用checkFields（）来更新#remaining_cr。

所有这一切，当用户单击表单上的“提交”时，整个表单将被提交当前值。我不知道这是否是我尝试做的最有效的方式，但它的工作原理！

Answer 2

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