jQuery BootStrapロードオーダー

私はBootstrapフレームワークを使ってウェブサイトを構築しています。jQuery BootStrapロードオーダー

カスタムCSSファイルの読み込みに問題があります。このファイルでは、navbarの色などの要素をオーバーライドします。ユーザーがフォームを送信すると、私はphpファイルへのajax呼び出しを行い、そのファイルからの応答はモーダルメッセージにロードされるはずです。

カスタムCSSを有効にするには、ブートストラップCSSファイルの後にロードする必要があります。しかし、私はこれを行うと、私のjQueryは失敗し、私のPHPファイルへの私のajax呼び出しは動作しません。私のCSSファイルがBootstrap CSSファイルの後に読み込まれると、モーダルメッセージが開きますが、私のjQueryが決して通過しないかのように空白になります。

これは、jQueryとBootstrapがロードされているか、使用しているバージョンのバージョンと互換性がないと思われます。

お知らせください。

以下にコードスニペットを含めました。

<style> 
    .navbar-custom { 
    background-color: rgba(40,40,40,0.8); 
    } 
</style>

しかし、それ：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Activate</title> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel='stylesheet' href='style.css'/> 


     <script src="http://code.jquery.com/jquery-latest.min.js" ></script> 

     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 


<script type="text/javascript"> 
       function chk(){ 

        var opus_Code=document.getElementById('opus_Code').value; 
        var session_Token=document.getElementById('session_Token').value; 
        //var session_Token=<?php echo $session_Token; ?>; 
        var dataString='opus_Code='+ opus_Code + '&session_Token=' + session_Token; 

        $.ajax({ 
         type:"post", 
         url: "redeem_Opus.php", 
         data:dataString, 
         cache:false, 
         success:function(html){ 
          var response = jQuery.parseJSON(html); 

          $('#msg').html(html); 
          $('#msg').html(response.response_Message); 

          if(response.response_Status == "200"){ 
           window.location.href = "activation_Complete_Page.php"; 
          }else{ 
           $('#msg').html(response.response_Message); 
           $('#login_Redirect_Button').html("<button type='button' class='btn btn-default' data-dismiss='modal'>Okay</button>"); 
          } 
         } 
        }); 
        return false; 
       } 

       function logout_Chk(){ 

        $('#msg').html("Are you sure you want to log out?"); 
        $('#login_Redirect_Button').html("<button type='button' class='btn btn-default' data-dismiss='modal'>Okay</button>"); 
       } 
      </script> 
     </head> 

<!--Further down in my script--> 
<!-- Modal --> 
       <div class='modal fade' id='myModal' role='dialog'> 
       <div class='modal-dialog modal-sm'> 

        <!-- Modal content--> 
        <div class='modal-content'> 
        <div class='modal-header'> 
         <button type='button' class='close' data-dismiss='modal'>&times;</button> 
         <h4 class='modal-title'>Please note:</h4> 
        </div> 
        <div class='modal-body' id='msg'> 
         <p>Some text in the modal.</p> 
        </div> 
        <div class='modal-footer'> 
         <div id="login_Redirect_Button"></div> 
        </div> 
        </div> 

       </div> 
       </div> 
       <!--end Modal-->

UPDATE

私の現在の回避策は、ブートストラップCSSの前に私のカスタムCSSをロードした後、HTMLページ内の私のスタイルを追加し、そのようにすることです私のCSSファイルからBSDのCSSファイルが読み込まれない限り、同じスタイルが適用されないので、jQueryの呼び出しが中断されます。 :(

UPDATE 2 コメンターによって示唆されるように、問題は私のカスタムCSSファイルにあった。私はそれらの悪いリンゴを取り出した後に解決される問題。あなたはそれが何をするか知っている限りウェブから/ペーストをコピーしないでください:)

出典

2016-05-29 Aram Hakopian

ログインするとAjax呼び出しが同じ結果を返しますか？あなたのCSSはおそらく壊れています。さもなければ、あなたのcss *はJSに害を及ぼさないはずです。あなたは働くスニペットを提供できますか？ – Randy

どうすればログに記録できますか？そして、私が提供するスニペット。私のCSSの？ –

@randyあなたは正しかった!!あなたのご意見ありがとうございます。私のカスタムCSSファイルに問題がありました。問題が解決したら、私はそれらの悪いリンゴを取り出した。自分自身にレッスン、何をしているかわからない限り、ウェブからコピー/貼り付けはしないでください:) –

CSSはあなたのHTMLでのみあなたのJavascriptと対話することはできません。

このような理由から、ページにスタイルを適用すると問題が発生しているように見える場合は、エラーがCSSのどこにあるのかを調べてみてください。あなたは、JSがその動作を変更していないことをかなり確信することができます。、inspect elementを選択し、お使いのブラウザで

$.ajax({ 
    url: "test.html" 
}).done(function(result) { 
    console.log(result);  <--- 
});

次に右クリックをコンソールに移動：

追記は、あなたのAjax呼び出しをログに記録する方法を知りたいと思いました。そこに出力が表示されます。

出典

2016-05-29 09:34:01 Randy

ありがとうございます。説明をありがとうございます。 CSSとJSは相互作用しないので、相互に干渉することはできません。ロギングは将来の参考にも不可欠です。ありがとうございました！ –

jQuery BootStrapロードオーダー

答えて

関連する問題