web-dev-qa-db-fra.com

Le javascript de Bootstrap fonctionne localement, mais pas lorsqu'il est déployé sur un serveur.

J'ai téléchargé l'exemple barebone du bootstrap de Twitter et l'ai personnalisé. Je l'ai testé localement (avec le serveur WAMP) et tout fonctionne parfaitement, à la fois le CSS et le JScript.

J'ai téléchargé les fichiers sur mon service d'hébergement Web et le JScript ne fonctionne tout simplement pas. Je l'ai remarqué parce que les listes déroulantes ne fonctionnaient plus.

J'ai cherché et trouvé d'autres personnes avec le même problème, mais elles utilisent toutes Ruby et je ne le suis pas. Juste le jeu CSS + JScript fourni par bootstrap. En outre, ils ont dit que la solution consistait à inclure d’abord le fichier bootstrap.js, puis le fichier jquery.js. Eh bien, j’ai essayé et cela n’a pas fonctionné, j’ai même inclus le fichier .js non minifié et cela ne fonctionnait toujours pas.

J'utilise le même navigateur (Chrome) pour les tests locaux et à distance. J'ai également essayé différents services d'hébergement et le problème est survenu dans les deux cas.

L'aide est très appréciée.


Autres questions similaires:

17
dialex

Je sais que c'est très étrange mais je pense avoir la solution. Auparavant, j'utilisais jQuery 1.7.2 (fourni) minified. Maintenant, je l'ai changé pour utiliser le jQuery 1.8.0 non minified. Cela a juste commencé à fonctionner ... Une autre chose que j'ai faite a été de convertir tous les fichiers encoding en UTF8 (je pense que c'était le vrai problème/solution)

3
dialex

Le problème peut être que vous chargez boostrap.js avant jQuery. Localement, votre navigateur utilise peut-être une copie mise en cache de Jquery. Par conséquent, cela fonctionne là-bas, mais pas sur votre site actif. Essayez de le réparer en changeant ces deux lignes dans votre code:

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

J'ai eu le même problème. Dans IE, le site travaillait sur localhost mais pas lorsqu'il est hébergé sur un autre serveur. L'ajout de la balise META suivante l'a corrigé.

<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
2
Shahed

J'ai eu exactement le même problème, alors j'ai été soulagé de trouver ce post et d'autres comme ça. Ma résolution était similaire. J'ai tiré mes cheveux pendant une demi-journée pour essayer toutes sortes de choses. Promené le chien. Avait une demi-douzaine de bières. J'ai dormi dessus. Pris le petit déjeuner. Recopié les feuilles de style en haut, et le js en bas du html local au serveur php, puis pour une raison inconnue, il a recommencé à fonctionner. Les seuls points qui semblent utiles pour les autres traversant la même chose:

  • Essayez de revenir à un scénario de travail - dans mon cas, le fichier index.html fonctionnait sur le serveur, mais pas le fichier index.php. Obtenir la même chose était la clé.
  • Essayez différents navigateurs au cas où quelque chose d'étrange se passerait.
  • Assurez-vous de vider le cache du navigateur (par exemple, cliquez avec le bouton droit sur le bouton de rechargement dans Chrome et choisissez "Vider le cache et recharger physiquement").
  • Inspectez vos versions bootstrap css et js. Changez-les en avant et en arrière dans la version jusqu'à ce que vous obteniez du succès. Il est fort probable que la version fournie avec le téléchargement du thème bootstrap soit celle qui fonctionnera le mieux.
1
Darrell

J'avais des problèmes similaires auparavant. La fonction des onglets fonctionnait bien sur mon site HTML, mais ne fonctionnerait pas si elle était codée dans un thème Wordpress. Toutes les URL sources étaient générées dynamiquement avec celles de Wordpress.

Les onglets ont finalement commencé à fonctionner lorsque j'ai ajouté tous les liens JS (à l'exception de Modernizr dans le pied de page au lieu de l'en-tête.

1
Aaron Gray

Retour aux sources: si Debug est défini sur true sur la machine locale et sur l'environnement de déploiement, comme il se doit, assurez-vous que vos fichiers .min.js ne surchargent pas les personnalisations que vous avez apportées aux versions non modifiées des fichiers .js. (s'applique également à .css).

Vous pouvez également désactiver le débogage sur la machine locale et vous devriez voir les mêmes problèmes.

1
Bluelake_BW

Je l'ai rencontré sur un site que j'ai construit et téléchargé sur Amazon S3. Fonctionne correctement sur mon ordinateur local et même sur mon serveur local, mais ne fonctionne pas lorsqu'il est servi par Amazon. La console de Firefox (mais pas de Chrome) a montré qu’elle ne parvenait pas à charger bootstrap.min.css (et al) car leur type MIME n’était pas text/css. 

J'ai dû utiliser la console S3 pour forcer le changement de leurs types en text/css, vider les caches et recharger. Voila!

0
Eric Cloninger

En retard pour la fête, mais j’ai découvert que mon problème était que le fichier Bootstrap.js n’était pas expulsé pendant le déploiement.

0
Chris Hammond

En plus des suggestions très utiles de @dialex et @Darrell, j'ajouterai que si rien de tout cela ne fonctionne, vous pouvez consulter le code auquel vous pourriez être lié, par exemple. via require ('page.php');, pour les doublons. Les liens .js en double ont tendance à causer ces problèmes.

0
MdE