PHP，MySQL，AJAX-调用AJAX结果后，Bootstrap CSS样式不会显示
PHP, MySQL, AJAX - Bootstrap CSS style does not show up after calling AJAX result
这是我第一次在这里发帖。
我想展示一下它的实际样子，因为我很难用语言来解释它。
以下是链接：http://handpickedph.comlu.com/index.php
这是一个为受试者分配房间和时间表的系统。
首先，我需要从选择菜单中选择一个房间名称，其中房间名称显示在数据库中。
正如您在那里看到的，我正在使用引导程序和javascript作为按钮。
从选择菜单中选择房间后，时间表会自动更新。
好消息是它返回从数据库中调用的值。我的问题是，当下表更新时，它没有显示按钮样式。
我认为这个问题与javascript或css链接的定位有关？或者我需要在代码中添加一些内容吗？
请帮忙。
提前感谢！
以下是index.php 的代码
<!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>
这是resulttable2.php
<!--=========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">
<?php
$q = $_GET['q'];
//Connect to database
require "includes/db_connect_roomscheds.php";
//Fetch the data from tables
try {
//table selected from dropdown
//prepare query
$query = "SELECT * FROM sy2015 WHERE roomid = '$q'";
$stmt = $con2->prepare( $query );
//this is the first question mark
$stmt->bindParam(1, $_REQUEST['id']);
//execute our query
$stmt->execute();
//store retrieved row to a variable
$row = $stmt->fetch(PDO::FETCH_ASSOC);
//values to fill up our form
$sunday7 = $row['7sunday'];
$monday7 = $row['7monday'];
$tuesday7 = $row['7tuesday'];
$wednesday7 = $row['7wednesday'];
$thursday7 = $row['7thursday'];
$friday7 = $row['7friday'];
$saturday7 = $row['7saturday'];
$sunday73 = $row['73sunday'];
$monday73 = $row['73monday'];
$tuesday73 = $row['73tuesday'];
$wednesday73 = $row['73wednesday'];
$thursday73 = $row['73thursday'];
$friday73 = $row['73friday'];
$saturday73 = $row['73saturday'];
}catch(PDOException $exception){ //to handle error
echo "Error: " . $exception->getMessage();
}
?>
<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>
Htennek我调试了代码，发现在从下拉列表""中选择后，您向div传递了两个相同的ID
<div id="details">
<div id="details" class="table-responsive">'
请检查一下你的风格为什么会消失。
当您在下拉框上更改主题时，您的javascript不会启动
我建议你手动添加一个代码来更改下面复选框的样式
//Update the div with the response
document.getElementById("details").innerHTML=xmlhttp.responseText;
请检查的"引导切换"插件的文档
谨致问候，sora021
相关文章：
- 如果文本字段为空，则使用JavaScript应用CSS样式
- FF和Chromium中CSS样式按钮的外观差异
- CSS样式属性留空
- 使用javascript单击同一按钮，在两种样式之间更改css值
- 用CSS在CKEditor中设置预览样式
- Javascript+动态菜单+当前链接样式(CSS）+基于PHP的网站
- 如何使用jQuery转换所有带有动态类的内联样式css
- iFrame 中的实时预览和保存样式.css每 30 秒一次
- 如何更改 jquery UI 数据选择器的样式 (CSS）
- 在Javascript中设置左样式CSS属性以移动滑块
- css+jQuery样式.css切换器，用于新的jQuery版本
- Chrome 29样式/Css问题
- 如何更改工具提示的样式/css
- 字体Awesome与半样式CSS
- Angular2组件样式/css没有被浏览器应用在ngafterviewit中
- 如何改变网页内容，而不删除任何样式/css/图形
- 使用Javascript在不影响打印样式的情况下更改显示样式(CSS）
- 使用 Get Time Javascript 更改样式 CSS
- 自定义下拉列表样式(CSS/JS与ASP.. NET c#连接)
- 为输入类型文件按钮添加禁用样式(css)
