CODEWITHSUNDEEP
ruby-on-railsajaxsimple-form
Nathan
Nathan

Reputation: 7855

Is there a way to submit ajax/json requests with simple_form for Rails

With the standard Rails form_for, I was able to pass ajax requests though select and collection_select helpers as such:

<%= address.collection_select :country, @countries, :id, :name, {:include_blank => false}, "data-remote" => true, "data-url" => "/ajax/states", "data-type" => :json  %>

I can't seem to figure out how to do this with simple_form

Upvotes: 8

Views: 17870

Answers (5)

chriswnl
chriswnl

Reputation: 461

The simplest way to do this that I have found, and for a fuller example, is:

In your view:

<%= simple_form_for :my_object, url: my_objects_path(format: :json), remote: true do |f| %>
  <%= f.error_notification %>
  <%= f.input :an_attribute %>
  <%= f.submit %>
<% end %>

and in your controller:

def create
  @my_object = MyObject.new(my_object_params)
  if @my_object.save
    respond_to do |format|
      format.html { redirect_to @my_object, notice: "Saved" }
      format.json { render json: @my_object, location: my_object_url(@object), status: :created }
    end
  else
    respond_to do |format|
      format.html { render :edit }
      format.json {render json: @my_object, status: :unprocessable_entity }
    end
  end
end

In Rails 5 it's even easier on the controller with the Jbuilder installed to create simple json hashes but this should work there too.

Upvotes: 1

nathanvda
nathanvda

Reputation: 50057

It is better to write it like this: 

= simple_form_for sample_result, url: reject_sample_result_path(sample_result), method: :post, remote: true, input_html: {multipart: true} do |f|

When you explicitly declare data-url it will still first do the default route calculation, which in my case failed because the default routes did not exist (and should not exist --since I am overruling the url). When you declare just url it will just take the given url instead.

Upvotes: 9

Dylan
Dylan

Reputation: 3678

I wanted to post a related follow up, because I had some difficulty figuring out how to implement the callback for this. I found this article to be very helpful: http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/

The secret is either to add an HTML5 data attribute, e.g. data-complete or (better) bind the ajax:complete or ajax:success callbacks provided by Rails to your form (see 4. Remote JavaScript Callbacks in article linked above):

From the article:

jQuery(function($) {
  // create a convenient toggleLoading function
  var toggleLoading = function() { $("#loading").toggle() };

  $("#tool-form")
    .bind("ajax:loading",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind("ajax:success", function(event, data, status, xhr) {
      $("#response").html(data);
    });
});

CoffeeScript example:

$("#new_post").on("ajax:success", (e, data, status, xhr)->
  console.log data
)

Upvotes: 6

Iamvery
Iamvery

Reputation: 284

It seems the valid way to do this now is:

:remote => true, :html => { :data => { :url => '/yoururl', :type => :json } }

which may look a little better with ruby 1.9 hash syntax as:

remote: true, html: { data: { url: '/yoururl', type: :json } }

https://github.com/plataformatec/simple_form/wiki/HTML5-Attributes

Upvotes: 2

Nathan
Nathan

Reputation: 7855

Figured it out. You just need to add the this:

:input_html => {"data-remote" => true, "data-url" => "/yoururl", "data-type" => :json}

Upvotes: 16

Related Questions