How do I fire another modal when a button is pressed on the current modal?

Question

So I have a modal that has a form. When the 'submit' button is pressed on that modal, I want another modal to be executed. How do I do that?

This is my first 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 -->

That is executed by this button:

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

When the f.button :submit, "Add Video", id: "video-submit" is hit, I want this modal to be executed:

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>

Not quite sure how to connect the two.

Any ideas?

Edit 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

With these settings, when I hit "Add Video" on Modal#1, this is what the log looks like:

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)

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

What is the JavaScript file that you serve doing? I don't yet see the problem. — Richard_G, Nov 24 '14 at 13:11
I'm no JS expert, but try what you are doing without the JS and see if the second page fires. — Richard_G, Nov 25 '14 at 01:08

Richard_G · Answer 1 · 2014-11-23T01:30:51.000

1

It's the controller's responsibility to determine what view should be presented. I would route the action back to the controller, let it decide what is to be done, and redirect_to the desired view.

See http://guides.rubyonrails.org/layouts_and_rendering.html#using-redirect-to for various forms of redirect_to. It provides advice and examples.

If you use something like:

redirect_to action: :upload

With this code, the browser will make a fresh request for the upload page, the code in the upload method will run. This presumes that you have a route set up to support that action.

You can use "rake routes" to determine what routes are available.

I can help more if you post your controller and your routes. Also post the specific errors you received.

edited Nov 23 '14 at 01:30

answered Nov 23 '14 at 00:35

Richard_G

4,700
3
42
78

I tried that first, but it didn't work as intended. That's why I am trying to JS intercept version. Either way, could you provide some code because maybe I did it wrong? I simply did a `redirect_to action: :upload`. But that didn't actually fire the new modal which is on the `upload.html.erb` view. – marcamillion Nov 23 '14 at 00:43
@marcamillion There is no need to use JS unless you want to do that. Rails can handle this natively just fine. See edits in my response above. – Richard_G Nov 23 '14 at 01:34
Ok, I added those details to the question, including the server logs. I don't get any errors per se, but what happens is you see that in the logs, but the screen just stays on `Modal1` - i.e. it never transitions to `Modal2`. As you can see, it creates the records in the DB, but it doesn't send me to Modal2, so I never upload the actual video. That's the issue. – marcamillion Nov 23 '14 at 01:43
@r-g Any more ideas here? The bounty is about to expire and the answer isn't complete. It doesn't solve my problem. – marcamillion Nov 30 '14 at 09:29
@marcamillion Did you see my earlier comment suggesting you try without the JS? It appears to me that it may be usurping control. I have to agree with the :remote => true comment as that expects AJAX so disable that unless you are expecting. – Richard_G Nov 30 '14 at 14:46

kasi · Answer 2 · 2014-12-01T07:51:45.910

0

I have not seen rails for a while, but my thought is:

You have :remote => true in your form, that means it will be submitted as ajax
As I see logs it reaches controller method that you want, and the method renders the new view

But I do not see appropriate JS that will process returned HTML, I remember I used something like (coffee):

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

Or am I missing something?

edited Dec 01 '14 at 07:51

answered Nov 30 '14 at 13:46

kasi

955
1
12
21

Yes, I believe that to be the case (re: no appropriate JS - that's what I am looking for). Can you re-write that in regular JS, rather than Coffee please. It may be what I am looking for. Thnx. – marcamillion Dec 01 '14 at 00:56
Did it help? Did you try to debug your JS using browser develop. tools (eg. I use chrome, and writing to console `console.log()`)? – kasi Dec 02 '14 at 11:15
Nope this doesn't work. Maybe it is because I am using Turbolinks? – marcamillion Dec 02 '14 at 15:12
if you notice in my latest edit, I am writing a `console.log()`. But even though my server log says that `videos/upload.js.erb` has been rendered, it doesn't output anything to the server log. – marcamillion Dec 02 '14 at 15:14
Maybe I did not understand you, but js `console.log(string)` will appear only in browser console, not server log, if the appropriate js ran. – kasi Dec 02 '14 at 15:39
Did you play with suggested JS, where did you place it? It must be loaded by browser before ajax call. Did you specify '.elementCausingEvent' correctly? Try to use `console.log()` inside callback, to recognize, if it was called. – kasi Dec 02 '14 at 15:46
Some more to study regarding the problem (http://stackoverflow.com/questions/22281918/rails-turbolinks-break-submit-remote-form) and (http://stackoverflow.com/questions/15395105/trying-to-figure-out-ruby-on-rails-remote-true-callbacks) – kasi Dec 02 '14 at 15:49

score 0 · Accepted Answer · answered Dec 02 '14 at 15:48

I figured it out. In my case, what was happening is that it actually renders my videos/upload.js.erb.

But I had a document.on("page:change") that was unnecessary since I was already on the video_controller#upload.

So once I turned this:

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

Into this:

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

It worked perfectly.

How do I fire another modal when a button is pressed on the current modal?

3 Answers3