Skip to content

Instantly share code, notes, and snippets.

@thoughtpunch
Created September 10, 2013 18:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thoughtpunch/6513951 to your computer and use it in GitHub Desktop.
Save thoughtpunch/6513951 to your computer and use it in GitHub Desktop.
Skeleton for multi-modal wizard with Rails, Bootstrap, and JQuery
// The HAML markup for the modals. Assumes inclusion of 'aria' data attributes
#step_1.modal{aria-hidden: false}
%p Step 1 Form
%form{ remote: :true, id: "horse_form" }
%label "What's your favorite horse?"
%input{type: :text} :favorite_horse
=link_to "Continue to Step #2", "#step_2", {data: {toggle: "modal"}, id:"modal_submit"}
#step_2.modal
%p Step 2
#content
//this is where the content goes
%button.close{:aria-hidden: true, data: {dismiss: "modal"}}
Finish!
//coffeescript for submitting and hiding modals
#ensure only one modal is open at a time....
$(".modal").on "show.bs.modal", ->
opened_modal = $( $(document).find("[aria-hidden=false]")[0] )
if opened_modal.length >= 1
opened_modal.modal("hide")
#Submit the form
$("#modal_submit").click ->
$(this).closest("form").submit()
#insert the response text in modal #2
$("#horse_form").on "ajax:success", (event, xhr, status) ->
$("#content").append(xhr.responseText)
//controller code for returning the partial
class AwesomeController
def create
if @thing.save
respond_to do |format|
format.json {
render partial: "partial", locals: {thing: @thing}, layout: false, status: ok
}
end
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment