web-dev-qa-db-ja.com

ブートストラップのjavascriptはローカルで動作しますが、サーバーにデプロイされた場合は動作しません

Twitterのbootstrapの最低限の例をダウンロードしてカスタマイズしました。ローカルで(WAMPサーバーを使用して)テストしたところ、CSSとJScriptの両方ですべてが正常に動作しました。

ファイルをウェブホスティングサービスにアップロードしましたが、JScriptが機能しません。ドロップダウンボックスが機能しなくなったので気づきました。

私は同じ問題を持つ他の人を検索して見つけましたが、それらはすべてRubyを使用しており、私は使用していません。ブートストラップによって提供されるプレイCSS + JScriptだけです。解決策は、最初にbootstrap.js、次にjquery.js試してみましたが、機能しませんでした。縮小されていない.jsも含めましたが、機能しませんでした。

ローカルとリモートのテストに同じブラウザ(Chrome)を使用しています。別のホスティングサービスも試しましたが、両方で問題が発生しました。

ヘルプは大歓迎です。


他の同様の質問:

19
dialex

これは非常に奇妙なことですが、解決策は得たと思います。以前は、縮小版の(付属の)jQuery 1.7.2を使用していました。今、私はそれを縮小していないjQuery 1.8.0を使用するように変更しました。それはちょうど働き始めました...私がやったもう一つのことはすべてのファイルを変換することでしたencodingをUTF8に(これが本当の問題/解決策だったと思います)

3
dialex

問題は、jQueryの前にboostrap.jsをロードすることである可能性があります。ローカルでブラウザがJqueryのキャッシュされたコピーを使用している可能性があるため、ブラウザで機能しますが、ライブサイトでは機能しません。コードでこれらの2行を切り替えて修正してください。

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

私も同じ問題を抱えていました。 IEでは、サイトはlocalhostで機能していましたが、別のサーバーでホストされている場合は機能しませんでした。次のメタタグを追加すると修正されます。

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

私もまったく同じ問題を抱えていたので、この投稿や他の投稿を見つけて安心しました。私の決議も同様でした。いろいろなことを試しながら、半日髪を抜いた。犬の散歩。半ダースのビールを持っていた。その上で寝た。朝食を食べた。上部のスタイルシートと下部のjsをローカルのhtmlからサーバーのphpに再コピーしましたが、不明な理由により再び機能し始めました。他の人が同じことをするのに役立つと思われる唯一のポイント:

  • 作業シナリオに戻ってみてください-私の場合、index.htmlはサーバーで動作していましたが、index.phpでは動作していませんでした。これらを正確に同じにすることが鍵でした。
  • 何か奇妙なことが起こっている場合に備えて、別のブラウザーで試してください。
  • ブラウザのキャッシュを常にクリアしてください(例:Chromeの再読み込みボタンを右クリックし、[キャッシュを空にして再読み込み]を選択してください)。
  • bootstrap cssとjsのバージョンを確認します。成功するまでバージョンを前後に変更してください。可能性は、bootstrapテーマのダウンロードに付属していたバージョンです。動作する可能性が最も高いものです。
1
Darrell

パーティーに遅れましたが、私の問題はBootstrap.jsが展開中に押し出されていなかったことであることがわかりました。

1
Chris Hammond

以前に同様の問題がありました。タブ機能は私のHTMLサイトでは正常に機能していましたが、Wordpressテーマにコード化すると機能しません。すべてのソースURLはWordpressで動的に生成されていました。

すべてのJSリンク(Modernizrを除く)をヘッダーではなくフッターに追加すると、タブがようやく機能し始めました。

1
Aaron Gray

基本に戻る:ローカルマシンでDebugがtrueに、デプロイメント環境でfalseに設定されている場合は、.min.jsファイルが.jsファイルの非縮小バージョンに対して行ったカスタマイズを上書きしていないことを確認してください(.cssにも適用されます)。

ローカルマシンでデバッグをオフにすると、同じ問題が発生するはずです。

1
Bluelake_BW

私が作成してAmazon S3にアップロードしたサイトでこれに遭遇しました。ローカルマシンやローカルサーバーでも問題なく動作しましたが、Amazonから提供された場合は動作しませんでした。 Firefox(ただしChromeではない)のコンソールでは、MIMEタイプがtext/cssではないため、bootstrap.min.css(その他)の読み込みに失敗していることが示されました。

S3コンソールを使用して、タイプを強制的にtext/cssに変更し、キャッシュをクリアして、リロードする必要がありました。出来上がり!

0
Eric Cloninger

@dialexと@Darrellによる非常に便利な提案に加えて、それでも機能しない場合は、リンクしている可能性のあるコードを確認できます。重複する場合は、require ('page.php');を使用します。 .jsリンクが重複していると、これらの問題が発生する傾向があります。

0
MdE