Rendering Partials into Bootstrap Modals

[Scott Elwood]

I was looking for an easy way to do this, so this is what I came up with...

First, include the modal somewhere in your applications html file,

<div class="modal hide fade" data-yield="modal"></div>

Now we create a helper file called modal_helper.js.coffee and put this inside:

AppName.modal = (context, path) ->

  context.render {source: path, into: 'modal'}

  $(".modal").modal()

Now in our controller action, we can call this:

AppName.modal(@, "path/to/_partial")

And it works perfect for me, hope someone else can find this helpful because I couldn't find many resources regarding this specific usage.

[Scott Elwood]

I modified the helper a little bit to include a hide ability in case you want to close the modal in your controller,

The new helper:

AppName.modal = (context, path) =>

  if context is 'hide'

    $(".modal").modal('hide')

  else

    context.render {source: path, into: 'modal'}

    $(".modal").modal()

So you can now call the previous function in your controllers...

AppName.modal(@, "path/to/_partial")

Or close the modal with this...

AppName.modal("hide")