使用Ajax替換部分在Rails中的div

我跟隨Ryan Bates' Railscast #136並嘗試在表單提交後使用AJAX替換部分（'thankyou'）的div（'＃inviteform1'）。出於某種原因，表單提交時，它不起作用 - 而是出現一個空白屏幕，並且URL重定向到localhost：3000/inviterequests。我錯過了什麼？使用Ajax替換部分在Rails中的div

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 - 包括要被替換的DIV

<%= 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 - 局部更換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>

日誌

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)

來源

2013-08-30 nishacodes

看來你應該使用'遠程：TRUE'在'simple_form_for'，而不是'f.submit'。例如'simple_form_for（@inviterequest，remote：true，html：{class：'form-horizontal'}）' – Bigxiang

是的，它工作！如果您將您的評論重新發布爲答案，我可以將其標記爲正確。 – nishacodes

我發佈了，謝謝:) – Bigxiang

看來，你應該在simple_form_for而不是f.submit使用remote: true。如

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

來源

2013-08-30 02:32:05 Bigxiang

使用Ajax替換部分在Rails中的div

回答

相關問題