ruby on rails examples about bootstrap-modal

[jschr]

I don't have any ruby examples myself so anything you can provide would be appreciated.

Thanks

[ndreckshage]

just added the below to a new wiki page (https://github.com/jschr/bootstrap-modal/wiki/Ruby-on-Rails----AJAX-Modal-Example)

---

This utilizes portions of this bootstrap-modal plugin, but also takes advantage of Ruby on Rails built in AJAX functionality. Im definitely not using the plugin to its full potential, so please feel free to edit this with more examples or suggestions.

In my example I am creating a Twitter-like private messaging system that is only accessible in a modal.

###application.html.erb or wherever
put a link like this in your view to link to the modal. remote=true is where the rails ajax magic happens

<%= link_to "Messages", conversations_path, data: { toggle: "modal", target: "#ajax-modal" }, remote: true %>

...

<%= render 'layouts/modal' %>

###_modal.html.erb
added modal-body-content to have div i can replace html for. replacing html on modal-body would get rid of the ajax-loader

<div id="ajax-modal" class="modal hide fade" tabindex="-1">
  <div class='modal-header'>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 class="modal-title">Campustask</h3>
  </div>
  <div class='modal-body'>
    <div class="modal-body-content"></div>
    <div class="ajax-loader"></div>
  </div>
  <div class='modal-footer'>
    <button type="button" data-dismiss="modal" class="btn">Close</button>
  </div>
</div>

###core.js.coffee
i put these in core js file (written in coffee) since modal can be called + used on any page.

# called from a bootstrap dropdown, this closes the dropdown
$('a[data-toggle=modal]').on 'click', ->
  $('.dropdown').removeClass('open')
# this sets up the ajax loader, and it will stay until the method specific js removes it
$('a[data-target=#ajax-modal]').on 'click', ->
  $('.ajax-loader').show()
#removes whatever is in the modal body content div upon clicking close/outside modal
$(document).on 'click', '[data-dismiss=modal], .modal-scrollable', ->
  $('.modal-body-content').empty()
$(document).on 'click', '#ajax-modal', (e) ->
  e.stopPropagation();

###conversations_controller.rb
similar for all methods. this will link to index.js.erb

def index
  sleep 1 #development only, simulates wait time
  respond_to do |format|
    format.html { redirect_to root_path } #for my controller, i wanted it to be JS only
    format.js
  end
end

###index.js.erb
this will take care of the js + render an index partial with the relevant html

var title       =   '.modal-title',
    loader      =   '.ajax-loader',
    content     =   '.modal-body-content',
    dataRemote  =   'a[data-remote=true]';

//i set the title through a helper function
$(title).html('My Messages');
//hides the modal and shows the ajax content
$(loader).fadeToggle('fast', function() {
  $(content).hide().html('<%= j render("index") %>').fadeIn('slow');
});
//brings the loader back up + gets rid of the content when linking to another controller method etc
$(document).on('click', dataRemote, function(){
  $(content).fadeOut('slow', function() {
    $(content).empty();
    $(loader).fadeIn('slow');
  });
});

###_index.html.erb
partial html that gets populated into the ajax modal. left in

<% mailbox.conversations.each do |conversation| %>
  conversation subject --- <%= link_to conversation.subject, conversation, remote: true %>
<% end %>

[jschr]

Awesome! Thanks for the contribution.

[vicentereig]

@jschr I guess I'm a little late to the discussion: I just released today the bootstrap-modal extension packaged into a Rails gemified asset. https://github.com/vicentereig/bootstrap-modal-rails

Cheers.

[Yohn]

@vicentereig theres also the gem posted in issue #42

[vicentereig]

👍

[ndreckshage]

again just to clarify -- these both just package the assets right? it would be helpful if one of them did some fancy stuff with rb/adjusted the js so that all aspects of the bootstrap modal js work fluidly with rails built in ajax. id like to contribute to try and make this happen soon

[cmckni3]

I'm actually getting some good samples up on my version of the gem. I've mostly been building up a sample rails app which does have an ajax example in it.

[cmckni3]

I know one thing I'm lacking is documentation. Maybe @vicentereig and I could join forces. I have some commits that are just waiting to be pushed up (mostly just have to completely finalize them).

Stay tuned and you're welcome to contribute!

[vicentereig]

@cmckni3 Sure we can. Mostly my version packages the assets, as long as it's just what I need. I'll get back to you once I dive into your implementation, definitely we should merge both bootstrap-modal-rails and bootstrap_modals_rails in a single gem.

[cmckni3]

Alright cool. It shouldn't be all that difficult to combine them. Maybe we can plan to do that sometime this weekend. Maybe I'm starting to like using dashes instead of underscores in gem names. It really whichever name we want to use.