Bootstrap's javascript works locally but not when deployed to a server

Question

I downloaded the barebone example of Twitter's bootstrap and customized it. I tested it locally (with WAMP server) and everything works perfectly, both the CSS and the JScript.

I uploaded the files to my webhosting service and the JScript just doesn't work. I noticed it because dropdown boxes stopped working.

I searched and found other persons with the same problem but they all are using ruby and I'm not. Just the play CSS+JScript provided by bootstrap. Besides they said the solution was to include the bootstrap.js first and then the jquery.js. Well I tried it and it didn't work, I even included the not minified .js and still it didn't work.

I'm using the same browser (Chrome) for local and remote testing. I also tried different hosting services and the problem occurred in both.

Help is much appreciated.

---

Other similar questions:

• Javascript features work on localhost but not when deployed to Heroku
• twitter bootstrap drop down suddenly not working

Eyelet

Answer 1

I know this is very strange but I think I got the solution. Previously I was using the (supplied) jQuery 1.7.2 minified. Now I changed it to use the jQuery 1.8.0 not minified. It just started to work... Another thing I did was to convert all files' encoding to UTF8 (I think this was the real problem/solution)

Eyelet

encoding and Line separator are the real culprits, your answer helped me to fix it quickly. I was totally down when the entire responsive layout was gone in mobile after the deployment :-) Thanks a lot! – Landtag

how you guys change the encoding to UTF8, I have similar issue. I am using "jquery": "^3.5.1" – Soil

Answer 2

The issue might be that you load boostrap.js before jQuery. Locally your browser may be using a cached copy of Jquery, so it works there but not on your live site. Try fixing it by switching those two lines in your code:

<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>

Rigsdaler

why not attach jquery to your bootstrap while you're at it? – Sisera

Answer 3

I had the same problem. In IE, the site was working on localhost but not when hosted on a different server. Adding the following meta tag fixed it.

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Dosser

where to put it? under which node? – Beneficent

Answer 4

I had the exact same problem, so was relieved to find this post and others like it. My resolution was similar. I pulled my hair out for half a day trying all different things. Walked the dog. Had half a dozen beers. Slept on it. Had breakfast. Recopied back the stylesheets at top, and the js from the bottom from the local html to the server php, and then for some unknown reason it started working again. The only points which seem useful for others going through the same:

• Try and get back to a working scenario - in my case the index.html was working on the server but not the index.php. Getting these the exact same was key.
• Try on different browsers just in case something strange is going on.
• Make sure you keep clearing the browser cache (e.g. right click on the reload button in Chrome and choose 'Empty Cache and Hard Reload')
• Inspect your bootstrap css and js versions. Change them forward and backward in version until you get success. Chances are, the version that came with your bootstrap theme download is the most likely one to work.

Thou

Keep clearing the browser cache - worked for me +1 – Overcrop

Answer 5

I was having simular issues before. The tabs function was working fine in my HTML site, but would not work when coded into a Wordpress theme. All of the source URLS were being generated dynamically with Wordpress's .

The tabs finally began working when I added all JS links (except for Modernizr into the footer instead of the header.

Hsu

Answer 6

Back to basics: If Debug is set to true on the local machine and false on the deployment environment as it should be, make sure your .min.js files are not overriding customizations you have made to the non-minified versions of .js files (applies to .css as well).

You can also turn Debug off on the local machine and you should see the same issues.

Sprouse

This is a brilliant idea. Unfortunately it didn't help me in my case :-( But worth for others to try. – Unteach

Answer 7

Late to the party but I found out that my issue was that the Bootstrap.js was not being pushed out during deployment.

Timepleaser

In my case my remote jquery.min.js was 40K but the local one was 85K. Dreamweaver didn't want to overwrite it with the local one, so I had to delete first then all was well. So check all the .js files are the correct sizes (and maybe delete them all and reload to be sure) – Prau

Answer 8

In addition to the very useful suggestions by @dialex and @Darrell , I will add that if none of that works, you can review any code that you might be linking to, ie. via require ('page.php');, for duplicates. Duplicated .js links tend to cause these issues.

Northwestwards

Answer 9

I ran into this on a site I built and uploaded to Amazon S3. Worked fine on my local machine and even my local server, but didn't work when served from Amazon. The console in Firefox (but not Chrome) showed it was failing to load bootstrap.min.css (et. al) because their MIME type was not text/css.

I had to use the S3 console to force change their types to text/css, clear caches, and reload. Voila!

Whitefly

Answer 10

I'm using Codeigniter. I solve these issues by changing my base_url in config.php.

Previous :

$config['base_url'] = 'http://localhost/public_html';

Changes to :

$config['base_url'] = 'http://(my intranet server ip adress)/public_html';

Edify

Answer 11

Had the same problem

In my .html files I had this line

<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>

After changing it to this

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Everything works fine. I guess that internally webjars have http and changing css link to start with https solved my problem

Andrea