powmedia / backbone.bootstrap-modal Goto Github PK

I've tried with this inside the view passed on to the modal and it looks like the button has not loaded yet when render gets called. Howerver the same works when an event (like click) is fired from the modal for example -> that proves the button is accessible.

render: function() {
      $(this.el).html(template);
      $('.ok').hide();
      return this;
    },

It should probably pointed out in the readme that you cannot bind on the shown and hidden event directly on the modal but one must use modal.$el instead:

Does not work

modal.on('shown', function() {
  // some code
});

Works

modal.$el.on('shown', function() {
  // some code
});

I hope this is user error, but I am unable to get the shown event working. I have tried several combinations.

modal = new Backbone.BootstrapModal({ content: view, title: title, animate: true }).open();

                        modal.bind("shown", function(){
                            alert("hello");
                        });

Is this a possible conflict with bootstrap?

When enter is pressed I think "ok" is a resonable default.

I added the following to the events:

  'keypress': function(event) {
     if (event.which == 13) {
       event.preventDefault();
       this.trigger('ok');
         if (this.options.content && this.options.content.trigger) {
           this.options.content.trigger('ok', this);
         }

         if (this.options.okCloses) {
           this.close();
         }
       }
    }

The above does only seem to work with forms/inputs though...
Perhaps it's something you'd want to add to the offical version?

/Stefan

For people with little Backbone experience.

Thanks.

If I set animate: true, then shown event is working just fine.

Issue demo: http://jsfiddle.net/nzLSA/40/

I suggest adding an option that will append a class to the modal-dialog div. This allows us to set custom width or styling if necessary to override the default behavior.

Clicking the background, or pressing Esc to close the modal does not run the close() method. This should run so modals are properly removed from the DOM, events are fired etc.

What's the license for the code?

be sure to use last jquery 1.9 version for multiple modals fonctionnality

Hiya,

Love this bit of script, would it be possible to add an option to allow a window to scroll to the content if it is currently not visible. Like in the link below;

http://stackoverflow.com/questions/17180621/jquery-scroll-to-top-of-bootstrap-modal

Sometimes when the top of the page is scrolled down a long way the modal is shown but isn't visible and the user has an awkward user journey to scroll to the content.

Thanks,

Rick.

This works great and saved us a ton of time. Is there a way to replace the existing view inside the modal with another one dynamically? I have a backend process that takes a while to publish the content and would like to show a spinner gif in the modal while the content is being fetched. Once the content is available, I would like to swap out the spinner view with the actual content. I couldn't find a way to set the content at run time though.

The close event on the modal listens for a click on the close class ('.close'). The problem is that Bootstrap uses this class for several elements in addition to the modal (e.g. dismissible alerts). Therefore if someone, for example, has an alert within a modal, two close classes will be present and the modal will be closed when the close button on the alert is clicked.

This can be easily fixed by eliminating the ambiguity of which close class belongs to the modal. One solution would be to add another class to the modal close button, such as 'modal-close'. We could then change the trigger event to be on '.modal-close' instead of just '.close'.

Currently there is only an option to focus on buttonOk. It would be nice to have the option to focus an arbitrary field by class.

view = new Backbone.BootstrapModal({ content: $('.formclass').html(), focus: 'field_class' }).open();

First off, thanks for this project. I had a rather hackish way of doing bootstrap modals with my backbone-forms but this is much more elegant.

In my case it would be useful to make the views aware of their modal My views have functions that save/validate them and it makes more sense to me to have things like:

