2

File: test.jsx compiles to bundle.js using Gulp and Browserify.

File: test.jsx:

var $ = require('jquery');

$("div#addTagModal").modal("hide");

In browser when I load the page I get this error:

Uncaught TypeError: undefined is not a function

On this line:

    $("div#addTagModal").modal("hide");

I have no clue what is wrong. :/

$.ajax works fine so I assume that jQuery is loaded properly.

Bootstrap is included in html using a script tag and I have checked the ID of modal.

I have a button that once clicked opens that modal:

<button className="btn btn-success" data-toggle="modal" href="#addTagModal" type="button">
     <i class="icon-plus"></i>
</button>

Any ideas?

This is my gulp task:

gulp.task('browserify', function() {
gulp.src('app/assets/js/main.js')
    .pipe(browserify({
        debug : true,
        transform: ['reactify']
    }))
    .on('error', gutil.log)
    .pipe(rename('public/js/bundle.js'))
    .pipe(gulp.dest('./'))
});

And in main.js I have this code:

var app = require('./test.jsx');
Mario Bašić
  • 141
  • 1
  • 7
  • As `modal` is not a jQuery object's method, you have to include the related `bootstrap` scripts in your module. If you are using a `script` tag for loading bootstrap, do it for jQuery lib too, as jQuery should be loaded before it's plugins. – Ram Oct 24 '14 at 16:15
  • How do I include bootstrap for jquery in browserify? I have tried doing `var Bootstrap = require('bootstrap')` but it does not work. – Mario Bašić Oct 24 '14 at 16:25
  • [Browserify with twitter bootstrap](http://stackoverflow.com/questions/24827964/browserify-with-twitter-bootstrap) – Ram Oct 24 '14 at 16:26
  • I have seen that post but I don't understand what am I supposed to do to make it work :/ – Mario Bašić Oct 24 '14 at 16:28
  • There are other related questions too. [Adding bootstrap.js to browserify?](http://stackoverflow.com/questions/22964970/adding-bootstrap-js-to-browserify), [Using Bootstrap 3.0 with Browserify](http://stackoverflow.com/questions/24978244/using-bootstrap-3-0-with-browserify) – Ram Oct 24 '14 at 16:37
  • I have seen everything on the internet on this topic but still I lack the knowledge to understand what do I have to do to make it work. I have never before used browserify-shim. I have read the documentation but still I am puzzled. Is there a step by step tutorial or something on how to do this ? – Mario Bašić Oct 24 '14 at 16:44

1 Answers1

-2

Check the file loading. Where your bootstrap.js file is loaded and where your script is loaded. I faced same type of issue and I checked too. It resolved my problem. You may need to check. Hope this helps

Girija Dash
  • 1