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);
    }
});

私がする必要があるのは、それらを取り、少しいじってから、適切な div にフィードバックすることですoriginal。html問題は、これをどのように行うかです。私は2つの可能性を考えています：

A. 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 スクリプトを使用したいのですが、こちらの方が簡単かもしれません。

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 を更新します。上記の javascript 変数に詰め込んだ available_credits、cost、および cost_20 を使用していることに注意してください。最後の 2 つの関数は、キーアップ イベントの #page_fvalue と #page_gvalue を監視するよう jQuery に指示します。ユーザーがキーを押すと、checkFields() が呼び出されて #remaining_cr が更新されます。

これはさておき、ユーザーがフォームで「送信」をクリックすると、フォーム全体が現在の値で送信されます。これが私がやろうとしていたことを行うための最も効率的な方法かどうかはわかりませんが、うまくいきます!

于 2010-11-11T01:19:23.197 に答える
1

あなたがやろうとしていることは非常に一般的です。やりたいことは、そのコールバック内で AJAX リクエストを作成し、元のデータを Rails アプリに送信し、変更された html をページに返すことです。jQuery AJAX のマニュアル ページは次のとおりです。下にスクロールして、いくつかの例を確認してください。

于 2010-11-09T18:21:10.367 に答える