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); 
    } 
    }); 
});

這是問題所在。在第四列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

請顯示html和css中的[mcve] – mplungjan

OOps..It不是CSS問題。這是導致問題的JavaScript。

實際上，switchery.min.js附加了一個帶類切換的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

，這是因爲在那裏你包括所有的CSS的HTML頁面加載的文件是ready..it讀取所有類，並根據樣式表它適用於..但在Ajax中，我們加載在同一個HTML頁面上的另一頁，這次瀏覽器不會將HTML類映射到樣式表，這就是爲什麼你的CSS不適用於該

來源

2017-02-11 10:15:11

行..明白了。我如何達到要求？ – Vamshi

有兩種方法可以做到這一點是內聯的CSS和其他一個是在所有的CSS文件再次寄宿後，AJAX頁面被封鎖..你可以通過jquey或Java腳本 –

你可以通過內聯的CSS命令來實現這一點。 ..in php頁面..... – Mahesh

正如我能理解，您正在使用外部JQuery表插件，並且所有數據（行）都通過AJAX調用獲取。

您可以使用此設置[備份你以前的文件]：

我所試圖做的是：在AJAX調用（不完整的表）只讀取所需的行。所有的表結構和CSS已經加載，並在表單提交試圖獲取所需的行。在你的情況下，瀏覽器不能動態地呈現表格和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響應

回答

相關問題