How to use Bootstrap Modal with a Backbone Powered Rails Application

Ruby on Rails
1

I have a Rails App that uses Backbone and Bootstrap. I am trying to wire in a Bootstrap modal to create a lookup. Here is the detailed problem description on StackOverflow. Please advise what am I doing wrong:

http://stackoverflow.com/questions/16906447/how-to-wire-a-bootstrap-modal-form-with-a-backbone-based-ruby-on-rails-app

2

@joshclayton and @cpytel have both done a good amount of Backbone stuff. Perhaps they can help you.

3

Thanks Ben. How do I get them to help me? I just joined the Prime Membership today so I do not yet know how to contact people. I have worked with Josh before at Americas Test Kitchen so he will know me. But if you will guide me on how to reach out to both Josh and Chad, I will appreciate it.

4

They should’ve gotten an email when I mentioned them like that. Hopefully they’ll appear in the thread.

5

Oops. You are fast. By the way, excellent VIM video. I was there in the Boston Ruby group when you presented it. Is that the same video that is available for download or have you updated it recently?

6

Thanks!

It’s been a few years since that talk, so I don’t recall exactly. There is definitely some overlap at least, but I suspect there are some things I didn’t cover in my talk.

7

@bruparel are you getting any javascript errors? Can you render the modal view manually from a console outside of the priceDeckLookup function? Any insight as to what’s failing from the JS side of things will be a big help. Thanks!

8

Hello Josh,
Good to hear from you.

  1. No I am not getting any javascript errors. I keep the Chrome Dev. Tools. pretty much open all the time I am developing/testing with Backbone. The console shows no errors.

  2. The second question is interesting. How can you render the modal view manually from the console? I would love to learn that.

  3. As you can see from my StackOverflow post, I have an alert statement where I check for the priceDeckId. That is working fine. From then on, the priceDeckModal view instance is being created without an error being displayed at the console. I put a debugger statement just before the last statement of my post in step 2 like so:

    if priceDeckId == ‘’
    alert ‘Please select a price deck first’
    else

    alert “The id for selected price deck is = #{priceDeckId}”

    @priceDeckModal = new VGStream.Views.LookupPriceDeck
    priceDeckId: priceDeckId
    @priceDeckModal.render()
    $modalEl = $(“#prices-modal”)
    $modalEl.html @priceDeckModal.el
    debugger
    $modalEl.modal(‘show’)

  4. Here is what I see in the debugger. I have expanded out the priceDeckModal el element to give you a better view. Instead of only containing JST template fragment, it contains the entire form view as you can see from the console or the local variable panel:

I am at a loss as to how to go about debugging this. Please advise on a strategy to approach this process.

Thanks.

9

@bruparel you can try to get the modal to appear with the following code, in the chrome console?

$("#prices-modal").show()

If that doesn’t work, can you just do the following in the console and see what it returns?

$("#prices-modal")

You want to do these things after you would have suspected that the model would have already been shown.

thanks,
-Chad

10

They both return an empty array unfortunately. Please see the following screenshot. Another thing that puzzles me is that the ‘el’ for this.priceDeckModal is set to ‘div.container’ which is the div right below the body element. That means that it is selecting the entire DOM and not the test template that I am trying to render (shown as 4 in the Stackoverflow post).

I am wondering is this the right way to go about showing a bootstrap popup? Or should I be doing something different? Just to make sure you have the right context: when things work, I want to show the details for the Price Deck (shown as 1 in Stackoverflow post snippet). This is a part of the Scenario form. The reason I had to do all this is that I cannot get the value of the price deck for a ‘new’ scenario being entered since the Rails side binding has not taken place yet. If I could get hold of the price deck id in Ruby or Server side code (in the link_to ‘Details’ part), then I could directly invoke the modal.

Here is the screenshot:

Please advise and thank you.

11

12

It can’t find #prices-modal in the DOM. Line 45 in your last screenshot is returning an empty array. jQuery will happily let you call .html() and .show() on that, but it won’t do any good. That’s why you’re not getting any errors.

13

Hey Thanks Derek. I know that :slight_smile: My problem is more basic. Why is an empty array being returned? It should be returning the html representation of the modal.

14

I’m not very familiar with Backbone, but it looks like this.priceDeckModal.render(); is not putting the element into the DOM. Can you share the LookupPriceDeck view?

15

I see that you posted your view code on the stack overflow post. For the sake of completeness here, this is it:

class VGStream.Views.LookupPriceDeck extends Backbone.View
  template: JST['backbone/templates/pdecks/prices_lookup']
  el: '#prices-modal'

  initialize: (options) ->
    super
    @priceDeckId = options.priceDeckId

  render: ->
    super

If you’re expecting rendering this view to put the #prices-modal element into the DOM, then that appears to be your problem. Render is just calling super. From the backbone documentation on render:

The default implementation of render is a no-op. Override this function with your code that renders the view template from model data, and updates this.el with the new HTML. A good convention is to return this at the end of render to enable chained calls.

Again, I’ve never used Backbone, but I think what you want to do is have the el for this view be the body. Then, on render, append the modal’s contents (which should be nested in the #prices-modal element) to el

There’s probably a better way to do modals in a way that would better leverage Backbone, but I’m not familiar enough to say.

16

Hello Derek,
Thanks for your time. But I have been able to solve this problem by following the implementation of Bootstrap model in our code base by a consultant who had worked on it with me before and the threads found in Stackoverflow. Actually, this thread in Stackoverflow summarizes nicely how I have implemented it in this particular situation:

So following that, here is the call to the partical in my code:

  = render :partial => 'shared/price_modal', :locals => { :pdeck => @scenario.pdeck }

And the code in _price_modal.html.haml partial is as follows:

.price-deck
  = link_to 'Price Deck', '#pDeckModal', :class => 'btn', :data => { :toggle => 'modal' }
  #pDeckModal.modal.hide.fade.price-deck-modal

… the modal body displays the details for the price_deck passed to it in the partial call above
This is a simple but workable implementation. This of course, will only display the price deck for a scenario that is in the ‘edit’ view and not the ‘new’ view since the @scenario instance variable does not have a reference to the price deck until it has been saved. But that is another battle to fight, i.e., how to get the price_deck or the price_deck_id of the scenario model (represented by the scenario instance variable @scenario) BEFORE a new scenario form is submitted :slight_smile: For now, this is enough though.

Thanks for your time.

Regards,
Bharat