Ajax / Rails创建的操作不起作用

时间:2014-02-22 21:34:10

标签: ruby-on-rails ajax

您好,并提前致谢。 Rails noob在这里:) 我有一个简单的rails应用程序,用户可以通过ajax创建文章。单击“创建文章”时会显示_article_form.html.erb和new.js.erb,但是当我单击提交表单时,没有任何反应。没有文章被创建。这是new.js.erb

m = $('.modal');
m.html('<%= j(render partial: 'article_form', locals: { articles: @articles }) %>');
m.modal('show');

这是我的ArticlesController

def new
  @article = Article.new
end

def create
  @article = Article.create(article_params)
  @articles = Article.all
end

private

def article_params
  params.require(:article).permit(:title, :body)
end

这是home.html.erb

...
<div id="article_list">
  <%= render partial: 'articles/article_list' %>
</div>
<div class="modal fade" role="dialog"></div>

我的偏见_article_form

<div class="modal-dialog">
  <div class="modal-body">
    <%= simple_form_for @article, class: 'clearfix', remote: true do |f| %>
      <%= f.input :title %>
      <%= f.input :body %>
  </div>
  <div class="modal-footer">
    <%= f.submit 'Save', class: 'btn btn-primary' %>
    <% end %>
  </div>
</div>

和_article_list

<% if @articles.empty? %>
  <span class="text-warning">
    There are no articles yet!
  </span>
<% else %>
  <div class="panel panel-default">     
    <div class="panel-heading">Articles</div>
    <div class="panel-body">
      <ul class="list-group">
        <% @articles.each do |article| %>
    <li class="list-group-item">
      <%= article.title %></br>
      <%= article.body.truncate(25, separator: ' ') %>
    </li>
    <% end %>
      </ul>
    </div>
  </div>
<% end %>

最后,我的create.js.erb

$('#article_list').html('<%= j(render partial: 'articles/article_list') %>');
$('.modal').modal('hide');

我一直在寻找/试图解决这个问题2天,但没有运气。

1 个答案:

答案 0 :(得分:0)

如果您检查表单的html,您会注意到提交按钮超出了表单标记的范围。这就是为什么当你点击提交按钮时,不会发生任何动作。

更改部分_article_form中的html,如下所示:

<div class="modal-dialog">
  <%= simple_form_for @article, class: 'clearfix', remote: true do |f| %>
    <div class="modal-body">
      <%= f.input :title %>
      <%= f.input :body %>
    </div>
    <div class="modal-footer">
      <%= f.submit 'Save', class: 'btn btn-primary' %>
    </div>
  <% end %>
</div>