Ericka Leonardo Gregorio Ericka Leonardo Gregorio - 8 days ago 4
HTML Question

How can I align bootstrap's badge with AJAX inside the <li>

I am currently developing a website where a client user can request trucks on the website. There is a notification when a client requests a truck. It can only be seen by the admin. But I cannot align the badge properly when I started to use AJAX for the real-time notification. Because I have to put the badge (which already working with mysql) inside of the

<div>
tag.




Please take a look at the picture. This is what I want to happen (Please click) As you can see on the image, the badge right there is properly aligned . But this is what I have right now: (Please click)
Your help will be highly appreciated. Here is my code:

Script with AJAX:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>

<script>
// <!--Realtime AJAX CODE-->

function ajax(){

var req = new XMLHttpRequest();

req.onreadystatechange = function(){

if(req.readyState == 4 && req.status == 200){
// (badge) id name of div
document.getElementById('badge').innerHTML = req.responseText;
}
}
req.open('GET','badge.php',true); //(badge.php) file to fetch requests
req.send();

}
setInterval(function(){ajax()},1000);

// <!--End-->
</script>


Bootstrap:

<!-- start of NAV TABS HERE -->
<ul class="nav nav-tabs">
<li role="presentation"><a href="index.php" title="Home page">Home</a>
</li>
<li role="presentation" class="active"><a href="trucks.php"
title="Trucks">Trucks</a></li>
<li role="presentation"><a href="suppliers.php"
title="Suppliers">Suppliers</a></li>
<li role="presentation"><a href="clients.php" title="Clients">Clients</a>
</li>
<li role="presentation"><a href="services.php"
title="Services">Services</a></li>
<li role="presentation"><a href="accountspayables.php" title="Uploaded
Files">Uploaded Files</a></li>
<li role="presentation"><a href="maintenance.php"
title="Maintenance">Maintenance</a></li>
<!-- DROPDOWN start -->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
About us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li role="presentation"><a href="contactus.php" title="Contact
us">Contact us</a></li>
<li role="presentation"><a href="aboutus.php" title="About us">About
us</a></li>
</ul>
</li>
<!-- END OF DROPDOWN -->

<!-- TRUCK REQUESTS START -->
<li role="presentation"><a href="truckrequest.php" title="Truck request">
<i class="fa fa-truck" style="font-size:21px;"></i>
<!-- container for badge.php -->
<div id="badge"></a></div>
</li>





badge.php:

<?php
$conn = mysqli_connect("localhost", "root", "", "crb");
$query = "SELECT COUNT(*) AS total FROM truckrequest WHERE STATUS=0";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
//fetch number of pending requests from table
?>
<span class="badge"><?= $row["total"] ?></span></a>
<?php }
?>

Answer

just use following CSS for this & update your HTML with following

<li role="presentation"><a href="truckrequest.php" title="Truck request"><i class="fa fa-truck" style="font-size:21px;"></i>
 <div id="badge"></div></a>
</li>

.nav-tabs li a i , .nav-tabs li a #badge {
    display: inline-block;
    vertical-align: middle;
}