Rails with jquery $.ajax

Question

I'm new to rails (coming from PHP) and am having an issues with submitting a form with ajax. Basically, I have a list of tasks, and when a new one is added I want the new task to append to the list. The form itself is submitting, but I can't figure out how to append the new entry. Thanks in advance!

THE FORM

<%= 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 %>

THE 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 It's also worth mentioning that this is happening inside a view for a "Phase". Each phase has_many tasks and each task belongs_to a phase.

So the form is submitting means you are getting to the controller/action right? If so you can check which parameters are coming in by doing puts params What do you mean by how to append to a new entry? — Leo Correa
– Leo Correa, Commented Nov 12, 2012 at 22:14
I think I understood that you want to append a "new line" to the list of the objects showing the new object created, am I right? If yes, please post the part of the view considering the table or whatever you're rendering the list of objects in. — MrYoshiji
– MrYoshiji, Commented Nov 12, 2012 at 22:16

Dave Hahn · Accepted Answer · 2012-11-12 22:24:17Z

3

It looks like JSON is being returned from the controller. You need to wrap the returned JSON in html, same syntax as the other rows in the table you want to append to ( maybe <tr><td>..</td></tr> ) then append that html to the table. Or you could make a partial for each row in your table, and when you add a new task, return the html of the partial from the controller and then append that to the table.

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

Change js to:

$('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
});

And in your controller something like this

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

This all complete untested but I hope it gets you on the right track

answered Nov 12, 2012 at 22:24

Dave Hahn

1156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nathan Over a year ago

I think I'm understanding, thank you! One other question: My partial should be named _task_row.html.erb, correct? And within that partial I can simply call the variable @task?

Dave Hahn Over a year ago

Well in the above example the partial would be _task.html.erb and your variable will simply be task. Not the underscore on the partial name. Other then that you can call it whatever you like just change the render call appropriatly

Collectives™ on Stack Overflow

Rails with jquery $.ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related