Rails 3.2 remote form responds to HTML instead of JS

Question

I am probably missing something out, and here is my problem.

I have a form to submit images and I want the form to use AJAX, but on submit it responds to the HTML format instead of the JS. Why does the POST request doesn't use the JS format?? I also use carrierwave to upload the files.

In my controllers mission_slides_controller.rb

def new
  @account = Account.find(params[:account_id])
  @mission = Mission.find(params[:mission_id])
  @mission_slides = MissionSlide.where('mission_id = ?', @mission.id)
  slides = MissionSlide.where('mission_id = ?', @mission.id)
  @mission_slide = MissionSlide.new
  if slides.size < 1
    @mission_slide.position = 1
  else
    @mission_slide.position = slides.last.position+1
  end
  respond_to do |format|
    format.html # new.html.erb
    format.js
    format.json { render json: @mission_slide }
  end
end

def create
  @mission_slide = MissionSlide.new(params[:mission_slide])
  @account = Account.find(params[:account_id])
  @mission = Mission.find(params[:mission_id])
  respond_to do |format|
    if @mission_slide.save
      format.html { redirect_to user_account_path(current_user, @account), notice: 'Mission slide was successfully created.' }
      format.json { render json: @mission_slide, status: :created, location: @mission_slide }
      format.js
    else
      format.html { render action: "new" }
      format.json { render json: @mission_slide.errors, status: :unprocessable_entity }
      format.js
    end
  end
end

In my controllers _form.html.erb

<div class="slides">
    <h4>Current slides</h4>
    <%= render 'mission_slides' %>
</div>
<%= form_for([current_user, @account, @mission, @mission_slide], :remote => true, :multipart => true) do |f| %>
    <%= render :partial => "layouts/form_messages", :locals => {:model_name => @mission_slide, :heading => t('errors.template.header', :count => @mission_slide.errors.size, :model => @mission_slide.class) } %>
    <%= f.hidden_field :mission_id, :value => @mission.id %>
    <div class="form-group required mission_slide_name">
        <div>
            <%= f.label :name, :class => "control-label required-label" %>
            <div>
                <%= f.text_field :name, :class => "form-control", :placeholder => "Slide Name" %>
            </div>
        </div>
    </div>
    <div class="form-group required mission_slide_image">
        <div>
            <%= f.label :image, :class => "control-label required-label" %>
            <div>
                <%= f.file_field :image, :class => "form-control" %>
            </div>
        </div>
    </div>
    <div class="form-group required mission_slide_position">
        <div>
            <%= f.label :position, :class => "control-label required-label" %>
            <div>
                <%= f.number_field :position, :class => "form-control" %>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div>
            <%= f.submit "Add slide", :class => "btn btn-blue" %>
        </div>
    </div>
<% end %>

and I also created a JS partial for the CREATE action create.js.erb

var container = $("#current_slides")

    <% if @mission_slide.errors.present? %>
        $("#new_mission_slide").prepend("<%= escape_javascript render :partial => "layouts/form_messages", :locals => {:model_name => @mission_slide, :heading => t('errors.template.header', :count => @mission_slide.errors.size, :model => @mission_slide.class) } %>");
    <% else %>
        $('form[id*="new_mission_slide"]').replaceWith('<%= escape_javascript render("form") %>')
        $container.append(@mission_slide)
    <% end %>

thank you for your wise insights

Well I found this link that explains a bit about why Ajax does not work with file uploads. Uploadify is a suggested way, but I do wish to avoid Flash at all cost. [ajax and file upload issues](http://stackoverflow.com/questions/9441933/does-the-ruby-on-rails-carrierwave-gem-work-with-ajax) — Zedrian, Oct 18 '13 at 02:54

score 0 · Answer 1 · answered Oct 17 '13 at 09:59

0

I ran into the same problem and it was beacuse the below line was missing in the layout

<%= javascript_include_tag :defaults %>

answered Oct 17 '13 at 09:59

Amit Thawait

4,862
2
31
25

Thank you for you comment. Care to explain a bit more? In my application.html.erb I already `<%= javascript_include_tag "application" %>`. What do the defaults add ? – Zedrian Oct 17 '13 at 10:09
So, If this is not included in the layout then the required javascripts are not loaded, because of which `remote => true` doesn't come into effect and the request is submitted as normal synchronous `HTML` request instead of `JS` . Does this worked for you as well ? – Amit Thawait Oct 17 '13 at 10:12
I see it added the default.js, but it is still submitted as normal synchronous HTML :(. – Zedrian Oct 17 '13 at 10:19
1

Do you have `//= require jquery` and `//= require jquery_ujs` in your application.js ? – Amit Thawait Oct 17 '13 at 10:21
Yes I do have all the jquery loaded. I have other AJAX actions in my application that work fine. I am thinking that it might be carrierwave that forces to transact into a normal synchronous HTML somehow. – Zedrian Oct 18 '13 at 02:48

Rails 3.2 remote form responds to HTML instead of JS

1 Answers1