Question

The error that I’m getting is from the last line in the onShow function:

    //modalregion: shows a modal detail view in bootstrap modal
var ModalRegion = Marionette.Region.extend({
    el: "#modal",

    onShow :  function(view) {
        view.on("close", this.hideModal,this);
        this.$el.modal('show'); //<- **throws TypeError: Object [object Object] has no method 'modal'** 
    },

    hideModal: function() {
        this.$el.modal('hide'); // bootstrap modal
    }
});

I have seen other posts that have error with the same form
Object [object Object] has no method ‘XXXX’

Their solution was "stop loading jquery twice". I’m using require.js so that shouldn’t happen but I checked the Network tab on Crome Dev tools and nothing was loading twice.

this.$el is defined in the debugger but not with modal as a function:

this.$el: jQuery.fn.jQuery.init
0: div#modal
context: #document
length: 1
selector: "#modal"
...snip...
load: function ( url, params, callback ) {
map: function ( callback ) {
mousedown: function ( data, fn ) {
mouseenter: function ( data, fn ) {
mouseleave: function ( data, fn ) {
mousemove: function ( data, fn ) {
mouseout: function ( data, fn ) {
mouseover: function ( data, fn ) {
mouseup: function ( data, fn ) {
next: function ( until, selector ) {

Is there a step I’m missing?

Thanks,

Andrew

Answer 1

The region’s $el is a jQuery selector object, and jQuery doesn’t provide a modal function on this object without a plugin like jQueryUI or KendoUI or something else that would provide the modal functionality.

The plugin that provides the modal function is not being loaded in to your page. You’ll need to require that plugin.