We Keep Coding

Javascript code not working on Laravel Header file

I am working on a Laravel project and there is a login modal inside the project which logs the user in but if the user enters invalid data then I want the modal to pop up automatically with the error message.
I am using this script code but it is not working.No J code is working on the header.blade.php file
<script type="text/javascript">
#if (count($errors) > 0)
$('#login-modal').modal('show');
#endif
</script>
My header.blade.php File is:
<header id="header" class="header-scroll top-header headrom">
<!-- .navbar -->
<nav class="navbar navbar-dark">
<div class="container tog">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">☰</button>
<a class="navbar-brand" href="{{url('/')}}"> <img class="img-rounded" src="images/logo.png" alt=""> </a>
<ul class="nav navbar-nav" id="location-top">
<li class="nav-item dropdown" id="nav-float">
<a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cutlery" aria-hidden="true"></i> FEEL LIKE EATING
</a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html"><img src="images/bbq.png"> BB.Q</a>
<a class="dropdown-item" href="map_results.html"><img src="images/beef.png"> Beef Roast</a>
<a class="dropdown-item" href="food_results.html"><img src="images/carrot.png"> Carrot Juice</a>
<a class="dropdown-item" href="map_results.html"><img src="images/cheese-burger.png"> Cheese Burger</a>
<a class="dropdown-item" href="food_results.html"><img src="images/turkey.png"> Chicken Roast</a>
<a class="dropdown-item" href="map_results.html"><img src="images/noodles.png"> Chinese Soup</a>
<a class="dropdown-item" href="food_results.html"><img src="images/frappe.png"> Cold Coffee</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-map-marker" aria-hidden="true"></i> CHOOSE LOCATION </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html">Location 1</a><a class="dropdown-item" href="map_results.html">Location 2</a>
<a class="dropdown-item" href="food_results.html">Location 3</a>
<a class="dropdown-item" href="map_results.html">Location 4</a>
<a class="dropdown-item" href="food_results.html">Location 5</a>
<a class="dropdown-item" href="map_results.html">Location 6</a>
<a class="dropdown-item" href="food_results.html">Location 7</a>
<a class="dropdown-item" href="map_results.html">Location 8</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle btn btn-danger warning-btn" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i> Menu </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="{{url('/chefs')}}"><img src="images/chef.png"> Chefs</a>
<a class="dropdown-item" href="#"><img src="images/about-us.png"> About Us</a>
<a class="dropdown-item" href="#"><img src="images/letter.png"> Contact Us</a>
<a class="dropdown-item" href="#"><img src="images/question.png"> FAQ's</a>
</div>
</li>
</ul>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav float-lg-right">
#guest
<li class="nav-item"> <a class="nav-link active" data-toggle="modal" data-target="#login-modal" href="#"><i class="fa fa-user-o" aria-hidden="true"></i>LOGIN / REGISTER</a> </li>
<li class="nav-item"> <a style="color: white;" class="nav-link btn btn-danger" href="#">REGISTER AS A CHEF</a> </li>
#else
<li class="dropdown">
<a style="border-radius: 20px;" href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="drop-outside"><a href="/customer/home">
<i class="fa fa-user" aria-hidden="true"></i>
View Profile
</a>
</li>
<li class="drop-outside">
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out" aria-hidden="true"></i>
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<!-- /.navbar -->
</header>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img class="img-circle center-block" id="img_logo" src="images/circle-logo.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="fa fa-times fa-2x" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form" method="POST" action="{{ route('login') }}">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="fa fa-chevron-right"></div>
<span id="text-login-msg">Login to Continue..</span>
</div>
<br>
{{ csrf_field() }}
<input id="login_username" name="email" class="form-control" type="email" placeholder="Email" required>
<input id="login_password" name="password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<br>
#if ($errors->has('email'))
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('email') }}</strong>
</span>
#endif
#if ($errors->has('password')){
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block login-btn">Login</button>
</div>
<div><p style="text-align: center; font-weight: bold; padding-top: 15px;">OR</p></div>
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
<!-- Begin | Lost Password Form -->
<form id="lost-form" style="display:none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="fa fa-chevron-right"></div>
<span id="text-lost-msg">Enter your email</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;" method="POST" action="{{ route('register') }}">
{{ csrf_field() }}
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="fa fa-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="name" name="name" class="form-control" type="text" placeholder="Username" required>
<input id="email" class="form-control" name="email" type="email" placeholder="E-Mail" required>
<input id="password" class="form-control" name="password"type="password" placeholder="Password" required>
<input id="password-confirm" class="form-control" name="password_confirmation" type="password" placeholder="Confirm Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link pull-right">Log In</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL LOGIN -->
<script type="text/javascript">
#if (count($errors) > 0)
$('#login-modal').modal('show');
alert("Hello");
#endif
</script>
I am new to travel and I don't know what's wrong.Any help will be appreciated.

