当当前模态框上的按钮被按下时,我该如何触发另一个模态框?

5

我有一个包含表单的模态框。当点击该模态框上的“提交”按钮时,我希望执行另一个模态框。我该怎么做?

这是我的第一个模态框 - views/shared/_upload_video_popup.html.erb:

<div id="overlay">&nbsp;</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

Rake路由:

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");
});

你提供的 JavaScript 文件是做什么用的?我还没有看出问题所在。 - Richard_G
@R_G,我添加了那个JS。 - marcamillion
我不是JS专家,但是尝试一下在没有JS的情况下进行你正在做的事情,看看第二页是否会触发。 - Richard_G
3个回答

1

控制器有责任决定应该呈现哪个视图。我会将操作路由回控制器,让它决定要做什么,并重定向到所需的视图。

请参阅http://guides.rubyonrails.org/layouts_and_rendering.html#using-redirect-to以获取各种形式的redirect_to。它提供了建议和示例。

如果您使用类似于:

redirect_to action: :upload

使用此代码,浏览器将为上传页面发出新的请求,upload方法中的代码将运行。这假定您已经设置了支持该操作的路由。
您可以使用“rake routes”确定哪些路由可用。
如果您发布您的控制器和路由以及特定错误,我可以提供更多帮助。

我先尝试了那个,但它没有按预期工作。这就是为什么我现在想尝试JS拦截版本的原因。无论哪种方式,你能提供一些代码吗?因为也许我做错了什么?我只是简单地进行了redirect_to action: :upload。但这实际上没有触发upload.html.erb视图中的新模态框。 - marcamillion
@marcamillion 除非你想这样做,否则没有必要使用JS。Rails可以很好地本地处理这个问题。请参见我上面回答中的编辑。 - Richard_G
好的,我已经将这些细节添加到问题中,包括服务器日志。我并没有得到任何明显的错误,但是在日志中可以看到发生了什么,但屏幕仍然停留在“Modal1”上,即它从未转换到“Modal2”。正如您所看到的,它在数据库中创建了记录,但它没有将我发送到Modal2,因此我无法上传实际视频。这就是问题所在。 - marcamillion
@r-g 还有更多的想法吗?赏金即将到期,答案还不完整。它不能解决我的问题。 - marcamillion
@marcamillion,你看到我之前的评论了吗?建议你尝试不使用JS。在我看来,它可能会篡夺控制权。我同意使用“:remote => true”注释,因为它期望AJAX,所以除非你需要,否则请禁用它。 - Richard_G

0

我有一段时间没有接触 Rails 了,但我的想法是:

  1. 你的表单中有 :remote => true,这意味着它将作为ajax提交。
  2. 根据我的日志,它已经到达了你想要的控制器方法,并且该方法呈现了新视图。
  3. 但我没有看到适当的JS来处理返回的HTML,我记得我使用了类似于(coffee):

    $(document).on 'ajax:success', '.element', (event, data, status, xhr) ->
      process(data)
    

    编辑> JS:

    $(document).on('ajax:success', '.elementCausingEvent', function(event, data, status, xhr){
      process(data);    
    });
    

还是我漏掉了什么吗?


是的,我相信那是正确的(关于没有适当的JS - 那就是我正在寻找的)。你能否用普通的JS重新编写它,而不是Coffee。这可能是我要找的。谢谢。 - marcamillion
有帮助吗?你尝试使用浏览器开发工具调试JS了吗(例如,我使用Chrome,并写入控制台console.log())? - kasi
不行,这个不起作用。也许是因为我在使用Turbolinks? - marcamillion
如果您注意到我的最新编辑,我正在编写一个 console.log()。但是,即使我的服务器日志显示已经呈现了 videos/upload.js.erb,它也没有输出任何内容到服务器日志中。 - marcamillion
也许我没有理解你的意思,但是在浏览器中运行适当的js后,console.log(string) 只会出现在浏览器控制台中,而不是服务器日志中。 - kasi
显示剩余2条评论

0

我解决了。在我的情况下,实际上它会呈现我的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");

它完美地运行了。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接