0

したがって、ユーザーがテーブルに値を追加できるようにする次のフォーム パーシャルがあります。私は ajax と JavaScript を使用するのに非常に慣れていないため、これについてどうすればよいか完全にはわかりません。ただし、値を入力して送信したら、入力された値を表示できるようにしたいと考えています。現在、それを行うにはページをリロードする必要があります。jquery モバイルで使用するための html パーシャルとモバイル パーシャルの両方があります。

#_form.html.erb

<% if @workoutexercises[n].exercise_weight.nil? %>
  <%= form_for @workoutexercises[n], :remote => true do |f| %>
    <div class="input-append"><%= f.text_field :exercise_weight, :class => 'submittable input-small' %>
    <%= button_tag(type: 'submit', class: "btn btn-primary", disable_with: 'Processing...') do %>
      <i class="icon-ok icon-white"></i>
    <% end %></div>
  <% end %>
<% else %>
  <%= @workoutexercises[n].exercise_weight %>
<% end %>

#_form.mobile.erb

<% if @workoutexercises[n].exercise_weight.nil? %>
  <%= form_for @workoutexercises[n], :remote => true do |f| %>
    <%= f.label :exercise_weight %>
    <div class="ui-grid-a">
      <div class="ui-block-a"><%= f.text_field :exercise_weight, :class => 'submittable' %></div>
      <div class="ui-block-b"><%= f.submit "Update", "data-role" => "button", "data-theme" => "b" %></div>
    </div>
  <% end %>
<% else %>
  </n>
  Weight: <%= @workoutexercises[n].exercise_weight %>
<% end %>

私は現在、提出可能なjavascriptに以下を使用しています。

#application.js

$('.submittable').live('change', function() {
  $(this).parents('form:first').submit();
});

正しい方向へのヒントやリードを事前に感謝します! 乾杯

4

1 に答える 1

0

次のように、workoutexercises コントローラーの適切なアクションで、respond_to ブロックに新しい行を追加して、JavaScript 応答を許可します。

respond_to do |format|
   format.html { redirect_to workoutexercises_url }
   format.js // add this line here
end

次に、たとえば「update.js.erb」という名前の新しい js ビュー テンプレートを作成します (フォームが update アクションに送信される場合)。また、_show.html.erb という新しいパーシャルを同じディレクトリに作成します。

update.js.erb ファイルには、次のようなものが必要です。

// Render the newly created workout into your table
$('#someTableCell').html("<%= j render ("show") %>");

これにより、新しく更新された演習を含む部分 (_show.html.erb) が ajax を介してページのテーブルにレンダリングされます。

邪魔にならない JavaScript を使用している場合 (つまり、フォーム ヘッダーで remote => true を使用している場合)、質問の最後にある JavaScript は必要ありません。

于 2013-05-18T01:38:35.270 に答える