如何使用onclick提交Rails AJAX表单

Question

我该如何通过按钮在Rails中提交一个AJAX表单？

我的代码：

Controller:

def list
  @events = ExternalEvent.all
  if !params[:city_id].nil?
    @events = @events.where(city_id: params[:city_id])
  end
  respond_to do |format|
    format.js
    format.html
  end
end

list.js.erb:

$('#events').html("<%= j render 'events' %>");

list.erb:

<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "application" %>
<div id='events'>
  <%= render 'events' %>
</div>

_events.erb:

<%= form_tag('/list', remote: true) do %>
  <input name='city_id' value='2'>
  <input type='Submit'>
<% end %>
<table>
  <% for event in @events %>
    <tr>
      <td>
        <%= event.name %>
      </td>
    </tr>
  <% end %>
</table>

点击提交按钮后，AJAX表单将成功提交。

但是，如何在表单外部提交表单。 使用：

<input type='button' onclick="document.getElementById('get_event').onsubmit()" value="Change City">

返回 JavaScript 错误。

Uncaught TypeError: object is not a function
  onclick

我该如何在外部提交这个表单？

- DanMatlin

Answer 1

请使用以下方法

<form id="get_event">
<input type='button' onclick="document.getElementById('get_event').submit();" value="Change City">
    </form>

issubmit()不是一个函数，但submit()是一个函数。

对于AJAX，使用Ajax调用来提交表单而无需重新加载页面：

<form id="get_event">
<input type='button' onclick="submitFrmAjax();" value="Change City">
</form>

<script>
    function submitFrmAjax(){
       $.ajax({
    //Your ajax code here to submit from via AJAX. refer jquery site . I gave sample eg.
             url : "Your URL or file name on server",
             data : $("form").serialize()
        });
    }
</script>

常规提交的演示

演示：样本ajax提交，查看Firebug中的网络选项卡

- Pratik Joshi

---

请参考 http://api.jquery.com/jquery.ajax/。其中包含URL、要发送的数据、返回数据的数据类型等信息。 - Pratik Joshi

可以工作...谢谢...但我认为Rails应该有明确的方法来做到这一点。 - DanMatlin

@Zeutheus，Ruby和PHP一样是服务器端语言。而ajax、jquery等则是前端技术。所以无论你在服务器端使用什么语言，AJAX、jquery就像HTML一样适用于所有情况。 :) - Pratik Joshi

我知道这没什么关系，但供你参考，当我使用Rails 2.3时，onsubmit()仍然有效... 它执行一个AJAX提交.. - DanMatlin

Answer 2

我认为你的问题出在这里。

<%= form_tag('/list', remote: true) do %>

改成这个

<%= form_tag(:list, :url => '/list', remote: true) do %>

如果列表模型是可访问的。

- Hardik Hardiya