modal.on('ok', () function{
if (! @noteFormView.submit()) {
modal.preventClose();
}
}

in the model instead of outside. This is particularly obvious when using a bunch of views that inherit from the same base class (and the bass class manages the saving). It would be much more DRY - to me - to handle the 'ok' click in the base model rather than outside of the views all together.

var modal = new Backbone.BootstrapModal({
    title      : "My first modal",
    content    : "This is my content",
    animate    : true,
    focusOk    : false,
    okCloses   : true,
    allowCancel: true
});

modal.open();

Result:
http://awesomescreenshot.com/0b74774fdf

Right now it's not possible to disable the use of the Esc key to close the modal.

Both "options.escape" and "options.modalOptions.keyboard" are ignored.
In fact, the code shows that "options.escape" it not used at all throughout the code.

in my environment, MacOX, Chrome, following potion of code of 'backone-bootstrap-modal.js' is not working as expected, the code handling 'hidden' event is not executed

close: function() {
            var self = this,
                $el = this.$el;

            //Check if the modal should stay open
            if (this._preventClose) {
                this._preventClose = false;
                return;
            }
            $el.modal('hide');

            $el.one('hidden', function() {
                self.remove();

                self.trigger('hidden');
            });

the reason is that the event bind is called after "modal('hide')" or to say the event bind is execute after the event had happened, i temporally worked around it by switch the order like following

           $el.one('hidden', function() {
                self.remove();

                self.trigger('hidden');
            });

            $el.modal('hide'); 

i dont know if orignal code works on other environment , i think it would be good to bind the event at the initialization, like in the open or render method

https://github.com/powmedia/backbone.bootstrap-modal/blob/bootstrap3/src/backbone.bootstrap-modal.js#L272

Wouldn't this:

return Modal;

be better and more AMD / RequireJS compliant than what we have?

Backbone.BootstrapModal = Modal;

Thanks for the great module, Charles!

Preamble
I'm trying to implement dialogs as a way to interact with forms, display alerts, progress and confirmation messages.

So, in my case, a form submission sequence would look like this:

1. User opens modal with a form.
2. User submits the form.
3. Modal with form closes.
4. Progress modal being displayed (new alert modal)
5. On submission confirmation progress modal is closed.
6. Confirmation modal being displayed (new alert modal)

While it seems like too many steps and modals, it works quite well and unobtrusive, IMHO.

The issue

When I submit the form many times in a row to get a few cycles of the sequence, at some point I end up with a modal that has negative z-index. I stepped through your code with a debugger to see what was going on, but couldn't really pin-point where the negative count was starting. Its like close() method was ran multiple times on the same modal, but I couldn't see it. One thing I noticed, is that Modal.count++ happens after an on.cancel event setter on line 222. So, I moved Modal.count++ higher in the code right below modal creation $el.modal(..) on line 171 and it fixed my problem.

I'd appreciate if you could look into this whenever you have a chance.

Thanks again!

I love this little library! It got me start using modals with Backbone quick and easy. I want to use it so that users can do a search in my DB, click one of the results, and return that result to the main screen to edit it.

I already have a little cross to close the modal on the right top (<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>), and because of this, I don't need the Cancel and OK button.

Does anybody know how I can somehow prevent it from displaying the cancel and ok button? All tips are welcome!

Hi, thanks for this tool it's a great help in integrating backbone and bootstrap. I've used this in a couple of spot's and I'm attempting to ready my app for deployment. To do this I'm using the r.js optimizer (part of require). I've used a shim set up to pully the libraries my app uses together and as part of that I point the optimizer to my shim file as my mainConfigFile option and I set the wrapShim flag to tru so that backbone's dependancies get loaded.
However this then results in backbone.bootstrap-modal declaring that '_' is undefined as the scop has been changed by the wrap.
Is there a suggested way of resolving this so I can use this library in an optimized environment?

The example in the readme about events in the view doesn't seem to work, as the alert never shows:

var view = new Backbone.View({
    initialize: function () {
        this.bind("ok", okClicked);
    },

    okClicked: function (modal) {
        alert("Ok was clicked");
        modal.preventClose();
    }
});

var modal = new Backbone.BootstrapModal({ content: view }).open();

This is the related code in backbone.bootstrap-modal.js:

'click .ok': function(event) {
  event.preventDefault();
  this.trigger('ok');

  if (this.options.content && this.options.content.trigger) {
    console.log("Content:", this.options.content);
    console.log("Modal  :", this);
    this.options.content.trigger('ok', this);
  }

  if (this.options.okCloses) {
    this.close();
  }
}

I'm rather new to Backbone so I don't fully get what's happening with the context when this.options.content.trigger('ok', this) is called.

If someone could explain this to me and nudge me in the right direction to get the above example working, that would be great!

Thanks!

When a second modal is created over another, the background does not cover the first modal.

The top of the second modal is also set to the top of the first modal, no matter what the height.

can you get to model attributes when using a custom template?

i keep getting errors like this when trying:

Uncaught ReferenceError: lastName is not defined
(anonymous function)
c underscore-min.js:30
Backbone.View.extend.render backbone.bootstrap-modal.js:126
Backbone.View.extend.open backbone.bootstrap-modal.js:149
Backbone.View.extend.searchResultAction app.js:263
f.event.dispatch jquery-1.7.2.min.js:3
h.handle.i jquery-1.7.2.min.js:3

is there anything obviously wrong with the below code?

var tmpl = _.template($("#employee-details-template").html());
var mdl = new Backbone.Model({ firstName: 'cooooooole', lastName: 'oooooorton' });
var view = new Backbone.View({ model : mdl });
var modal = new Backbone.BootstrapModal({ content: view, template: tmpl , animate: true }).open();

thanks in advance, cole

Your plugin has proved to be great help. Thanks.

Can I know, if I have three modals with different width how can I handle it? Is there anything which is configurable?

Its not an issue, actually. I may be hitting wrong place, please let me know if this is true.
Regards,

When allowCancel === true - modal can be closed by clicking outside of its boundaries. The View as far as I can tell doesn't react to this event via hidden.

After testing: cancel, close, ok and click outside - I determined that all actions trigger hidden.bs.modal. First 3 events also trigger hidden in the BootstrapModal, but not the click outside of the modal.

I had to implement a workaround and instead of using this.bind('hidden', callback), I'm using:

$(document).on('hidden.bs.modal', '.modal', {view: this}, callback);

It would be nice if hidden event would cover the click outside of modal boundaries as well.

how can add close button top right side.

Great extension. Could you add version number so we can track the changes in our list of dependencies?

$ bower info backbone.bootstrap-modal
bower backbone.bootstrap-modal#*       not-cached git://github.com/powmedia/backbone.bootstrap-modal.git#*
bower backbone.bootstrap-modal#*          resolve git://github.com/powmedia/backbone.bootstrap-modal.git#*
bower backbone.bootstrap-modal#*         download https://github.com/powmedia/backbone.bootstrap-modal/archive/v0.9.0.tar.gz
bower backbone.bootstrap-modal#*          extract archive.tar.gz
bower backbone.bootstrap-modal#*         resolved git://github.com/powmedia/backbone.bootstrap-modal.git#0.9.0

{
  name: 'backbone.bootstrap-modal',
  homepage: 'https://github.com/powmedia/backbone.bootstrap-modal',
  version: '0.9.0'
}

Available versions:
  - 0.9.0

Version 0.9.1 with support for Bootstrap 3 modal markup is not yet available on Bower.

Great job with this plugin, worked out of the box but now I'm having trouble figuring out how to get data from the content on Ok click, for example lets say I have an input field and write something in it, how do I get that data out when I click ok?

Thanks in advance

This might be a trouble if the intermediate modal is high enough so that it needs scrolling. Body will scroll in this case.

Check the following case at http://jsfiddle.net/LvmBP/

The modal is closed because the modal triggers 'cancel' before modal.preventClose() changes the flag _preventClose to prevent close window.