Bootstrap 不适用于 PHP select 调用 Javascript

Question

我正在使用 bootstrap 模板和 X-editable 内联编辑 bootstrap 插件。

当用户选择更新该行中的列时，我有 2 列显示该行更新的人员和时间。更新是通过内联编辑完成的。我希望它在不刷新页面的情况下显示编辑者。但是，这些行仅由 php 脚本回显，因此这是不可能的。

所以在搜索之后我发现通过 javascript 调用外部 PHP 脚本。但是，css 和 js 链接似乎不适用该 javacsript 调用的结果。

所以我尝试在回显上复制 css 和 js 链接，可编辑的列现在可以使用，但布局完全混乱，所以我认为问题是 css主页中链接的 js 不适用于 javascript 调用的 PHP 脚本回显的行。但我不知道如何解决这个问题。也许还有什么我还不知道。

当整个 PHP 代码都在主页中时有效

我的代码是这样的...

<html>


<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/uniform.css" />
<link rel="stylesheet" href="css/select2.css" />
<link rel="stylesheet" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/maruti-style.css" />
<link rel="stylesheet" href="css/maruti-media.css" class="skin-color" />
<link rel="stylesheet" type="text/css" href="css/z-mbcrs.css">
<!-- x-editable -->
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<body>
 <table class="table table-bordered data-table">
   <thead>
    <tr>
      <td>ID</td>
      <td>Column1</td>
      <td>Column2</td>
    </tr>
   </thead>

   <tbody id="table-data">
   </tbody>

  </table>

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.ui.custom.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.uniform.js"></script> 
<script src="js/select2.min.js"></script> 
<script src="js/maruti.js"></script> 
<script src="js/maruti.tables.js"></script>
<script src="js/jquery.dataTables.min.js"></script> 
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="js/this-page-java.js"></script>
</body>
</html>

本页内容-java.js

 $(document).ready(function(){
setInterval(function(){
    $("#table-data").load("fetch-data.php");
}, 3000);

$.fn.editable.defaults.mode = 'inline';
$('.col1').editable({   
    type:'POST',
    url:'post-data.php'
});
$('.col2').editable({   
    type:'POST',
    url:'post-data.php'
});

});

获取-data.php

include "connection.php";

$select = mysqli_query($con, "SELECT * FROM table");
while($res = mysqli_fetch_assoc($select))
{
$id = $res['ID'];
$col1 = $res['Col1'];
$col2 = $res['Col2'];

echo"
<td>".$id."</td>
<td><a href='#' class='col1' data-name='Col1' data-type='text' data-pk='".$id."' data-url='post-data.php' data-title='Enter code'>".$col1."</a></td>
<td><a href='#' class='col2' data-name='Col2' data-type='text' data-pk='".$id."' data-url='post-data.php' data-title='Enter code'>".$col2."</a></td>
";

}

Answer 1

此代码：

$('.col1').editable({
  //...
});

当页面加载时，

正在执行一次。它将把这个 editable 插件应用于任何匹配的 .col1 元素，该元素存在 当此代码运行时 。它无法匹配尚不存在的元素。

任何时候向页面添加 .col1 元素的新实例时，都需要为那些实例再次初始化此插件。最简单的方法是通过再次执行上述语句重新初始化所有这些。

但是，如果对已经初始化的元素有任何不需要的副作用（这可能因插件而异，这不是通用规则）那么你需要获得更具体的目标仅已加载并需要使用插件初始化的新 .col1 元素。如果是这种情况，那么您需要确定那些特定元素。

因为看起来您只是替换给定父元素的全部内容：

$("#table-data").load("fetch-data.php");

然后您可以在选择器中包含该父元素以定位特定的新元素：

$('#table-data .col1').editable({
  //...
});

编辑：我看到上面的地方可能不清楚，你想在内容加载后初始化插件，这将在 .load() 的回调中表示。所以将两者放在一起可能看起来像这样：

$("#table-data").load("fetch-data.php", function () {
    $('#table-data .col1').editable({
        //...
    });
});

Answer 2

您的 js code.Check 以下代码有误。

$(document).ready(function(){
setInterval(function(){
    $("#table-data").load("fetch-data.php");
}, 3000);

$.fn.editable.defaults.mode = 'inline';
$('.col1').editable({    
    type:'POST',
    url:'post-data.php'
});
$('.col2').editable({   
    type:'POST',
    url:'post-data.php'
});

});

Bootstrap 不适用于 PHP select 调用 Javascript

Bootstrap does not apply on PHP select called by Javascript

javascript

php

jquery

twitter-bootstrap

x-editable