1

I am using Twitter Bootstrap Installed Using Buget to an ASP.NET MVC Application. I am however surprised to find that all my bootstrap JavaScript which used to work on localhost and in fact still do have all stopped working when uploaded to my web hosting provider.

I am completely bumped on this and I cant seem to figure out what is wrong.

halfer
  • 19,824
  • 17
  • 99
  • 186
Paul Plato
  • 1,471
  • 6
  • 28
  • 36

2 Answers2

9

Some of your scripts, which depend on jQuery, are being included before jQuery had been loaded.

  • bootstrap-dropdown.js is included before jQuery
  • your custom javascript on line 75 is included before jQuery

I'd suggest moving

<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

and your custom javascript from line 75, to the bottom of your page, after the jQuery bundle is included. Or alternatively move your jQuery bundle into your <head>. It's your preference as to which - see this question: Should Jquery code go in header or footer? regarding that particular issue...

You say it's working on your local box and not on the remote server - if that's really the case then my best guess is that this is to do with the fact that bundling/minification works differently depending on whether you are in debug or release mode.

UPDATE Basically, in a debug build, no bundling/minification is performed on your scripts and css. Each <link> and <script> that you reference in your bundles will be included as a separate file, with no transformations applied to them. In release builds, files in a bundle are concatenated together into one file, and transformations such as minification are applied to them. As per your comment, in order to get the debug behaviour in both your local and published sites, I see 3 options:

1. In your release build, set the compilation debug flag to true in your web.config.

i.e.

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

I wouldn't particularly recommend this, as your release build shouldn't generally be flagged as being debug. But this is a useful setting to quickly toggle on your release build to check if your javascript/css works correctly when it is off.

2. In code, turn off bundling optimizations in your bundle table.

public static void RegisterBundles(BundleCollection bundles)
{
    // other code...
    BundleTable.EnableOptimizations = false;
}

3. Don't do it.

The difference in behaviour is by design, and makes sense - on your local box doing development, you can see all the individual script/css files and in unminified form, which makes debugging far easier. When published, the files are squashed down into one single, compressed file, which will reduce load time for your site.

I'd personally recommend option 3, and just make sure your styles/scripts are being included in the correct order.

Community
  • 1
  • 1
ngm
  • 7,277
  • 1
  • 53
  • 62
  • Yes I have come to the conclusion that the bundling and minification issue. It works differently depending on whether in release or debug mode. Any ideas on how to circumvent this because me thinks they are all one and the same – Paul Plato Apr 05 '13 at 17:26
1

In your page you have 

 <link href="/Content/bootstrapcss" rel="stylesheet"/>

... there's a blip with the file type, maybe this should be 

 <link href="/Content/bootstrap.css" rel="stylesheet"/> ?

And there's a path problem with your Modernizr file, check that the path is correct and the file exists: 

http://bipscore.com/Scripts/modernizr-1.7.min.js

There may be other issues, but wouldn't hurt to get these two corrected first.

Good luck!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50