Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Step by step to basic functionality of modal forms #2

Open
wants to merge 8 commits into from
This page is out of date. Refresh to see the latest.
View
3  .gitignore
@@ -21,4 +21,5 @@ doc/
*~
.project
.DS_Store
-.idea
+.idea
+.rvmrc
View
9 app/assets/javascripts/application.js
@@ -15,3 +15,12 @@
//= require turbolinks
//= require bootstrap
//= require_tree .
+
+// This will submit the form contained in modal whenever
+// a button with id modal-form-submit is clicked in a modal
+$(document).on("click", "#modal-form-submit", function(){
+ var form = $(this).
+ closest(".modal-dialog"). // similar to parents i.e. find first parent which has class .modal-dialog
+ find("form"); // find the form
+ form.submit();
+});
View
3  app/controllers/contacts_controller.rb
@@ -1,4 +1,7 @@
class ContactsController < ApplicationController
+
+ layout "modal"
+
def new
@contact = Contact.new
end
View
8 app/views/contacts/_form.html.erb
@@ -1,5 +1,7 @@
<%= form_for(@contact, remote: true) do |f|%>
- <div >
+ <!-- Already an AJAX form -->
+ <!-- Just need to receive the response in a function and display it in modal -->
+ <div>
<%= f.text_field :nickname, class: "hidden" %>
</div>
@@ -18,8 +20,8 @@
<div class="form-group">
<%= f.text_area :message, class: "form-control", type: "text", placeholder: "Message", rows: 8 %>
</div>
-
+ <!--
<div>
<%= f.submit "Send" %>
- </div>
+ </div> -->
<% end %>
View
14 app/views/contacts/new.html.erb
@@ -1 +1,13 @@
-<%= render 'form' %>
+<% @title = "Contact Us" %>
+
+<%= render 'form' %>
+
+<% content_for :footer do %>
+ <!-- These buttons won't work as they are after closing form tag
+ We need to use Javascript to make them call submit on the form inside the modal
+ Plus we have disabled the default send button on form which would make the form look rather ugly
+ Since I want the code for this to be generic and not specific to contact controller adding it in application.js
+ -->
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" id="modal-form-submit" class="btn btn-primary">Send</button>
+<% end %>
View
18 app/views/layouts/modal.html.erb
@@ -0,0 +1,18 @@
+<div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h4 class="modal-title" id="myModalLabel"><%= @title %></h4>
+ </div>
+ <div class="modal-body">
+ <%= yield %>
+ </div>
+ <!-- Please go through documentation for content_for to see what is happening here
+ It is pretty basic -->
+ <% if content_for?(:footer) %>
+ <div class="modal-footer">
+ <%= yield :footer %>
+ </div>
+ <% end %>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
View
21 app/views/pages/home.html.erb
@@ -2,25 +2,14 @@
<nav>
<ul>
- <h4><li><%= link_to "Contact", data: { toggle: "modal", target: "#myModal" } %></li></h4>
+ <!-- Now using separate layout file which doesn't have scripts as we don't want modal
+ to contain scripts
+ -->
+ <h4><li><%= link_to "Contact", new_contact_path, data: { toggle: "modal", target: "#myModal" } %></li></h4>
</ul>
</nav>
<!-- Contact Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
- <h4 class="modal-title" id="myModalLabel">Contact Me</h4>
- </div>
- <div class="modal-body">
- <%= link_to "", new_contact_path %>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="return validate()">Send</button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal-dialog -->
+
</div><!-- /.modal -->
Something went wrong with that request. Please try again.