当按下当前模态上的按钮时，如何触发另一个模态
How do I fire another modal when a button is pressed on the current modal?
所以我有一个有形式的模态。当在该模态上按下"提交"按钮时，我希望执行另一个模态。我该怎么做？
这是我的第一个模态 - views/shared/_upload_video_popup.html.erb：
<div id="overlay"> </div>
<div class="popup" id="add-video-step-1">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TEST</i></p>
</div>
<div class="content">
<% if @family_tree %>
<%= simple_form_for([@family_tree, @video], :remote => true) do |f| %>
<div class="column">
<div class="f-row">
<%= f.input :title, label: "Title:" %>
</div>
<div class="f-row">
<%= f.input :description,label: "Description:" %>
</div>
<div class="f-row">
<%= f.input :circa, as: :datepicker, start_year: Date.today.year - 5, label: "Circa:" %>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<%= f.collection_select :user_ids, @family_tree.members.order(:first_name), :id, :first_name, {}, {multiple: true} %>
</div>
</div>
<%= f.button :submit, "Add Video", id: "video-submit" %>
<% end %>
<% end %>
</div> <!-- //content -->
</div> <!-- //popup -->
由此按钮执行：
<%= link_to "<i class='fa fa-film fa-lg'></i> Upload".html_safe, "#", class: "upload popupbox", data: { popup: "add-video-step-1"} %>
当f.button :submit, "Add Video", id: "video-submit"命中时，我希望执行此模态：
views/videos/upload.html.erb
<div class="bootstrap-styles">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Upload your Video</h3>
<p><i>Step 2 of 2 - TEST</i></p>
</div>
<div class="modal-body">
<div class="form">
<%= form_tag(@upload_info[:url], :multipart => true) do %>
<div>Step 2 of 2</div>
<%= hidden_field_tag :token, @upload_info[:token] %>
<%= file_field_tag :file, title: 'Choose video to upload' %>
<p class="uploader">
<button class="btn btn-success ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Upload Video</span><span class="ladda-spinner"></span></button>
</p>
<% end %>
</div>
</div>
<div class="modal-footer">
</div>
</div>
不太确定如何将两者联系起来。
有什么想法吗？
编辑 1
路线：
resources :family_trees, shallow: true do
resources :videos do
get :upload
end
end
VideoController#Create
def create
authorize! :read, @family_tree
@video = Video.new(video_params)
respond_to do |format|
if @video.save
format.html { redirect_to video_upload_path(@video) }
else
format.html { render action: 'new' }
format.json { render json: @video.errors, status: :unprocessable_entity }
end
end
end
耙子路线：
video_upload_path GET /videos/:video_id/upload(.:format) videos#upload
使用这些设置，当我在 Modal#1 上点击"添加视频"时，日志如下所示：
Started POST "/family_trees/1/videos" for 127.0.0.1 at 2014-11-22 20:41:00 -0500
Processing by VideosController#create as JS
Parameters: {"utf8"=>"✓", "video"=>{"title"=>"Very Testy", "description"=>"Testing 1 2 3", "circa"=>"", "user_ids"=>[""]}, "commit"=>"Add Video", "family_tree_id"=>"1"}
User Load (240.9ms) SELECT "users".* FROM "users" WHERE "users"."id" = 1 ORDER BY "users"."id" ASC LIMIT 1
FamilyTree Load (2.7ms) SELECT "family_trees".* FROM "family_trees" WHERE "family_trees"."user_id" = $1 LIMIT 1 [["user_id", 1]]
FamilyTree Load (1.7ms) SELECT "family_trees".* FROM "family_trees" WHERE "family_trees"."id" = $1 LIMIT 1 [["id", 1]]
(1.8ms) SELECT COUNT(*) FROM "roles" INNER JOIN "users_roles" ON "roles"."id" = "users_roles"."role_id" WHERE "users_roles"."user_id" = $1 AND (((roles.name = 'admin') AND (roles.resource_type IS NULL) AND (roles.resource_id IS NULL))) [["user_id", 1]]
Membership Load (2.2ms) SELECT "memberships".* FROM "memberships" WHERE "memberships"."user_id" = 1 AND "memberships"."family_tree_id" = 1
(9.7ms) BEGIN
SQL (5.5ms) INSERT INTO "videos" ("created_at", "description", "title", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id" [["created_at", "2014-11-23 01:41:00.481963"], ["description", "Testing 1 2 3"], ["title", "Very Testy"], ["updated_at", "2014-11-23 01:41:00.481963"]]
(5.2ms) COMMIT
Redirected to http://localhost:3000/videos/54/upload
Completed 302 Found in 305ms (ActiveRecord: 269.8ms)
Started GET "/videos/54/upload" for 127.0.0.1 at 2014-11-22 20:41:00 -0500
Processing by VideosController#upload as JS
Parameters: {"video_id"=>"54"}
User Load (3.9ms) SELECT "users".* FROM "users" WHERE "users"."id" = 1 ORDER BY "users"."id" ASC LIMIT 1
FamilyTree Load (3.7ms) SELECT "family_trees".* FROM "family_trees" WHERE "family_trees"."user_id" = $1 LIMIT 1 [["user_id", 1]]
(1.8ms) SELECT COUNT(*) FROM "roles" INNER JOIN "users_roles" ON "roles"."id" = "users_roles"."role_id" WHERE "users_roles"."user_id" = $1 AND (((roles.name = 'admin') AND (roles.resource_type IS NULL) AND (roles.resource_id IS NULL))) [["user_id", 1]]
Membership Load (2.2ms) SELECT "memberships".* FROM "memberships" WHERE "memberships"."user_id" = 1 AND "memberships"."family_tree_id" = 1
Video Load (6.8ms) SELECT "videos".* FROM "videos" WHERE "videos"."id" = $1 LIMIT 1 [["id", 54]]
Family Tree: #<FamilyTree id: 1, name: "'s Family Tree", user_id: 1, created_at: "2014-10-04 15:37:18", updated_at: "2014-10-04 15:37:18">
Video: #<Video id: 54, title: "Very Testy", description: "Testing 1 2 3", yt_video_id: nil, is_complete: nil, created_at: "2014-11-23 01:41:00", updated_at: "2014-11-23 01:41:00", reply_id: nil, circa: nil>
Upload Info: {:url=>"http://uploads.gdata.youtube.com/action//1/save_video.54", :token=>"AfeO3xV6xtg"}
Rendered videos/_upload_video.html.erb (44.1ms)
Rendered videos/_upload_video.html.erb (2.6ms)
Rendered videos/_upload_video.html.erb (0.6ms)
Rendered videos/_upload_video.html.erb (0.9ms)
Rendered videos/upload.js.erb (55.2ms)
Completed 200 OK in 447ms (Views: 70.1ms | ActiveRecord: 18.3ms)
编辑 2
upload.js.erb ：
$(document).on("page:change", function() {
$("#myVCModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#myModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#add-video-step-1").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#video-comment").html("<%= escape_javascript(render 'videos/upload_video') %>");
$('#myModalLabel').modal(show);
Ladda.bind('input#video-submit');
console.log("Upload.js.erb has been executed");
});
控制器负责确定应呈现的视图。 我会将操作路由回控制器，让它决定要做什么，并redirect_to所需的视图。
有关各种形式的redirect_to，请参阅 http://guides.rubyonrails.org/layouts_and_rendering.html#using-redirect-to。它提供了建议和示例。
如果您使用类似以下内容：
redirect_to action: :upload
浏览器将对上传页面发出新的请求，上传方法中的代码将运行。 这假定您已设置路由以支持该操作。
您可以使用"耙子路由"来确定哪些路由可用。
如果您发布控制器和路由，我可以提供更多帮助。 还要发布您收到的特定错误。
我已经有一段时间没有看到轨道了，但我的想法是：
- 您的表单中有
:remote => true，这意味着它将作为 ajax 提交 - 正如我看到的日志，它到达您想要的控制器方法，并且该方法呈现新视图
-
但是我没有看到合适的JS可以处理返回的HTML，我记得我使用了类似（咖啡）的东西：
$(document).on 'ajax:success', '.element', (event, data, status, xhr) -> process(data)编辑> JS：
$(document).on('ajax:success', '.elementCausingEvent', function(event, data, status, xhr){ process(data); });
还是我错过了什么？
我想通了。就我而言，发生的事情是它实际上使我videos/upload.js.erb。
但是我有一个不必要的document.on("page:change")，因为我已经在video_controller#upload上了。
所以一旦我把这个转过来：
$(document).on("page:change", function() {
$("#myVCModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#myModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#add-video-step-1").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#video-comment").html("<%= escape_javascript(render 'videos/upload_video') %>");
$('#myModalLabel').modal(show);
Ladda.bind('input#video-submit');
console.log("Upload.js.erb has been executed");
});
进入这个：
$("#myVCModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#myModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#add-video-step-1").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#video-comment").html("<%= escape_javascript(render 'videos/upload_video') %>");
$('#myModalLabel').modal(show);
Ladda.bind('input#video-submit');
console.log("Upload.js.erb has been executed");
它工作得很好。
相关文章：
- bootstrap消除模态并显示另一个模态
- 包括来自另一个页面的Boostrap模态;t验证表单
- Angularjs - 观察模态窗口从另一个控制器关闭
- 将数据从一个模态发送到另一个模态
- 基础 - 在关闭另一个模态时打开另一个模态
- 从另一个 JavaScript 函数中调用 jQuery(模态弹出窗口）函数
- 角度:在另一个模态指令中加载的谷歌地图指令保持空白
- 当按下当前模态上的按钮时，如何触发另一个模态
- 无法从引导 PHP 中的另一个模态调用模态
- 在第一个模态中打开另一个模态时，启动模态问题
- 从另一个页面获取Bootstrap's模态内容
- 如何关闭另一个模态对话框
- 选中单选后调用另一个模态
- 为引导模态编写一个回调函数
- Jquery + Bootstrap Modal，打开另一个模态内部…为什么
- 如何在另一个html文件中包含html片段(用于引导模态)
- 如何在一个模态中传递文本框的值给另一个文本框
- 引导3 -从另一个模态打开模态
- 如何在引导程序中在一页上显示两个模态，一个左对齐，另一个右对齐
- 从另一个模态打开一个模态
