Javascript 当按下当前模式上的按钮时，如何触发另一个模式？

所以我有一个模态，它有一个形式。当在该模式上按下“提交”按钮时，我希望执行另一个模式。我该怎么做

这是我的第一个模式-

视图/shared/\u upload\u video\u 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 -->

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

不太清楚如何连接这两者

有什么想法吗

编辑1

路线：

  resources :family_trees, shallow: true do
    resources :videos do
      get :upload
    end
  end

VideoController#创建

  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)

---

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

有关重定向到的各种形式，请参见。它提供了建议和例子

如果您使用以下内容：

redirect_to action: :upload

使用此代码，浏览器将对上载页面发出新请求，上载方法中的代码将运行。这假定您已经设置了支持该操作的路由

您可以使用“rake路由”来确定可用的路由

---

如果您发布控制器和路线，我可以提供更多帮助。同时发布您收到的具体错误。

我已经有一段时间没有看到rails了，但我的想法是：

您的表单中有

：remote=>true

，这意味着它将作为ajax提交

正如我看到的日志，它到达了您想要的控制器方法，并且该方法呈现了新的视图

但我没有看到处理返回HTML的适当JS，我记得我使用了类似（咖啡）的东西：

编辑>JS:

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

---

还是我遗漏了什么？

我发现了。在我的例子中，实际发生的情况是它实际上呈现了我的

视频/upload.js.erb

但是我有一个

文档。在（“page:change”）

上，这是不必要的，因为我已经在

视频控制器上了

所以我一转这个,

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

$（文档）.on（“页面：更改”，函数（）{
$（“#myVCModal”）.html（“”）；
$（“#myModal”）.html（“”）；
$（“#add-video-step-1”）.html（“”）；
$（“#视频评论”）.html（“”）；
$（'myModalLabel'）.model（show）；
bind（'input#video submit'）；
log（“Upload.js.erb已执行”）；
});

为此：

$("#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");

$（“#myvcmodel”）.html（“”）；
$（“#myModal”）.html（“”）；
$（“#add-video-step-1”）.html（“”）；
$（“#视频评论”）.html（“”）；
$（'myModalLabel'）.model（show）；
bind（'input#video submit'）；
log（“Upload.js.erb已执行”）；

它工作得很好。
我先尝试了一下，但没有达到预期效果。这就是我试图截取JS版本的原因。无论哪种方式，你能提供一些代码，因为可能我做错了？我只是做了一个
重定向到action:：upload
。但是这实际上并没有启动新的模式，它位于
upload.html.erb
视图中。@marcamillion除非你想这样做，否则没有必要使用JS。Rails本机可以很好地处理这个问题。请参阅上面我的回答中的编辑。好的，我在问题中添加了这些详细信息，包括服务器日志。我本身没有收到任何错误，但发生的情况是，您可以在日志中看到，但屏幕始终保持在
Modal1
-即，它从不转换到
Modal2
。如您所见，它在DB中创建了记录，但它不会将我发送到Modal2，因此我从未上传实际的视频。这就是问题所在。@r-g还有什么想法吗？悬赏即将到期，但答案还不完整。这并不能解决我的问题。@marcamillion你有没有看到我之前的评论，建议你尝试不使用JS？在我看来，它可能正在篡夺控制权。我必须同意：remote=>true注释，因为它需要AJAX，所以除非您需要，否则请禁用它？我还没有发现问题。@R\G我添加了JS。我不是JS专家，但是试试你在没有JS的情况下做什么，看看第二页是否会启动。是的，我相信是这样的（re：没有合适的JS-这就是我要找的）。你能用普通的JS而不是咖啡来重新写吗。这可能就是我要找的。这有帮助吗？您是否尝试使用浏览器开发调试JS。工具（例如，我使用chrome，并向控制台写入
console.log（）
）？不，这不起作用。可能是因为我在使用TurboLink？如果您注意到我最近的编辑，我正在编写一个
console.log（）
。但是，即使我的服务器日志说，
videos/upload.js.erb
已渲染，它也不会向服务器日志输出任何内容。也许我不理解您的意思，但是如果运行了相应的js，js
console.log（字符串）
将只显示在浏览器控制台中，而不是服务器日志中。
$(document).on('ajax:success', '.elementCausingEvent', function(event, data, status, xhr){
  process(data);    
});

$(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");