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>

并且很开心....

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;
    });
    }

Ruby rails - jquery ajax提交表单

2 个答案: