CSSがajaxレスポンスに適用されない

外部CSSをajaxレスポンスに適用したい。ユーザーがフォームのオプションを選択して送信した後、別のフォームがajax経由で読み込まれるページを作成しようとしています。しかし、CSSはajaxレスポンスには適用されません。 私は間違いを理解できませんでした。その方法が間違っていれば私を修正してください。ここでCSSがajaxレスポンスに適用されない

$('#getStudents').submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: 'feature1/getStudents.php', 
    type: 'POST', 
    data: $('#getStudents').serialize(), 
    cache: false, 
    success: function(returndata) { 
     //alert(returndata);    
     $("#listStudents").html(returndata); 
    } 
    }); 
});

問題です。 4列目にCSSが適用されていません。チェックボックスは、iOSが切り替わるように表示されます（http://abpetkov.github.io/switchery/）

<?php 


    $output=''; 

    $output = $output. ' 
    <div class="panel panel-white"> 
    <div class="panel-heading clearfix"> 
     <h3 class="panel-title"> Students </h3> 
    </div> 
    <div class="panel-body"> 

     <div class="table-responsive"> 
      <table id="students" class="display table" style="width: 100%; cellspacing: 0;"> 
       <thead> 
        <tr> 
         <th> ID</th> 
         <th>Student ID</th> 
         <th>Name</th> 
         <th>Attendance</th>       
        </tr> 
       </thead> 
       <tfoot> 
        <tr> 
         <th> ID</th> 
         <th>Student ID</th> 
         <th>Name</th> 
         <th>Attendance</th> 
        </tr> 
       </tfoot> 
       <tbody>'; 
       $i=1; 
       while($data = mysqli_fetch_assoc($results)) { 
        $output = $output. '<tr> 
         <td>'.$i++.'</td> 
         <td>'.$data["id"].'</td> 
         <td>'.$data["id"].'</td> 
         <td> 
         <div class="ios-switch pull-right switch-md"> 
          <input type="checkbox" class="js-switch pull-right fixed-header-check" checked> 
         </div> 
         </td> 
        </tr>'; 
       } 

    $output = $output. ' 
       </tbody> 
      </table> 
     </div> 
    </div> 
    </div>'; 


    echo $output; 

    mysqli_close($con); 

    ?>

出典

2017-02-11 Vamshi

[mcve] – mplungjan

OOps..It同様

は、CSSの問題ではありません。それは問題を引き起こしたjavascriptです。

実際には、switchery.min.jsは、switch swityを使用してdivを追加します。スクリプトが初期化されていないため、レンダリングに失敗しました。

getStudents.phpの最後に次のjavascriptを追加すると、問題が解決しました。

echo '<script language="javascript"> 
     if (Array.prototype.forEach) { 
     var elems = Array.prototype.slice.call(document.querySelectorAll(".js-switch")); 

     elems.forEach(function(html) { 
      var switchery = new Switchery(html); 
     }); 
     } else { 
       var elems = document.querySelectorAll(".js-switch"); 

       for (var i = 0; i < elems.length; i++) { 
        var switchery = new Switchery(elems[i]); 
       } 
       } 
      </script>';

出典

2017-02-13 04:17:32 Vamshi

-1

この文書はready..itは、すべてのクラスを読み込み、スタイルシートに基づいているとして、あなたはすべてのCSSを含めるHTMLページがロードされるためでありますそれに当てはまりますが、ajaxでは、同じhtmlページに他のページを読み込み、このクラスのブラウザはhtmlクラスをスタイルシートにマップしません。これはあなたのCSSが適用されない理由です。

出典

2017-02-11 10:15:11

OKでhtmlとcssを表示してください。必要なものを達成するにはどうすればいいですか？ – Vamshi

これを行うには2つの方法があります。インラインCSSと他の1つは、ajaxページがlodedされた後に再度lodeすべてのCSSファイルです。jqueyまたはJavaスクリプト –

でこれを行うことができます。 .. phpページ..... – Mahesh

理解できますあなたは外部のJQuery Table Pluginを使用しており、すべてのデータ（行）がAJAX Callによってフェッチされています。

あなたはこのセットアップ[バックアップあなたの前のファイル]を使用することができます。

私は何をしようとしていることである：AJAXコール（完全ではないテーブル）でのみ必要な行をフェッチします。すべてのテーブル構造とCSSは既にロードされており、必須の行をフェッチしようとするフォームのSubmissionにあります。あなたの場合、ブラウザはテーブルとCSSを動的にレンダリングできません。このページの変更$出力変数で

1. dashboard.php

<html> 
    <head> 
      <!-- Link to Plugin CSS--> 
      <!--Link to Your Custom CSS --> 


    <head> 
    <body> 
      //HTML and PHP code Here 

     <!-- Link to Plugin Script--> 
     <script> 
     // AJAX CALL 
      $('#getStudents').submit(function(e) { 
       e.preventDefault(); 
       $.ajax({ 
        url: 'feature1/getStudents.php', 
        type: 'POST', 
        data: $('#getStudents').serialize(), 
        cache: false, 
        success: function(returndata) { 
        //alert(returndata);    
        $("#students").html(returndata); //Fetch rows Only Not table(See the Next home.php page) 
        } 
       }); 
       }); 

     </script> 
    </body> 
</html>

2 home.php

<div class="row"> 

    <div class="panel panel-white"> 
     <div class="panel-heading clearfix"> 
      <h3 class="panel-title"> Students </h3> 
     </div> 
     <div class="panel-body"> 

     <div class="table-responsive"> 
      <table id="students" class="display table" style="width: 100%; cellspacing: 0;"> 

      </table> 
     </div> 

     </div> 
    </div> 

</div>

3. getStudents.php

。

$output=''; 

$output = $output. ' 
      <thead> 
       <tr> 
        <th> ID</th> 
        <th>Student ID</th> 
        <th>Name</th> 
        <th>Attendance</th>       
       </tr> 
      </thead> 
      <tfoot> 
       <tr> 
        <th> ID</th> 
        <th>Student ID</th> 
        <th>Name</th> 
        <th>Attendance</th> 
       </tr> 
      </tfoot> 
      <tbody>'; 
      $i=1; 
      while($data = mysqli_fetch_assoc($results)) { 
       $output = $output. '<tr> 
        <td>'.$i++.'</td> 
        <td>'.$data["id"].'</td> 
        <td>'.$data["id"].'</td> 
        <td> 
        <div class="ios-switch pull-right switch-md"> 
         <input type="checkbox" class="js-switch pull-right fixed-header-check" checked> 
        </div> 
        </td> 
       </tr>'; 
      } 

$output = $output. ' 
      </tbody></div>';

出典

2017-02-11 11:33:41

CSSがajaxレスポンスに適用されない

答えて

関連する問題