Bootstrap doesn't work when wrapped by factor-bundle?

Question

I've been using factor-bundle to wrap my common JS files:

browserify index.js bar-charts.js list-filter.js dashboard.js 
 -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] 
 -o ../../static/js/common.js

Then I've included common.js in my HTML, along with a Bootstrap alert:

 <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Alert alert!
 </div> 
 <script src="/static/js/common.js"></script>

But the alert close button does not work, so Bootstrap is clearly not being picked up.

if I include the Bootstrap and jQuery from a CDN instead, in the same HTML page, it works just fine:

<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Alert alert!
 </div> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Here is a JSFiddle with my common.js file, not working: http://jsfiddle.net/2v9easbz/

And here is a JSFiddle with direct CDN links, working fine: http://jsfiddle.net/vkf027z2/

What is wrong with my common.js file?

Indeed, both fiddles are identical. And without access to common.js, it's simply impossible to tell what's wrong. — spenibus, Aug 21 '15 at 21:40

score 1 · Answer 1 · answered Aug 25 '15 at 08:13

Not Exact References you have given to us ,to solve the issue.So this answer is discussed with all the possibilities can help you and guide you to use it.

We can add dismiss functionality to all alert messages with a bootstrap-alert.js or bootstrap.js.

Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">×</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Here in your code you are using Markup way of alert dismiss as

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

This will work and dismisses alert only if its dependency plugin either of bootstrap-alert.js or bootstrap.js are used.

I found no where that you are trying to bundle to your common.js with this dependency plugins.

If you are wrapping these dependencies , make sure that the path reference of file or plugin you have given is in exact portion of your solution.

Bootstrap doesn't work when wrapped by factor-bundle?

1 Answers1