1

私はレールを初めて使用し（PHPから来ました）、ajaxでフォームを送信する際に問題が発生しています。基本的に、タスクのリストがあり、新しいタスクが追加されたら、新しいタスクをリストに追加します。フォーム自体は送信していますが、新しいエントリを追加する方法がわかりません。前もって感謝します！

フォーム

<%= simple_form_for(Task.new) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :date_due %>
    <%= f.input :phase_id, :as => :hidden, :input_html => { :value => @phase.id } %>
    <%= f.input :status, :as => :hidden, :input_html => { :value => "0" } %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

ザ・JS

$('form#new_task').submit(function() {  
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "JSON" 
    }).success(function(data){
          // disaply new charge in the table 
          $('body').append(data);

          // clear the form
          $("input#task_name").val('');

          //focus on the input again
          $("input#task_name").focus();
    });
    return false; // prevents normal behaviour
});

EDIT これは、「フェーズ」のビュー内で発生していることにも言及する価値があります。各フェーズには多くのタスクがあり、各タスクはフェーズに属します。

4

1 に答える 1

3

コントローラーから JSON が返されているようです。返された JSON を html でラップする必要があります。追加したいテーブルの他の行と同じ構文 (おそらく<tr><td>..</td></tr>) で、その html をテーブルに追加します。または、テーブルの行ごとにパーシャルを作成し、新しいタスクを追加するときに、コントローラーからパーシャルの html を返し、それをテーブルに追加することもできます。

<table id="tasks">
    <% @phase.tasks.each do |task| %>
      <%= render :partial => 'task_row', :locals => {:task => task} %>
    <% end %>
  </table>

js を次のように変更します。

$('form#new_task').submit(function() {  
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "HTML" 
    }).success(function(data){
          // disaply new charge in the table 
          $('#tasks').append(data);

          // clear the form
          $("input#task_name").val('');

          //focus on the input again
          $("input#task_name").focus();
    });
    return false; // prevents normal behaviour
});

そして、コントローラーでこのようなもの

def create
  @task = Task.new(params[:task])
  respond_to do |format|
    if @task.save
     format.js{render :partial => 'tasks', :locals => {:task > @task} }
    else
     #handle validation error
    end
  end
end

これはすべて完全にテストされていませんが、正しい方向に進むことを願っています

于 2012-11-12T22:24:17.497 に答える