Javascript PHP、MySQL、AJAX-在调用AJAX结果后，引导CSS样式不会显示
这是我第一次在这里发帖 我想展示一下它的实际样子，因为我很难用语言来解释它 以下是链接： 这是一个为受试者分配房间和时间表的系统 首先，我需要从选择菜单中选择一个房间名称，从数据库中显示房间名称 如您所见，我正在使用引导和javascript作为按钮 从选择菜单中选择房间后， 明细表将自动更新 好消息是它返回从数据库调用的值。 我的问题是，当下表更新时，它不会显示按钮样式 我认为这个问题和javascript或者css链接的定位有关？或者我需要在代码中添加什么内容 请帮忙 提前谢谢 下面是index.php的代码Javascript PHP、MySQL、AJAX-在调用AJAX结果后，引导CSS样式不会显示,javascript,php,css,ajax,twitter-bootstrap,Javascript,Php,Css,Ajax,Twitter Bootstrap,这是我第一次在这里发帖 我想展示一下它的实际样子，因为我很难用语言来解释它 以下是链接： 这是一个为受试者分配房间和时间表的系统 首先，我需要从选择菜单中选择一个房间名称，从数据库中显示房间名称 如您所见，我正在使用引导和javascript作为按钮 从选择菜单中选择房间后， 明细表将自动更新 好消息是它返回从数据库调用的值。 我的问题是，当下表更新时，它不会显示按钮样式 我认为这个问题和javascript或者css链接的定位有关？或者我需要在代码中添加什么内容 请帮忙 提前谢谢 下面是ind
<!DOCTYPE html>
<html>
<head>
<!--=========Start of Toggle JS===============-->
<link href="css/bootstrap-toggle.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body{ margin: 100px;}
</style>
<!--This is the script for updating the table of schedules-->
<script type="text/javascript">
function getRoomschedTable(str)
{
if (window.XMLHttpRequest)
{
// Create the object for browsers
xmlhttp=new XMLHttpRequest();
}
else
{
// Create the object for browser versions prior to IE 7
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
// if server is ready with the response
if (xmlhttp.readyState==4)
{
// if everything is Ok on browser
if(xmlhttp.status==200)
{
//Update the div with the response
document.getElementById("details").innerHTML=xmlhttp.responseText;
}
}
}
//send the selected option id to the php page
xmlhttp.open("GET","tableresult2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
//connect to database
require_once "includes/db_connect_roomscheds.php";
//call the tables
$result = $con2->query("show tables");
?>
<?php
require_once "includes/db_connect_roomscheds.php";
$query = "SELECT * FROM sy2015";
$stmt = $con2->prepare( $query );
$stmt->execute();
//this is how to get number of rows returned
$num = $stmt->rowCount();
?>
<form action="ajazresult.php" method="post">
<select name="roomsched" onchange="getRoomschedTable(this.value)">
<option value="">Select Room:</option>
<?php
//check if more than 0 record found
if($num>0){
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
//extract row
//this will make $row['firstname'] to
//just $firstname only
extract($row);
//creating new table row per record
echo "<option>{$roomid}</option>";
}
}else{
echo "No record";
}
?>
</select>
</form>
<br>
<h4>The schedule of the selected room:</h4>
<div id="details" class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:00 AM - 7:30 AM</td>
<td><?php if(isset($sunday7)){echo $sunday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7sunday' value='1'>"; } ?></td>
<td><?php if(isset($monday7)){echo $monday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7monday' value='1'>"; } ?></td>
<td><?php if(isset($tuesday7)){echo $tuesday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7tuesday' value='1'>"; } ?></td>
<td><?php if(isset($wednesday7)){echo $wednesday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7wednesday' value='1'>"; } ?></td>
<td><?php if(isset($thursday7)){echo $thursday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7thursday' value='1'>"; } ?></td>
<td><?php if(isset($friday7)){echo $friday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7friday' value='1'>"; } ?></td>
<td><?php if(isset($saturday7)){echo $saturday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7saturday' value='1'>"; } ?></td>
</tr>
<tr>
<td>7:30 AM - 8:00 AM</td>
<td><?php if(isset($sunday73)){echo $sunday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73sunday' value='1'>"; } ?></td>
<td><?php if(isset($monday73)){echo $monday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73monday' value='1'>"; } ?></td>
<td><?php if(isset($tuesday73)){echo $tuesday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73tuesday' value='1'>"; } ?></td>
<td><?php if(isset($wednesday73)){echo $wednesday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73wednesday' value='1'>"; } ?></td>
<td><?php if(isset($thursday73)){echo $thursday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73thursday' value='1'>"; } ?></td>
<td><?php if(isset($friday73)){echo $friday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73friday' value='1'>"; } ?></td>
<td><?php if(isset($saturday73)){echo $saturday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73saturday' value='1'>"; } ?></td>
</tr>
</tbody>
</table>
</div>
<!--============Start of Toggle JS==================-->
<script src="js/bootstrap-toggle.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55669452-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
正文{页边距：100px；}
函数getRoomschedTable（str）
{
if（window.XMLHttpRequest）
{
//为浏览器创建对象
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{
//为IE 7之前的浏览器版本创建对象
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
//如果服务器已准备好响应
if（xmlhttp.readyState==4）
{
//如果在浏览器上一切正常
if（xmlhttp.status==200）
{
//用响应更新div
document.getElementById（“详细信息”）.innerHTML=xmlhttp.responseText；
}
}
}
//将所选选项id发送到php页面
open（“GET”，“tableresult2.php？q=“+str，true”）；
xmlhttp.send（）；
}
选择房间：
选定房间的明细表：
时间
星期日
星期一
星期二
星期三
星期四
星期五
星期六
上午7:00-7:30
列支敦士登
我已经调试了代码，发现您在从下拉列表中选择后将两个相同的ID传递给了div'
<div id="details">
<div id="details" class="table-responsive">'
'
。请检查您是否知道您的风格消失的原因 当您在下拉框中更改主题时，javascript不会启动
我建议您添加一个代码来手动更改此行下方复选框的样式
//Update the div with the response
document.getElementById("details").innerHTML=xmlhttp.responseText;
请查看“引导切换”插件的文档
问候,，
sora021你好，安舒克！我感谢你的帮助。我可以在什么文件上看到它？我似乎找不到这两个连续的相同ID。这是我只能看到的。您好，您可以在DOM结构上看到这个ID。请检查一下firebug。并在firebug中调试代码。也许它会帮助你找到重复的IDsHi sora！所以我需要在这行下面放另一个脚本来启用我的css？对吗？大概是这样吧？您好，斯登尼克，所以我需要在该行下面放置另一个脚本，以启用我的css-是的，不是启用css而是启动你正在使用的插件（引导切换插件），可能是这样的？javascriptkit.com/javatutors/loadjavascriptcss.shtml-我不确定，但在检查它可能会起作用，并且需要比您所拥有的更多的工作。这是我的想法，在第二个php文件的每个复选框上添加一个名为“toggles”的类，并将其添加到上面提到的脚本下面$（'.toggles'）。bootstraptogle（）所以我只需复制并粘贴上述脚本下面的相同代码，并在每个复选框上添加“切换”类？
//Update the div with the response
document.getElementById("details").innerHTML=xmlhttp.responseText;