On Rails 3.2.3, 我使用bootstrap 2.0.2 modals
在局部视图中有一个表单#myModal.modal
.modal-header
.close{"data-dismiss" => "modal"}= link_to "x", root_path
%h3 Add Tags
.modal-body
= form_tag '/tagging', :remote => true do
= text_field_tag 'tags_string', params[:tags_string]
= hidden_field_tag 'id', params[:id]
.modal-footer
= submit_tag "Add tag", :class => "btn btn-primary"
:javascript
$(document).ready(function() {
$('#myModal .btn.btn-primary').click(function() {
$('#myModal').modal('hide');
$('form').submit();
});
});
我是“主”页面我有一个链接按钮来调用部分:
%td= link_to "Tag", tagging_path(:id => "#{repo.id}", :tags_string => "#{repo.tags}"), "data-toggle" => "modal", :class => "tag add-tag btn btn-primary
并且控制器具有相对标记方法。
现在我有两个问题:
第一
当我点击按钮时,它会正确显示表单,但它会离开 “主要”页面(我不想要),替换相对href (这是空的),作为背景:
http://localhost:3001/tagging?id=4f82cb8ef370ff0001000699&tags_string=
由链接按钮中的'tagging_path'生成。我不能 只需在bootstrap示例中调用模态:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
因为我需要用表格参数填充控制器/模型所以..., 怎么办呢?
第二
当我单击表单中的“添加标签”按钮时,数据库得到了 正确的内容和一切都有效,但形式不会消失 直到我点击“X”链接,这只是root_path的链接而不是JS动作。
所以似乎js无法正常工作
$(document).ready(function() {
$('#myModal .btn.btn-primary').click(function() {
$('#myModal').modal('hide');
$('form').submit();
});
});
更新:
这是生成的html:
<div class='modal hide fade' id='myModal'>
<div class='modal-header'>
<div class='close' data-dismiss='modal'><a href="/">x</a></div>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="vlZaCIRV58BfDZ0xjYsefSEVL1LSpiI5UL1tgzbm/8o=" /></div>
<input id="tags_string" name="tags_string" type="text" />
<input id="id" name="id" type="hidden" />
<div class='modal-footer'>
<input class="btn btn-primary" name="commit" type="submit" value="Add tag" />
</div>
</form>
</div>
</div>
<td>
<a href="/tagging?id=4f82cb5cf370ff000100003a&tags_string=ruby+web+framework" class="tag add-tag btn btn-primary" data-toggle="modal">Tag</a></td>
</tr>
<tr>
<td>
<div class='gravatar'><img alt="Assets.github.com%2fimages%2fgravatars%2fgravatar-orgs" height="26" src="https://secure.gravatar.com/avatar/b0f9595244db739302ccce55bfbfc5e5?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" width="26" /></div>
</td>
<td>
<a href="https://github.com/h5bp/html5-boilerplate">h5bp/html5-boilerplate</a>
</td>
<td class='watchers span1'>12105</td>
<td class='forks span1'>1781</td>
<td>A professional front-end template that helps you build fast, robust, adaptable, and future-proof websites.</td>
<td>Sun, Jan 24 at 6:03pm</td>
<td>Sat, Apr 14 at 2:10pm</td>
...
答案 0 :(得分:1)
1)使用event.preventDefault()
停止链接操作
2)你的选择器需要一个空间。或者你可以完全离开.btn
。
$(document).ready(function() {
$('#myModal .btn-primary').click(function(e) {
e.preventDefault();
$('#myModal').modal('hide');
$('form').submit();
});
});
如果您发布模式的呈现的 HTML标记,我可以帮助您使用选择器,因为如果您想要捕获特定的按钮单击,使用该类通常不是一个好主意。
编辑给定标记:
好的,您只需将按钮设为button
类型而不是submit
,然后按name
选择它。如果您使用submit
,则无需拨打form.submit
,默认情况下会这样做。使用button
类型可以让您获得更多控制权。
$('input[name="commit"]').click(function() {
//$('form').submit();
$('#myModal').modal('hide');
});