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。向下滾動查看一些示例。