CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxrailscasts
nishacodes
nishacodes

Reputation: 197

Using Ajax to replace a div with a partial in Rails

I'm following Ryan Bates' Railscast #136 and trying to use AJAX to replace a div ('#inviteform1') with a partial ('thankyou') after a form submission. For some reason, when the form is submitted, it's not working -- instead a blank screen appears, and the URL redirects to localhost:3000/inviterequests. What am I missing?

inviterequests_controller

 def create
   @inviterequest = Inviterequest.new(params[:inviterequest])

   respond_to do |format|
    format.js
   end
 end

inviterequests/create.js.erb 

$("#inviteform1").hide().after('<%= j render("thankyou") %>')

inviterequests/_form.html.erb -- includes the div to be replaced 

<%= simple_form_for(@inviterequest, html: { class: 'form-horizontal'}) do |f| %>
  <% if @inviterequest.errors.any? %>
    <div id="error_explanation">
      <h3><%= pluralize(@inviterequest.errors.count, "error") %> prohibited this inviterequest from being saved:</h3>

    <ul>
      <% @inviterequest.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
    </ul>
  </div>
<% end %>

<!-- INVITE BOX CONTENT -->

<div class="invitebox">
  <div class="invitebox-inner">
    <div id="inviteform1">
     <br> <br> <br> 
      <h5> INDIAN WEDDING <BR> PLANNING JUST GOT EASIER </h5>  

      <%= image_tag("smalldivider.png") %>

      <h5> REQUEST AN INVITE </h5>  

      <div class="field">  
        <%= f.input :email, :placeholder => 'enter your email, please', label: false %>
      </div>

      <div class="actions">
        <%= f.submit "SUBMIT", class: "btn btn-primary btn-special", remote: true %>
      </div>
    </div>
</div>
</div>
<% end %>

inviterequests/_thankyou.html.erb -- the partial to replace the div

<div id="thankyou">
<br> <br> <br>
<h3>THANK YOU </h3>
<h4> We are working hard to launch soon <br> and will be in touch. </h4>

<%= image_tag("smalldivider.png") %>

<p class="smallcaps"> <br> SHARE WITH FRIENDS IN THE MEANTIME </p>

    <div class="socialbuttons">
        <div class="twitter">
        <%= link_to (image_tag("twitter2.png")), "https://twitter.com/intent/tweet?screen_name=namastewedding&text=is%20making%20Indian%20wedding%20planning%20easy.%20I%20just%20requested%20my%20invitation.%20%23indianwedding%20www.namastewedding.com", :target => '_blank' %>

        </div>
        <div class="facebook">
        <%= link_to (image_tag("facebook2.png")), "https://www.facebook.com/pages/Namaste-Wedding/359192570873560" %>
        </div>
    </div>
</div>

LOGS

Started POST "/inviterequests" for 127.0.0.1 at 2013-08-29 22:08:39 -0400
Processing by InviterequestsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"pqDBzdaYKuOfjuVo1ovHvrQJTTrsUptAcQekCn4X+Ho=", "inviterequest"=>{"email"=>"[email protected]"}, "commit"=>"SUBMIT"}
Completed 406 Not Acceptable in 1ms (ActiveRecord: 0.0ms)

Upvotes: 0

Views: 1361

Answers (1)

Bigxiang
Bigxiang

Reputation: 6712

It seems that you should use remote: true in simple_form_for instead of f.submit. Such as 

  <%= simple_form_for(@inviterequest, remote:true, html: { class: 'form-horizontal'}) do |f| %>

Upvotes: 2

Related Questions