I had some very strange annoying results while working on my ‘project’.
To loop through MySQL results I used a while loop.
One of the lines echo’ed in the while loop now keeps appearing after every closed div.
This is only visible in firebug or another DOM inspector and not in the source code.
I have no idea what is causing it, so any help is appreciated.
Underneath I included all the code involved.
Thanks,
Sam
Btw. This is still in early development so please take that into consideration.
Code:
Firebug:
<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 File:
<!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>
The DOM inspector is almost always correct, your HTML source is wrong. When things like this happen, it usually indicates you forgot to close a tag, or that you closed them in the wrong order.
This is an extremely easy mistake to make when echoing out html, because you dont usually have indentation or IDE color coding to help you out.
In your second while loop, it appears you opened an
atag and didnt echo out the closing tag.