We are building a Spring Boot + Thymeleaf App, running on Tomcat 9 where an HTML page :
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
is being rendered as :
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
</ul></li><li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</body></html>
Please suggest as correct rendition of lists is needed for Bootstrap NavBar.
Related
I've a page in MVC which I want to reload automatically every 2 seconds without doing a refresh, I have seen examples
with Ajax but all referenced using buttons or in POST-GET events. I only want it to reload without refresh,
What can I do to perform that function?
Thank you
This's my view
#model MVC_PCMonitoring_Dash.Models.TablesPCModels
#{
ViewBag.Title = "Home Page";
}
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="~/Content/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
</div>
<div class="img bg-wrap text-center py-4" style="background-color: #A40033;">
<div class="user-logo">
<div class="img" style="background-image: url(Images/logo.jpg)"></div>
<h3>TOTAL PC</h3>
</div>
</div>
<ul class="list-unstyled components mb-5">
<li class="active">
Home
</li>
<li>
PC 1
</li>
<li>
PC 2
</li>
<li>
Exit
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<p align="right">#DateTime.Now</p>
<center>
<img src="~/Images/welcome.png" alt="centered image" />
</center>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use timer and ajax in this case.
setInterval(function(){ --ajax call to refresh---},2000) //2000 means 2 min
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
#foreach ($tasks as $task)
<li>
<a href="/tasks/{{ $task->id }}">
{{ $task->body }}
</a>
</li>
}
#endforeach
</ul>
</body>
</html>
This is lesson episode 6 from Laracasts (beginner's section). My code looks exactly like what's being shown on the instructor's screen but I get an extra } after each hyperlink. It took me a while to figure out how he divided the views between folders too. Some pretty good info but the instructor needs to slow down a bit. I probably missed something here too but I've rewinded and rewatched at least 5 times now.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
#foreach ($tasks as $task)
<li>
<a href="/tasks/{{ $task->id }}">
{{ $task->body }}
</a>
</li>
#endforeach
</ul>
</body>
</html>
Try this. You don't need } after closing tag
In my project the dropdown menu won't work.
the code is like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{!! MaterializeCSS::include_full() !!}
<script>
$( document ).ready(function() => {
$('.dropdown-button').dropdown();
});
</script>
<title>...</title>
</head>
this is the header of the page
this is what the dropdown look like
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
I put materialize css into my project using composer, and did what was listed on the official materialize website
I hope someone can help me out
Try and move your script (the one below) to the bottom of your body.
<script>
$( document ).ready(function() => {
$('.dropdown-button').dropdown();
});
</script>
I've found this similar error mentioned since Foundation 3, usually because foundation.min.js was not included. I have this included but links in the dropdown menu are not working.
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/foundation.min.css" />
<link rel="stylesheet" href="includes/style.css" />
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>dashboard</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li>chapters</li>
<li>sections</li>
<li>paragraphs</li>
<li>references</li>
<li>annotations</li>
<li>help</li>
<li class="has-dropdown">
Create
<ul class="dropdown">
<li>new chapter</li>
<li>new section</li>
<li>new paragraph</li>
<li>new annotation</li>
</ul>
</li>
</ul>
</section>
</nav>
</body>
</html>
Am I missing a setting? I've seen preventDefault() mentioned as a possible culprit, but why on earth would the default click behavior be prevented...for clickable menu links?
The $(document).foundation(); line must be invoked before the closing BODY tag, not HEAD tag. I was loading foundation before the DOM elements had loaded.
This explains the whacky behavior.
While loading a view all assets are wrongly transferred with a MIME type text/html
So on the console I see:
Resource interpreted as Script but transferred with MIME type text/html: "http://trivia.dev/guest". guest:11
Resource interpreted as Image but transferred with MIME type text/html: "http://trivia.dev/guest". guest:71
Uncaught SyntaxError: Unexpected token <
The syntax error is on the first line of the html file, which means that it is read as a script, instead of HTML. For some reason this only occurs when I am pulling a script in my HTML.
My master layout:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>#yield('title') | Royal Trivia</title>
<link rel="icon" href="{{URL::to('img/favicon.png')}}">
<link rel="stylesheet" href="{{URL::to('css/style.css')}}">
<script src="{{URL::to('js/bundle.min.js')}}"></script>
</head>
<body>
<div class="flash">{{Session::get('flash_message')}}</div>
#yield('content')
</body>
</html>
Generated HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>שחק וזכה | Royal Trivia</title>
<link rel="icon" href="http://trivia.dev/img/favicon.png">
<link rel="stylesheet" href="http://trivia.dev/css/style.css">
<script src="http://trivia.dev/js/bundle.min.js"></script>
</head>
<body>
<div class="flash"></div>
<header>
<div class="container">
<ul class="lang-icons">
<li><img src="" alt="hebrew"/></li>
<li><img src="" alt="english"/></li>
<li><img src="" alt="spanish"/></li>
</ul> <!--lang-icons-->
<a class="logo" href="/">
<img src="http://trivia.dev/img/mobile/logo.png" alt="RoyalTrivia"/>
</a><!--logo-->
<div class="users-count">
<small>כרגע באתר 1000 משתמשים</small>
</div>
</div><!--container-->
</header><div class="cta-strip">
<div class="container">
<img class=mobile src="http://trivia.dev/img/mobile/login_image.png" alt="people"/>
<div class="cta-text">
<h1>משחק הטריוויה שמטריף את כולם</h1>
<h4>הידע שלכם שווה כסף</h4>
<h5>ענו על 3 שאלות טריוויה</h5>
<h5>אם עניתם נכון ומהר יותר מהמתחרה מולכם - זכיתם</h5>
<h3>בואו להרוויח כסף</h3>
</div> <!--cta-text--> </div> <!--container-->
</div> <!--cta-strip--><div class="buttons-strip">
<div class="container">
<div class="cta-text">
<h1>משחק הטריוויה שמטריף את כולם</h1>
<h4>הידע שלכם שווה כסף</h4>
<h5>ענו על 3 שאלות טריוויה</h5>
<h5>אם עניתם נכון ומהר יותר מהמתחרה מולכם - זכיתם</h5>
<h3>בואו להרוויח כסף</h3>
</div> <!--cta-text--> <div class="CTA-btns">
<div class="login-btn clearfix">
<small>משתמש רשום?</small>
<a class="star-btn login-link" href="#/login"><span>כניסה</span></a>
</div><!--login-btn-->
<div class="signup-btn clearfix">
<small>לא רשום?</small>
<a class="star-btn signup-link" href="#/signup"><span>הרשמה</span></a>
</div><!--signup-btn-->
</div><!--CTA-btns-->
</div><!--container-->
</div><!--buttons-strip--><footer>
<div class="container">
<ul class="social-icons">
<li><a href='facebook.com'><img src='someimage.png' alt='email'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt=''/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='youtube'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='google+'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='twitter'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='facebook'/></a></li>
</ul>
<p>© All rights reserved to Royal Trivia</p>
</div><!--container-->
</footer>
</body>
</html>
I found the problem thanks to #Unnawut's advice: The file name was incorrect (should have been bundle.js).
The weird thing was that I didn't get a 404, but was redirected to the /guest route which caused the MIME-type error and the syntax error.
I've looked through my files and found a 404 handler that redirected back to the homepage.