Wie feuere ich ein anderes Modal, wenn eine Taste auf dem aktuellen Modal gedrückt wird?

Question

Also ich habe ein Modal, das eine Form hat. Wenn die Schaltfläche "Senden" für dieses Modal gedrückt wird, möchte ich, dass ein anderes Modal ausgeführt wird. Wie mache ich das?

Dies ist mein erster modal - 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 --> 

, die durch diese Taste ausgeführt wird:

<%= link_to "<i class='fa fa-film fa-lg'></i> Upload".html_safe, "#", class: "upload popupbox", data: { popup: "add-video-step-1"} %> 

Wenn die f.button :submit, "Add Video", id: "video-submit" getroffen wird, möchte ich diese modal ausgeführt werden:

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> 

Nicht ganz sicher, wie Sie die beiden verbinden.

Irgendwelche Ideen?

bearbeiten 1

Routes:

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 Routes:

video_upload_path GET /videos/:video_id/upload(.:format) videos#upload

Mit diesen Einstellungen, wenn ich Hit "Video hinzufügen" auf Modal # 1, das ist, was das Protokoll wie folgt aussieht:

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) 

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

Answer 1

Ich fand es heraus. In meinem Fall, was passiert ist, dass es tatsächlich meine videos/upload.js.erb rendert.

Aber ich hatte eine document.on("page:change") das war unnötig, da ich bereits auf der video_controller#upload war.

Also einmal drehte ich dies:

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

In diese:

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

Es funktionierte perfekt.

Answer 2

Es liegt in der Verantwortung des Controllers festzulegen, welche Ansicht angezeigt werden soll. Ich würde die Aktion zurück zum Controller leiten, sie entscheiden lassen, was zu tun ist, und Redirect_to die gewünschte Ansicht.

Siehe http://guides.rubyonrails.org/layouts_and_rendering.html#using-redirect-to für verschiedene Formen von redirect_to. Es bietet Rat und Beispiele.

Wenn Sie so etwas wie verwenden:

redirect_to action: :upload 

Mit diesem Code wird der Browser eine neue Anforderung für die Upload-Seite machen, wird der Code in der Upload-Methode ausgeführt wird. Dies setzt voraus, dass Sie eine Route eingerichtet haben, die diese Aktion unterstützt.

Sie können "Rake-Routen" verwenden, um zu bestimmen, welche Routen verfügbar sind.

Ich kann mehr helfen, wenn Sie Ihren Controller und Ihre Routen veröffentlichen. Veröffentlichen Sie auch die spezifischen Fehler, die Sie erhalten haben.

Answer 3

Ich habe nicht Schienen für eine Weile nicht gesehen, aber mein Gedanke ist:

1. Sie :remote => true in Ihrem Formular haben, das heißt, es wird als Ajax vorgelegt
2. Wie ich Logs erreicht es Methode Controller dass Sie wollen, und das Verfahren macht die neue Ansicht

3. Aber ich sehe nicht angemessen JS, die zurückgegeben HTML verarbeiten, ich erinnere mich ich so etwas wie (Kaffee) verwendet:

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

   EDIT> JS:

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

Oder bin ich etwas fehlt?