Rails应用中JQuery+Ajax提交按钮显示异常问题求助

我来帮你排查这个问题——这个极小按钮的核心原因是按钮没有文本内容，导致Bootstrap的btn btn-primary样式没有足够的内容支撑，所以缩成了小方块。

问题根源 #

你在表单里用了yield(:button_text)来设置提交按钮的文本，这个值是在new.html.erb里通过provide(:button_text, 'Create collection')定义的。但当你通过remote: true的AJAX链接加载表单时，Rails只会执行new.js.erb的逻辑，不会渲染new.html.erb里的provide内容，所以yield(:button_text)返回了空字符串，按钮就变成了没有文字的小方块。

解决方案（两种可选） #

方案1：给按钮文本加默认值

直接修改_form.html.erb里的提交按钮代码，让它在yield没有值的时候使用默认文本：

<%= f.submit yield(:button_text) || 'Create collection', class: "btn btn-primary" %>

这个方法最简单，不管是正常访问new页面还是AJAX加载表单，按钮都能显示正确的文本。

方案2：AJAX请求时传递按钮文本

如果你想保持provide的逻辑，也可以在AJAX渲染表单时主动传递按钮文本变量：

1. 修改new.js.erb：

$('#new_link').hide().after('<%= j render("form", button_text: "Create collection") %>')

2. 然后修改_form.html.erb里的提交按钮：

<%= f.submit button_text || yield(:button_text), class: "btn btn-primary" %>

这样正常访问new页面时会用provide的值，AJAX加载时会用传递的变量值。

验证效果 #

修改完成后，点击「Create collection」的AJAX链接，表单的提交按钮就会显示完整的「Create collection」文本，按钮大小也会恢复正常的Bootstrap按钮尺寸。

内容的提问来源于stack exchange，提问作者Maayan Naveh