Assuming your JavaScript and jQuery is Correct and that you have Bootstrap JS installed.
You can do the follow which will run the script if any errors are detected
<script>
#if ($errors->any())
$('#exampleModal').modal('show');
#endif
</script>

MVC JavaScript code does not work

I'm trying to do the mail box. Codes I want to hide my mail I get mail all the details of the show and yet does not work.
Show/Hidden class id='Detay'
Nuget Package = MimeKit
Show part
Clicked javascript I want to hide the data-side was the same.
<span onclick="Goster()" class="sender" data-id="#item.MessageId" title="#item.From">#item.From </span>
It was to hideShow/hidden
<div id="Detay" data-id="#item.MessageId" style="display: none">
hidden button
<div class="messagebar-item-left">
<a onclick="Gizle()" href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left bigger-110 middle blue"></i>
<b onclick="Gizle" class="middle bigger-110">Geri</b>
</a>
</div>
javascript code
<script type="text/javascript">
function Gizle() {
var divObject = document.getElementById('Detay');
divObject.style.display = 'none';
}
function Goster() {
var divObject = document.getElementById('Detay');
divObject.style.display = 'block';
}
</script>

each html element must have a unique id,
in your code you are assigning the same id to multiple div elements inside a foreach loop! you have to make it unique by adding a number for example;
<!--Show / Hidden to be part-->
<div id="Detay#(item.MessageId)" style="display: none">
when you will call show/hide you can parse the id like below:
<span onclick="Goster('Detay#(item.MessageId)')" class="sender" title="#item.From">#item.From </span>
and for hiding use this:
<b onclick="Gizle('Detay#(item.MessageId)')" class="bigger-110 middle">Geri</b>
finally you have to modify you javascript to accept the id parameter:
<script type="text/javascript">
function Gizle(id) {
$('#'+id).toggle(false);
}
function Goster(id) {
$('#' + id).toggle(true);
}
</script>
[UPDATE]
Full solution:
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon">#Html.ActionLink("Ana Sayfa", "Index", "Home")</i>
</li>
<li class="active">Mail Kutusu</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="col-xs-12">
<div class="tabbable">
<ul id="inbox-tabs" class="inbox-tabs nav nav-tabs padding-16 tab-size-bigger tab-space-1">
<li class="active">
<a data-toggle="tab" href="#inbox" data-target="inbox">
<i class="blue ace-icon fa fa-inbox bigger-130"></i>
<span class="bigger-110">Gelen Kutusu</span>
</a>
</li>
<li>
<a data-toggle="tab" href="#sent" data-target="sent">
<i class="orange ace-icon fa fa-location-arrow bigger-130"></i>
<span class="bigger-110">Sent</span>
</a>
</li>
</ul>
<div class="tab-content no-border no-padding">
<div id="inbox" class="tab-pane in active">
<div class="message-container">
<div class="message-navbar clearfix">
<div class="message-bar">
<div class="message-infobar" id="id-message-infobar">
<span class="blue bigger-150">Mesaj Kutusu</span>
</div>
</div>
</div>
<div class="message-list-container">
<div class="message-list">
<!--<div class="message-item message-unread"> okunmamış-->
#foreach (var item in client.OrderByDescending(p => p.Date))
{
<div class="message-item">
<label class="inline">
<span class="lbl"></span>
</label>
<!--Show/Hidden Click-->
<span onclick="Goster('detay#(item.MessageId)')" class="sender" title="#item.From">#item.From </span>
<span class="time">#mvcHelper.saatAyarla(item.Date)</span>
#if (item.Attachments.Any())
{
<span class="attachment">
<i class="ace-icon fa fa-paperclip"></i>
</span>
}
<span class="summary">
<span onclick="Goster('detay#(item.MessageId)')" class="text">
#item.Subject
</span>
</span>
</div>
<!--Show / Hidden to be part-->
<div id="detay#(item.MessageId)" style="display: none">
<div class="message-container">
<div id="id-message-list-navbar" class="message-navbar clearfix hide">
<div>
<div class="messagebar-item-right">
<div class="inline position-relative">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Sort
<i class="ace-icon fa fa-caret-down bigger-125"></i>
</a>
<ul class="dropdown-menu dropdown-lighter dropdown-menu-right dropdown-100">
<li>
<a href="#">
<i class="ace-icon fa fa-check green"></i>
Date
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-check invisible"></i>
From
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-check invisible"></i>
Subject
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="id-message-item-navbar" class="message-navbar clearfix">
<div class="message-bar">
</div>
<div>
<div class="messagebar-item-left">
<a href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left blue bigger-110 middle"></i>
<b onclick="Gizle('detay#(item.MessageId)')" class="bigger-110 middle">Geri</b>
</a>
</div>
<div class="messagebar-item-right">
<i class="ace-icon fa fa-clock-o bigger-110 orange"></i>
<span class="grey">#mvcHelper.saatAyarla(item.Date)</span>
</div>
</div>
</div>
<div id="id-message-new-navbar" class="hide message-navbar clearfix">
<div>
<div class="messagebar-item-left">
<a onclick="Gizle()" href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left bigger-110 middle blue"></i>
<b onclick="Gizle" class="middle bigger-110">Geri</b>
</a>
</div>
</div>
</div>
<div class="message-list-container">
<div class="message-list hide" id="message-list"></div>
<div class="message-content" id="id-message-content">
<div class="message-header clearfix">
<div class="pull-left">
<span class="blue bigger-125"> #item.Subject </span>
<div class="space-4"></div>
<i class="ace-icon fa fa-star orange2"></i>
<img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32">
#item.From
<i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
<span class="time grey">#mvcHelper.saatGoster(item.Date)</span>
</div>
</div>
<div class="hr hr-double"></div>
<div style="position: relative;" class="message-body ace-scroll">
<div style="display: block; height: 150px;" class="scroll-track scroll-visible scroll-active">
<div style="height: 127px; top: 0px;" class="scroll-bar"></div>
</div>
<div style="max-height: 150px;" class="scroll-content">
<p>
#item.GetTextBody(TextFormat.Plain)
</p>
</div>
</div>
<div class="hr hr-double"></div>
#if (item.Attachments.Any())
{
<div class="message-attachment clearfix">
<div class="attachment-title">
<span class="blue bolder bigger-110">Ekler</span>
<span class="grey">#item.Attachments.Count()</span>
<div class="inline position-relative">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="ace-icon fa fa-caret-down bigger-125 middle"></i>
</a>
<ul class="dropdown-menu dropdown-lighter">
<li>
Download all as zip
</li>
<li>
Display in slideshow
</li>
</ul>
</div>
</div>
<ul class="attachment-list pull-left list-unstyled">
#foreach (var attachment in item.Attachments)
{
<li>
<a href="#" class="attached-file">
<i class="ace-icon fa fa-file-o bigger-110"></i>
<span class="attached-name">#mvcHelper.getAttachmentName(attachment.ToString())</span>
</a>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-download bigger-125 blue"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-trash-o bigger-125 red"></i>
</a>
</span>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
</div>
}
<!--ForEach End-->
</div>
</div>
<div class="message-footer clearfix">
<div class="pull-left"> Total</div>
<div class="pull-right">
<div class="inline middle"> page 1 of 16 </div>
<ul class="pagination middle">
<li class="disabled">
<span>
<i class="ace-icon fa fa-step-backward middle"></i>
</span>
</li>
<li class="disabled">
<span>
<i class="ace-icon fa fa-caret-left bigger-140 middle"></i>
</span>
</li>
<li>
<span>
<input value="1" maxlength="3" type="text">
</span>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-caret-right bigger-140 middle"></i>
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-step-forward middle"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="hide message-footer message-footer-style2 clearfix">
<div class="pull-left"> </div>
<div class="pull-right">
<div class="inline middle"> </div>
<ul class="pagination middle">
<li class="disabled">
<span>
<i class="ace-icon fa fa-angle-left bigger-150"></i>
</span>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-angle-right bigger-150"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- /.tab-content -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function Gizle(detayId) {
$('#'+detayId).toggle(false);
}
function Goster(detayId) {
$('#'+detayId).toggle(true); }
</script>

AJAX HTML breaks Divider

I am using AJAX and HTML to pull a name from a POST request, and then returning the data to fill a div with the response.
The data returns, but for some reason it breaks the div and adds a New Line to the equation, making the page look unprofessional.
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function getSummary(id)
{
$.ajax({
type: "POST",
url: 'http://localhost/notyouraveragebear',
data: "username="+id,
success: function(data) {
document.getElementById("personname").innerText=data;
}
});
}
getSummary(1234);
</script>
<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>ArchServers Control Panel</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.html">ArchServers Control Panel</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<i class="fa fa-envelope"></i> <b class="caret"></b>
<ul class="dropdown-menu message-dropdown">
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-footer">
Read All New Messages
</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-bell"></i> <b class="caret"></b>
<ul class="dropdown-menu alert-dropdown">
<li>
Alert Name <span class="label label-default">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-primary">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-success">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-info">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-warning">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-danger">Alert Badge</span>
</li>
<li class="divider"></li>
<li>
View All
</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user"></i> <div id = "personname"><p></p></div> <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li>
<i class="fa fa-fw fa-envelope"></i> Inbox
</li>
<li>
<i class="fa fa-fw fa-gear"></i> Settings
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active">
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-bar-chart-o"></i> Charts
</li>
<li>
<i class="fa fa-fw fa-table"></i> Tables
</li>
<li>
<i class="fa fa-fw fa-edit"></i> Forms
</li>
<li>
<i class="fa fa-fw fa-desktop"></i> Bootstrap Elements
</li>
<li>
<i class="fa fa-fw fa-wrench"></i> Bootstrap Grid
</li>
<li>
<i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
Dropdown Item
</li>
<li>
Dropdown Item
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-file"></i> Blank Page
</li>
<li>
<i class="fa fa-fw fa-dashboard"></i> RTL Dashboard
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Dashboard <small>Statistics Overview</small>
</h1>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Dashboard
</li>
</ol>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-info-circle"></i> <strong>Like SB Admin?</strong> Try out SB Admin 2 for additional features!
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">26</div>
<div>New Comments!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">12</div>
<div>New Tasks!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">124</div>
<div>New Orders!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-support fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">13</div>
<div>Support Tickets!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> Area Chart</h3>
</div>
<div class="panel-body">
<div id="morris-area-chart"></div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Donut Chart</h3>
</div>
<div class="panel-body">
<div id="morris-donut-chart"></div>
<div class="text-right">
View Details <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> Tasks Panel</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">
<span class="badge">just now</span>
<i class="fa fa-fw fa-calendar"></i> Calendar updated
</a>
<a href="#" class="list-group-item">
<span class="badge">4 minutes ago</span>
<i class="fa fa-fw fa-comment"></i> Commented on a post
</a>
<a href="#" class="list-group-item">
<span class="badge">23 minutes ago</span>
<i class="fa fa-fw fa-truck"></i> Order 392 shipped
</a>
<a href="#" class="list-group-item">
<span class="badge">46 minutes ago</span>
<i class="fa fa-fw fa-money"></i> Invoice 653 has been paid
</a>
<a href="#" class="list-group-item">
<span class="badge">1 hour ago</span>
<i class="fa fa-fw fa-user"></i> A new user has been added
</a>
<a href="#" class="list-group-item">
<span class="badge">2 hours ago</span>
<i class="fa fa-fw fa-check"></i> Completed task: "pick up dry cleaning"
</a>
<a href="#" class="list-group-item">
<span class="badge">yesterday</span>
<i class="fa fa-fw fa-globe"></i> Saved the world
</a>
<a href="#" class="list-group-item">
<span class="badge">two days ago</span>
<i class="fa fa-fw fa-check"></i> Completed task: "fix error on sales page"
</a>
</div>
<div class="text-right">
View All Activity <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-money fa-fw"></i> Transactions Panel</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Order #</th>
<th>Order Date</th>
<th>Order Time</th>
<th>Amount (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>3326</td>
<td>10/21/2013</td>
<td>3:29 PM</td>
<td>$321.33</td>
</tr>
<tr>
<td>3325</td>
<td>10/21/2013</td>
<td>3:20 PM</td>
<td>$234.34</td>
</tr>
<tr>
<td>3324</td>
<td>10/21/2013</td>
<td>3:03 PM</td>
<td>$724.17</td>
</tr>
<tr>
<td>3323</td>
<td>10/21/2013</td>
<td>3:00 PM</td>
<td>$23.71</td>
</tr>
<tr>
<td>3322</td>
<td>10/21/2013</td>
<td>2:49 PM</td>
<td>$8345.23</td>
</tr>
<tr>
<td>3321</td>
<td>10/21/2013</td>
<td>2:23 PM</td>
<td>$245.12</td>
</tr>
<tr>
<td>3320</td>
<td>10/21/2013</td>
<td>2:15 PM</td>
<td>$5663.54</td>
</tr>
<tr>
<td>3319</td>
<td>10/21/2013</td>
<td>2:13 PM</td>
<td>$943.45</td>
</tr>
</tbody>
</table>
</div>
<div class="text-right">
View All Transactions <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/plugins/morris/raphael.min.js"></script>
<script src="js/plugins/morris/morris.min.js"></script>
<script src="js/plugins/morris/morris-data.js"></script>
</body>
</html>
When i remove the div id personname, and insert just text there, such as my name Christopher, the content on the page appears correctly, without new lines.
As soon as I request the data and its returned and changed with the .textContent, the page adds line breaks and the page looks silly.
Any advice on this?
Here is the page with the replaced content.
http://imgur.com/a/29zAk
Here is the page with static content.
http://imgur.com/jPFLmJA
here is my server.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use('/client', express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen(80, function () {
console.log('HTTPD Server Started');
});
app.post('/notyouraveragebear', function (req, res) {
res.send('Christopher');
console.log(req.body);
});
Thanks.

Is it possible to have a popup when clicking on the menu with AngularJS?

I actually have this menu and I want to add a popup authentication when clicking on the "Dashboard" word... is this possible? Here is the code of the index page and i don't know what to change...
<ng-include src="'views/layout/header.html'"></ng-include>
<nav id="headernav" class="navbar ng-hide" role="navigation" ng-show="getLayoutOption('layoutHorizontal') && !layoutLoading">
<div class="nav">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<i class="fa fa-reorder"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" ng-class="{'large-icons-nav': getLayoutOption('layoutHorizontalLargeIcons')}" id="horizontal-navbar">
<ul ng-controller="NavigationController" id="top-nav" class="nav navbar-nav">
<li ng-repeat="item in menu"
ng-if="!item.hideOnHorizontal"
ng-class="{ hasChild: (item.children!==undefined),
active: item.selected,
open: (item.children!==undefined) && item.open,
'nav-separator': item.separator==true }"
ng-include="'templates/nav_renderer_horizontal.html'"
></li>
</ul>
</div>
</nav>
<div id="wrapper">
<div id="layout-static">
<div class="static-sidebar-wrapper" ng-show="!layoutLoading">
<nav class="static-sidebar" role="navigation">
<ul ng-controller="NavigationController" id="sidebar" sticky-scroll="50">
<li id="search" ng-cloak>
<a href="">
<i class="fa fa-binoculars opacity-control"></i>
</a>
<form
ng-click="$event.stopPropagation()"
ng-submit="goToSearch()">
<input type="text" ng-model="searchQuery" class="search-query" placeholder="Type to filter..." />
<button type="submit" ng-click="goToSearch()"><i class="fa fa-binoculars"></i></button>
</form>
</li>
<li ng-repeat="item in menu"
ng-class="{ hasChild: (item.children!==undefined),
active: item.selected,
open: (item.children!==undefined) && item.open,
'nav-separator': item.separator==true,
'search-focus': (searchQuery.length>0 && item.selected) }"
ng-show="!(searchQuery.length && !item.selected)"
ng-include="'templates/nav_renderer.html'"
></li>
</ul>
</nav> <!-- #sidebar-->
</div>
<div class="static-content-wrapper">
<div class="static-content">
<div id="wrap" ng-view="" class="mainview-animation animated">
</div> <!--wrap -->
</div>
<footer role="contentinfo" ng-show="!layoutLoading" ng-cloak>
<div class="clearfix">
<ul class="list-unstyled list-inline pull-left">
<li></li>
</ul>
<button class="pull-right btn btn-default btn-sm hidden-print" back-to-top style="padding: 1px 10px;"><i class="fa fa-angle-up"></i></button>
</div>
</footer>
</div>
</div>
</div>
Here is a Picture

Here is a Demo for Dialogs in AngularJS.
I think, the custom Dialog is what you search for.

Bootstrap 3: Layout Broken in IE9, can't figure out why

firstly here's the link: http://isotopethemes.com/extenso/footer-15.html
Footer breaks in IE9 only, works fine in all other browsers. Spent hours trying to figure out. IE is not good in finding issues.
HTML Code:
<footer id="footer-15">
<div class="footer-15-main">
<div class="container">
<div class="row">
<div class="footer-15-item col-lg-3 col-md-3 col-sm-3">
<h3 class="footer-15-heading"> Connect With Us </h3>
<p> Follow us on social media </p>
<div class="social">
<a href="#" class="button">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="button">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="button">
<i class="fa fa-linkedin"></i>
</a>
<a href="#" class="button">
<i class="fa fa-google-plus"></i>
</a>
</div><!-- /.social -->
<div class="clearfix"></div>
</div><!-- /.footer-15-item -->
<div class="footer-15-item col-lg-3 col-md-3 col-sm-3">
<h3 class="footer-15-heading">Newsletter Signup </h3>
<p>Signup for our newsletter</p>
<form>
<input type="text" class="footer-15-input" placeholder="Enter Your Email...">
<button class="btn">
<i class="fa fa-search"></i>
</div><!-- /.footer-15-item -->
<div class="footer-15-item col-lg-3 col-md-3 col-sm-3">
<h3 class="footer-15-heading">Important Links</h3>
<ul class="footer-15-list links">
<li>More About Us </li>
<li>Checkout Our Works</li>
<li>Our Locations</li>
</ul><!-- /.footer-15-list -->
<div class="clearfix"></div>
</div><!-- /.footer-15-item -->
<div class="footer-15-item col-lg-3 col-md-3 col-sm-3">
<h3 class="footer-15-heading"> Contact Us </h3>
<ul class="footer-15-list contact">
<li>
<i class="fa fa-map-marker"></i>
221B Baker Street,
London.
</li>
<li>
<i class="fa fa-phone"></i>
+07745 352 515
</li>
<li>
<i class="fa fa-envelope"></i>
contact#isotopethemes.com<br>
</li>
</ul><!-- /.footer-15-list -->
<div class="clearfix"></div>
</div><!-- /.footer-15-item -->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.footer-15-main -->
<div class="footer-15-bottom">
<div class="container">
<div class="row">
<div class="item col-lg-12 col-md-12 col-sm-12">
<p> © Copyright 2014 Extenso. All Rights Reserved. Designed by isotopethemes
</div><!-- /.item -->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.footer-15-bottom -->
</footer><!-- /#footer-15 -->