Ruby rails - jquery ajax提交表格

Question

發送ajax請求是否正確？ 這段代碼不工作，我需要在這裏更改什麼？任何更好的方式發送一個Ajax表單？

<%= form_tag item_create_path, :remote => true, :id => 'create_item' do %> 
    <p> 
    <b> <%= label_tag :"Name" %></b> <%= text_field_tag :name, nil, :maxlength => 40, :size => 70 %> 
    <b> <%= label_tag :"Date" %></b> <%= text_field_tag :date, nil, :maxlength => 10, :size => 10, :value => Time.now.utc.strftime("%Y-%m-%d") %> 
    <b> <%= label_tag :"Time" %></b> <%= text_field_tag :time, nil, :maxlength => 10, :size => 10, :value => Time.now.localtime.strftime("%H:%M:%S") %> 
    </p> 
    <p> 
    <b> <%= label_tag :Description %></b> <%= text_field_tag :description, nil, :maxlength => 50, :size => 50 %> 
    </p> 

<%= hidden_field_tag :type, nil, :value => "new" %> 
<p class="button"><%= submit_tag " Create ",:onclick=>"javascript:submitForm()" %></p> 
<% end %> 


function submitForm() { 
    $.ajax({type:'POST', url: '/item/create', data:$('#create_item').serialize(), success: function(response) { 
     $('#create_item').find('#item').html(response); 
    }}); 

    return false; 
} 

Answer 1

使用此它將確保工作

<%= form_for(:customer, :url => {:controller => "subscribers", :action => "change_password"}, :html => {:id => 'edit_password_form', :method => :get, :onsubmit => "return false;"}) do |f| %> 
     <%= hidden_field_tag "ids", :id => "ids"%> 
     <div class="ports-fields"> 
     <div class="pass"> 
      <label style="margin-top:4px;">Password</label> 
      <%= f.password_field :password, :class=> 'fields', :placeholder => 'Password' %> 
     </div> 
     <div class="pass"> 
      <label>Confirm Password</label> 
      <%= f.password_field :password_confirmation, :class=> 'fields', :placeholder => 'Password Confirmation' %> 
     </div> 
     <div class="change-pass-btn-submit"> 
      <%= submit_tag "CHANGE PASSWORD", :id => "edit_password_btn" %> 
     </div> 
     <!--modify ports ends--> 
     </div> 
    <% end %> 

和jQuery代碼，這個

<script type="text/javascript"> 
     $("#edit_port_btn").click(function() { 
      var container = $("#info"); 
      $("#edit_port_form").submit(function() { 
       $(this).unbind('submit').ajaxSubmit({ 
        success: function(data) { 
         container.html(data); 
         hudMsg('success', 'Modify ports successfully.'); 
        } 
       }) 
      }); 
     }); 
    </script> 

而且enjoyy ....

Answer 2

我能解決這個問題。在我看來，我的表格被埋在幾個div標籤下。我把它拿出來，保存在一個單獨的div中。然後修改jQuery。然後它工作。

視圖 -

<%= form_tag item_create_path, :remote => true, :id => 'create_item' do %> 
    <p> 
    <b> <%= label_tag :"Name" %></b> <%= text_field_tag :name, nil, :maxlength => 40, :size => 70 %> 
    <b> <%= label_tag :"Date" %></b> <%= text_field_tag :date, nil, :maxlength => 10, :size => 10, :value => Time.now.utc.strftime("%Y-%m-%d") %> 
    <b> <%= label_tag :"Time" %></b> <%= text_field_tag :time, nil, :maxlength => 10, :size => 10, :value => Time.now.localtime.strftime("%H:%M:%S") %> 
    </p> 
    <p> 
    <b> <%= label_tag :Description %></b> <%= text_field_tag :description, nil, :maxlength => 50, :size => 50 %> 
    </p> 

<%= hidden_field_tag :type, nil, :value => "new" %> 
<p class="button"><%= submit_tag " Create ", :id => "create_item_button", :onclick=>"javascript:submitForm()" %></p> 
<% end %> 


In assets/item.js - 

    function submitForm(){ 
    $('#create_item_button').click(function() { 
      $.ajax({ 
      type: 'POST', 
      url: "/item/create", 
      data:$('#create_item').serialize(), 
      error: function(){ }, 
      success: function(data){ $("#item_form").hide(); $('#view_item').html(data); }, 
      complete: function(){ } 
      }); 
    return false; 
    }); 
    }