红宝石轨道 - jQuery的AJAX提交表单 [英] Ruby rails - jquery ajax submit form

问题描述

这是正确的发送Ajax请求？ 这code不工作，我需要什么改变这里的？什么更好的方法来发送一个Ajax的形式？

 ＆LT;％=的form_tag item_create_path，：远程=＆GT;如此，：ID =＆GT; create_item'做％GT;
  ＆其中p为H.;
   ＆LT; B＆GT; ＆LT;％= label_tag：姓名％GT;＆LT; / B＆GT; ＆LT;％= text_field_tag​​：姓名，无，：最大长度=＆GT; 40：大小=＆GT; 70％＆GT;
   ＆LT; B＆GT; ＆LT;％= label_tag：日期％GT;＆LT; / B＆GT; ＆LT;％= text_field_tag​​：日期，无，：最大长度=＆GT; 10：大小=＆GT; 10日：价值=＆GT; Time.now.utc.strftime（％Y-％M-％D）％＆GT;
   ＆LT; B＆GT; ＆LT;％= label_tag：时代％＆GT;＆LT; / B＆GT; ＆LT;％= text_field_tag​​：时间，无，：最大长度=＆GT; 10：大小=＆GT; 10日：价值=＆GT; Time.now.localtime.strftime（％H：％M：％S）％＆GT;
   ＆所述; / P＆GT;
  ＆其中p为H.;
   ＆LT; B＆GT; ＆LT;％= label_tag：描述％＆GT;＆LT; / B＆GT; ＆LT;％= text_field_tag​​：说明，无，：最大长度=＆GT; 50：大小=＆GT; 50％GT;
  ＆所述; / P＆GT;

＆LT;％= hidden_​​field_tag​​：类型，无，：价值=＆GT; 新的％＆GT;
＆其中，P级=按钮＆GT;＆LT;％= submit_tag创建，：的onclick =＆gt;中的javascript：submitForm（）％＆​​GT;＆LT; / P＆GT;
＆LT;％结束％GT;


功能submitForm（）{
    $阿贾克斯（{类型：POST，网址：/项/创建，数据：$（'＃create_item'）序列化（），成功：函数（响应）{
        $（'＃create_item）找到（'＃项目）HTML（响应）。
    }}）;

    返回false;
}
 

解决方案

使用这一点，将确保正常工作

 ＆LT;％=的form_for（：客户：URL =＆GT; {：控制器=＆gt;中的用户，：操作=＆gt;中change_password}：HTML =＆GT {：ID =＆GT;edit_password_form'，：方法=＆GT;：搞定了，：的onsubmit =＆gt;中返回false;}）办| F | ％＆GT;
      ＆LT;％= hidden_​​field_tag​​IDS，：ID =＆GT; IDS％＆GT;
      ＆LT; D​​IV CLASS =端口字段＆GT;
        ＆LT; D​​IV CLASS =通行证＆GT;
          ＆LT;标签样式=的margin-top：4PX;＆GT;密码＆LT; /标签＆gt;
          ＆LT;％= f.password_field：密码：类=＆GT; '域'，：占位符=＆GT; 密码％GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =通行证＆GT;
           ＆LT;标签＆gt;确认密码＆LT; /标签＆gt;
           ＆LT;％= f.password_field：password_confirmation，：类=＆GT; '域'，：占位符=＆GT; 密码确认％＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =变化传递BTN提交＆GT;
           ＆LT;％= submit_tag更改密码，：ID =＆GT; edit_password_btn％＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;！ - 修改端口结束 - ＆GT;
      ＆LT; / DIV＆GT;
    ＆LT;％结束％GT;
 

和jQuery的code这个

 ＆LT;脚本类型=文/ JavaScript的＆GT;
       $（＃edit_port_btn）。点击（函数（）{
            VAR容器= $（＃信息）;
            $（＃edit_port_form）。递交（函数（）{
                $（本）.unbind（'提交'）。ajaxSubmit会（{
                    成功：功能（数据）{
                        container.html（数据）;
                        hudMsg（'成功'，'成功修改端口。'）;
                    }
                }）
            }）;
       }）;
   ＆LT; / SCRIPT＆GT;
 

和enjoyy ....

Is this correct to send an ajax request? This code isn't working, what do I need to change here? Any better way to send an ajax form?

<%=  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;
}

解决方案

Use this it will sure work

    <%= 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 %>

and jquery code for this

   <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>

And enjoyy....

这篇关于红宝石轨道 - jQuery的AJAX提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！