Question

我希望外部CSS应用于ajax响应。我正在尝试创建一个页面，用户在表单中选择选项并提交后，然后通过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);

    ?>

Answer 1

我可以理解，您正在使用外部JQuery表插件，所有数据（行）都是由AJAX Call提取的。

您可以使用此设置[备份以前的文件]：

我要做的是：只获取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 = $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>';

Answer 2

OOps ..这不是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>';

Answer 3

这是因为您的html页面包含所有css，因为文档已准备就绪..它读取所有类并根据它应用的样式表...但在ajax中我们加载其他页面相同的html页面和这次浏览器没有将html类映射到样式表，这就是你的css没有应用的原因

CSS不适用于ajax响应

3 个答案: