＆QUOT;模态形式QUOT;与引导在轨道上工作的部分轨道、形式、部分、模态
在Rails的3.2.3， 我有一个局部视图形式，使用引导2.0.2情态动词
＃myModal.modal
.modal头
.close {数据解雇=＆GT; 莫代尔} =的link_toX，root_path
％H3添加标签
.modal体
=的form_tag'/标记，：远程=＆GT;真正的做
= text_field_tag'tags_string'，则params [：tags_string]
= hidden_field_tag'身份证'，则params [：ID]
.modal躯
= submit_tag添加标签，：类=＆GT; BTN BTN小学
：JavaScript的
$（文件）。就绪（函数（）{
$（'＃myModal .btn.btn小学）。点击（函数（）{
$（'＃myModal）模式（隐藏）。
$（形式）提交（）。
}）;
}）;
我的主页面我有一个链接按钮来调用部分：
％TD =的link_to标签，tagging_path（：ID =＆gt;中＃{repo.id}：tags_string =＆gt;中＃{repo.tags}） 数据肘节=＆GT; 莫代尔，：类=＆GT; 标签添加标签BTN BTN小学
和控制器具有相对标记方法。
现在我有两个问题：
第一
当我按一下按钮就可以正确显示的形式，但它留下 主页面（我不想），displaing相对HREF （这是空的），作为背景
的http：//本地主机：3001 /标签ID = 4f82cb8ef370ff0001000699和放大器; tags_string =
这是通过在链接按钮tagging_path'中产生。我不能 只需调用模式像自举的例子：
＆LT;一个数据切换=模态的href =＃myModal级=BTN BTN-主要BTN-大＆gt;启动演示模式＆LT; / A＆GT;
因为我需要填写控制器/模型形式PARAMS所以...， 如何才能做到这一点？
第二个：
当我点击表格中的添加标签按钮，该数据库中获取的 正确的内容并一切正常，但形式不disapear 直到我点击X的链接，这仅仅是一个链接到root_path，而不是一个JS行动。
这样看来JS不能正常工作
$（文件）。就绪（函数（）{
$（'＃myModal .btn.btn小学）。点击（函数（）{
$（'＃myModal）模式（隐藏）。
$（形式）提交（）。
}）;
}）;
更新：
这是生成的HTML：
＆LT; DIV CLASS ='模式隐藏淡出'ID ='myModal'＆GT;
＆LT; DIV CLASS ='模头'＆GT;
＆LT; DIV CLASS =关闭数据解雇='模式'＆GT;＆LT; A HREF =/＆GT，X＆LT; / A＆GT;＆LT; / DIV＆GT;
＆LT; H3＆gt;添加标签和LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS ='模体'＆GT;
＆LT;形式接收字符集=utf-8行动=/标签数据远程=真的方法=后＆GT;＆LT; DIV的风格=保证金：0;填充：0;显示：内联 ＆GT;＆LT;输入名称=UTF8类型=隐藏值=＆放大器;＃x2713; /＆GT;
＆LT;输入名称=authenticity_token类型=隐藏值=vlZaCIRV58BfDZ0xjYsefSEVL1LSpiI5UL1tgzbm / 80 =/＆GT;＆LT; / DIV＆GT;
＆LT;输入ID =tags_stringNAME =tags_string类型=文本/＆GT;
＆LT;输入ID =IDNAME =id类型=隐藏/＆GT;
＆LT; DIV CLASS ='模态尺'＆GT;
＆LT;输入类=BTN BTN-小学名称=提交类型=提交值=添加标签/＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; TD＆GT;
＆LT; A HREF =/标签ID = 4f82cb5cf370ff000100003a和放大器;放大器; tags_string =红宝石+网络+框架级=标签的附加标签BTN BTN-主数据切换=模式＆GT;标签＆lt; / A＆GT;＆LT ; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;
＆LT; DIV CLASS ='的gravatar'＆GT;＆LT; IMG ALT =Assets.github.com％2fimages％2fgravatars％2fgravatar，组织之参与高度=26 src="https://secure.gravatar.com/avatar/b0f9595244db739302ccce55bfbfc5e5?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" WIDTH =26/＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;
＆LT; A HREF =https://github.com/h5bp/html5-boilerplate＆GT; h5bp / HTML5的样板和LT; / A＆GT;
＆LT; / TD＆GT;
＆LT; TD类=观察家span1'＆GT; 12105＆LT; / TD＆GT;
＆LT; TD类='叉span1'＆GT; 1781＆LT; / TD＆GT;
＆LT; TD＆GT; A专业的前端模板，帮助您构建快速，健壮，适应性强，面向未来的网站＆LT; / TD＆GT;
＆LT; TD＆GT;太阳，1月24日在6:03 pm</td>
＆LT; TD＆GT;周六，04月14日在2:10 pm</td>
...
解决方案
1）使用事件。preventDefault（）停止链接操作
2）你的选择器所需要的空间。或者你可以离开 .btn 出完全。
$（文件）。就绪（函数（）{
$（'＃myModal .btn小学）。点击（函数（五）{
即preventDefault（）;
$（'＃myModal）模式（隐藏）。
$（形式）提交（）。
}）;
}）;
如果您发布的渲染的你的模式的HTML标记，我可以帮助你选择，因为使用类通常不是一个好主意，如果你想捕捉一个特定的按钮点击。
修改给出的标记：
好了，你可以让你的按钮按钮键入代替提交和它的名称代替。如果您使用提交不需要调用 form.submit ，它在默认情况下。使用按钮类型为您提供了更多的控制。
$（'输入[名称=提交]）。点击（函数（）{
// $（形式）提交（）。
$（'＃myModal）模式（隐藏）。
}）;
工作的例子： http://jsfiddle.net/tcjCj/3/
On Rails 3.2.3, I have a form in a partial view, using 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();
});
});
I the "main" page I've a link button to call the partial :
%td= link_to "Tag", tagging_path(:id => "#{repo.id}", :tags_string => "#{repo.tags}"), "data-toggle" => "modal", :class => "tag add-tag btn btn-primary
and the controller has the relative tagging method.
Now I have two problems:
first
when I click the button it display the form correctly but it leaves the "main" page (which I don't want), displaing the relative href (which is empty), as a background :
http://localhost:3001/tagging?id=4f82cb8ef370ff0001000699&tags_string=
that is generated by the 'tagging_path' in the link button. I cannot just call the modal like in bootstrap example :
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
because I need to fill the controller/model with form params so ..., how can this be done ?
second:
when I click the "Add tag" button in the form, the database get the right content and everything works but the form doesn't disapear until I click "X" link, which is just a link to root_path and not a JS action.
so it seems js is not working properly
$(document).ready(function() {
$('#myModal .btn.btn-primary').click(function() {
$('#myModal').modal('hide');
$('form').submit();
});
});
UPDATE:
This is the generated 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>
...
解决方案
1) Use event.preventDefault() to stop the link action
2) Your selector needed a space. Or you can just leave .btn out entirely.
$(document).ready(function() {
$('#myModal .btn-primary').click(function(e) {
e.preventDefault();
$('#myModal').modal('hide');
$('form').submit();
});
});
If you post the rendered HTML markup of your modal I can help with your selector since using the class is generally not a good idea if you want to capture a specific button click.
Edit given markup:
Okay, you can just make your button a button type instead of submit and select it by its name instead. If you use a submit you don't need to call form.submit, it does that by default. Using a button type gives you more control.
$('input[name="commit"]').click(function() {
//$('form').submit();
$('#myModal').modal('hide');
});
Working example: http://jsfiddle.net/tcjCj/3/
