「プロジェクト」に取り組んでいるときに、非常に奇妙な厄介な結果が得られました。MySQL の結果をループするために、while ループを使用しました。while ループでエコーされた行の 1 つが、閉じた div ごとに表示され続けるようになりました。これは、firebug または別の DOM インスペクタでのみ表示され、ソース コードでは表示されません。何が原因なのかわからないので、助けていただければ幸いです。その下に、関連するすべてのコードを含めました。
ありがとう、
サム
ところで。これはまだ開発の初期段階ですので、その点を考慮してください。
コード：
ファイアーバグ:
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<li id="nav1" class="active tip-right" style="height: auto;" data-original-title="Dashboard">
<li id="nav2" class="tip-right" style="height: auto;" data-original-title="Forms">
<li id="nav3" class="tip-right" style="height: auto;" data-original-title="UI Elements">
<li id="nav4" class="tip-right" style="height: auto;" data-original-title="Typography">
<li id="nav5" class="tip-right" style="height: auto;" data-original-title="Tables">
<li id="nav6" class="tip-right" style="height: auto;" data-original-title="Gallery">
<li id="nav7" class="tip-right" style="height: auto;" data-original-title="Grid">
<li id="nav8" class="tip-right" style="height: auto;" data-original-title="Charts">
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</ul>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
<div id="canvas" class="content_wrapper">This page was loaded succesfully :D</div>
<div id="loading_modal" class="modal hide fade">
</a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
</body>
</html>
PHP ファイル:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Sam Kool">
<title>Admin panel</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="../css/style.css"/>
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet"><![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body onLoad="prepare()">
<?php
session_start();
if(!isset($_SESSION['name'])){
header('Location: http://localhost/CMS/Admin/');
}
include ('../config.php');
?>
<div class="highligts_content">
<div class="container-fluid">
<div class="stats">
<div class="row-fluid">
<div class="span12">
<div class="statistics">
<ul class="quickstats">
<?php
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_layout
WHERE enabled = '1' and type = 'quickstats'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_array($mysql['query'])){
echo '<li> <a href="#"> <img src="../img/icons/'.$row["image"].'" alt=""> <span>'.$row["title"].'</span> </a> </li>';
}
mysql_close();
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<?php
$i = 1;
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_components
WHERE enabled = '1'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_assoc($mysql['query'])){
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
$i ++;
}
mysql_close();
?>
</ul>
</div>
</div>
<div class="content_wrapper" id="canvas">
</div>
<div class="modal hide fade" id="loading_modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Loading....</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function load_page(id, component){
if($('#'+id).attr('class') == 'active tip-right'){
alert('nope');
return;
}
$('.navigation li').each(function(i){
var myClass = $(this).attr("class");
if(myClass == 'active tip-right'){
$(this).attr('class', 'tip-right');
}
});
$('#'+id).attr('class', 'active tip-right');
$('#loading_modal').modal('show');
setTimeout(function(){
$('#canvas').load('/SCMS/admin/components/'+component, function(){
$('#loading_modal').modal('hide');
});
},1000);
}
function prepare(){
$('#nav1').attr('class', 'active tip-right');
$('#canvas').load('/SCMS/admin/components/dashboard.php');
$('#loading_screen').modal({
keyboard: false,
hide: true
})
}
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
</body>
</html>