I'm writing a web-script to handle VPS Creation and Destruction. On the admin page, I use Twitter Bootstrap to show an alert for success and failure messages. Here lies the problem, the .alert-success div works, but the .alert-error doesn't. I have most of my code (minus the PHP script), posted on a Pastebin here.
I have some screenshots on how it looks for me on Internet Explorer 11 here.
Please note that the alert-success area works. I use a Custom Bootstrap to change the font, but that's it. I created it using the getbootstrap website, so I doubt it's that.
I'm writing a web-script to handle VPS Creation and Destruction. On the admin page, I use Twitter Bootstrap to show an alert for success and failure messages. Here lies the problem, the .alert-success div works, but the .alert-error doesn't. I have most of my code (minus the PHP script), posted on a Pastebin here.
I have some screenshots on how it looks for me on Internet Explorer 11 here.
Please note that the alert-success area works. I use a Custom Bootstrap to change the font, but that's it. I created it using the getbootstrap.com website, so I doubt it's that.
Share Improve this question edited Mar 18, 2014 at 16:57 Im0rtality 3,5333 gold badges33 silver badges41 bronze badges asked Mar 18, 2014 at 16:37 duper51duper51 7801 gold badge5 silver badges20 bronze badges 2 |3 Answers
Reset to default 27they have changed alert-error to alert-danger. And please access jquery before bootstrap as Felix has said.. this ran fine on my pc:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Theme Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="Assets/css/bootstrap.min.css" rel="stylesheet">
<link href="Assets/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
HR {
page-break-before: always;
padding-bottom: 10px;
}
</style>
<!-- Bootstrap theme -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VZControlPanel</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Admin</a></li>
<li><a href="login.php">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Admin Summary</h1>
<p>NODE STATUS: 1 nodes online.</p>
</div>
<?php
$success=0;
if($success===1) {
echo '<div class="alert alert-success">';
echo '<strong>SUCCESS:</strong> Action completed successfully!';
echo '<a class="close" data-dismiss="alert">×</a>';
echo '</div>';
} else if($success===0) {
echo '<div class="alert alert-danger">';
echo "<strong>FAILED:</strong> Action didn't complete successfully!";
echo '<a class="close" data-dismiss="alert">×</a>';
echo '</div>';
}
?>
<hr>
<h2>Create VM</h2>
<form action="admin.php" method="get">
<input name="action" value="create" type="hidden">
VMID: <input name="id" type="text"><br>
IP: <input name="ip" type="text"><br>
OS Template: <input name="os" type="text"><br>
NodeID: <input name="nid" type="text"><br>
Assign To: <input name="user" type="text"><br>
<input name="submit" value="Create VM" type="submit">
</form>
<hr>
<h2>Destroy VM</h2>
<form action="admin.php" method="get">
<input name="action" value="destroy" type="hidden">
VMID: <input name="id" type="text"><br>
NodeID: <input name="nid" type="number" maxlength="3"><br>
<input name="submit" type="submit" value="Destroy VM">
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Looks like you are using Bootstrap 3. They've changed the class name from alert-error to alert-danger.
So,what you probably want is class alert-danger and not alert-error ( its with version 2.x ).
Based on your pastebin you need to reverse the order of your included scripts, you need to include jQuery first then Bootstrap since Bootstrap require jQuery to works, so you can change:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
to:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
alert-errordoesn't exist in Bootstrap 3, it should bealert-dangerIf you're using the latest version of Bootstrap that is.. – Nick R Commented Mar 18, 2014 at 16:53