Hi I want to use a custom fragment in thymeleaf
I have a layout file which is not loaded by other hmtl files, main.html:
I want to use a custom fragment in thymeleaf
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SFJ - Egy sztori minden napra</title>
<link rel="stylesheet" href="../static/css/blog.css" th:href="#{/css/blog.css}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Kezdőoldal</li>
<li class="">Sztorik</li>
<li class="">Bloggerek</li>
</ul>
<div class="navbar-text navbar-right">
Üdvözlünk <span sec:authentication="name">Anonymous </span>
<form sec:authorize="isAuthenticated()" id="frmlogout" th:action="#{/logout}" method="post" class="form-inline">
| Kijelentkezés
</form>
</div>
</div>
</div>
</nav>
<div layout:fragment="loginContent">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<footer>
<p>San Franciscoból Jöttem - Az eredeti template összeállítója: http://therealdanvega.com</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
</body>
</html>
I try to load it for example from login.html:
<!DOCTYPE html>
<html lang="en" layout:decorator="layouts/main">
<head>
<title>SFJ - Minden napra egy sztori</title>
</head>
<body>
<div layout:fragment="loginContent">
<form name="login" th:action="#{/login}" method="post" class="form-signin">
<h2 class="form-signin-heading">Kérlek jelentkezz be</h2>
<div id="err" th:if="${param.error}" class="alert alert-danger">Hibás felhasználói név és jelszó</div>
<div th:if="${param.logout}" class="alert alert-success">Sikeresen kijelentkeztél</div>
<label for="username" class="sr-only">Felhasználói név</label>
<input type="text" id="username" name="username" class="form-control" placeholder="Felhasználói név" required="true" />
<label for="password" class="sr-only">Jelszó</label>
<input type="password" id="password" name="password" class="form-control" placeholder="Jelszó" required="true" />
<div class="checkbox">
<label> <input id="remember-me" name="remember-me" type="checkbox" /> Emlékezz rám
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Bejelentkezés</button>
</form>
</div>
</body>
</html>
It doesn't not find the main.html, does not take into account...
It's loading only the content from login.html
Does anyone have any ideas why?
Related
The HTML spat out from a view has a lot of empty spaces and empty lines.
What and where do I need to type to make grails not to generate the empty spaces or empty lines?
Thanks!
Just for example. I have an empty domain. And then use generate-all to create all the controller and view. This is the HTML spat out from the index.gsp. If you use your mouse to highlight the HTML, you will see a lot of empty spaces.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
NewGroovyClass List
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/x-ico" href="/assets/favicon.ico"/>
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
<meta name="layout" content="main"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" role="navigation">
<a class="navbar-brand" href="/#"><img src="/assets/grails.svg" alt="Grails Logo"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" aria-expanded="false" style="height: 0.8px;" id="navbarContent">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</nav>
Skip to content…
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="/">Home</a></li>
<li>New NewGroovyClass</li>
</ul>
</div>
<div id="list-newGroovyClass" class="content scaffold-list" role="main">
<h1>NewGroovyClass List</h1>
<div class="pagination">
</div>
</div>
<div class="footer row" role="contentinfo">
<div class="col">
<a href="http://guides.grails.org" target="_blank">
<img src="/assets/advancedgrails.svg" alt="Grails Guides" class="float-left"/>
</a>
<strong class="centered">Grails Guides</strong>
<p>Building your first Grails app? Looking to add security, or create a Single-Page-App? Check out the Grails Guides for step-by-step tutorials.</p>
</div>
<div class="col">
<a href="http://docs.grails.org" target="_blank">
<img src="/assets/documentation.svg" alt="Grails Documentation" class="float-left"/>
</a>
<strong class="centered">Documentation</strong>
<p>Ready to dig in? You can find in-depth documentation for all the features of Grails in the User Guide.</p>
</div>
<div class="col">
<a href="https://grails-slack.cfapps.io" target="_blank">
<img src="/assets/slack.svg" alt="Grails Slack" class="float-left"/>
</a>
<strong class="centered">Join the Community</strong>
<p>Get feedback and share your experience with other Grails developers in the community Slack channel.</p>
</div>
</div>
<div id="spinner" class="spinner" style="display:none;">
Loading…
</div>
<script type="text/javascript" src="/assets/jquery-3.3.1.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/popper.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
</body>
</html>
I've encountered an error while running my application. I'm seeing this error on my console when I run the application
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:68
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!------ Include the above in your HEAD tag ---------->
<div class="sidenav">
<div class="login-main-text">
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form>
<div class="form-group">
<label>User Name</label>
<input type="text"id="userid" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
</div>
<input type="button" class="btn btn-black" value="Login" onclick="NullValidator()" #*window.location='Url.Action("Dashboard", "Dashboard")*# />
#*<button type="submit" class="btn btn-black">Login</button>*#
<button type="submit" class="btn btn-secondary">Register</button>
<div class="form-group">
<a style="float:left">Forget Password ? </a>
</div>
</form>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
I've tried searching for the fn here but I didn't use it in this page and also on other pages of the application. So I can't determine the cause of the error.
I've solved my problem by adding this code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
So my application's default layout creates a link to homepage that is I assume determined by either bootstrap or one of javascript files. Anyway, this is the code currently for my layout:
Layout CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Delivery</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Delivery</p>
</footer>
</div>
</body>
</html>
I removed all the references to bootstrap and js files that I have hoping to get rid of the links showing up, however whenever I execute my application, I end up with this above the view that I made:
Page code when it's ran
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - Delivery</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
Is there somewhere else besides the layout file I have to make changes in order for this not to run?
EDIT:
View Code
#using System;
#using Dostava.Data.Models;
#model Dostava.Data.ViewModel.KorisnikViewModel
<!doctype html>
<html>
<head>
<title>KorisnikMenu</title>
</head>
<body>
<div class="welcome">
Dobrodosli: <br />
#Model.Korisnik.KorisnickoIme
</div>
<div class="menu">
<div class="menubtn">
<input type="button" value="Nova narudzba" onclick="location.href='/Home/Glavna'" />
</div>
<div class="menubtn">
<input type="button" value="Obavijesti" onclick="location.href='/Home/Glavna'" />
</div>
<div class="menubtn">
<input type="button" value="Izmjena podataka" onclick="location.href='/Home/Edit?id=#Model.Korisnik.Id'" />
</div>
<div class="menubtn">
<input type="button" value="Log out" onclick="location.href='/Home/Glavna'" />
</div>
</div>
<div class="filter">
Pretraga narudžbi:
<hr style="border:1px solid black;" />
Aktivne <input type="checkbox" value="Aktivne" />
Zavrsene <input type="checkbox" value="Zavrsene" />
Na cekanju <input type="checkbox" value="NaCekanju" />
Otkazane <input type="checkbox" value="Otkazane" />
Neuspjesne <input type="checkbox" value="Neuspjesne" />
<input type="text" id="sifratxt" placeholder="Sifra narudzbe..." style="width:20%;"/>
<input type="button" id="filterbtn" value="Primjeni filter" style="width:20%;" />
</div>
<div class="narudzbe">
<hr style="border:1px solid black;" />
<p style="font-size:18px;">Vaše narudžbe:</p>
<table class="tabela">
<tr id="tabelatr">
<td>Sifra Narudzbe</td>
<td>Datum Narudzbe</td>
<td>Primaoc</td>
<td>Status Naruzdbe</td>
<td>Cijena Narudzbe</td>
<td>Detalji Narudzbe</td>
<td>Otkazi</td>
</tr>
#foreach (Narudzbe n in Model.narudzbe)
{
<tr>
<td>#n.SifraNarudzbe</td>
<td>#n.DatumNarudzbe</td>
<td>#n.Primaoc.Ime #n.Primaoc.Prezime </td>
<td>#n.StatusNarudzbe.Naziv</td>
<td>#n.CijenaNarudzbe</td>
<td><input type="button" value="Detalji" onclick="location.href='/Home/DetaljiNarudzbe?id=#n.Id'"></td>
<td><input type="button" value="Otkazi" onclick="location.href='/Home/OtkaziNarudzbu?id=#n.Id'"></td>
</tr>
}
</table>
</div>
</body>
</html>
EDIT 2:
View_Start code
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - Delivery</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
</body>
</html>
I want to develop Login Form Header(header.cshtml) that is avialble in Layout.cshtml(shared),
My Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="~/Scripts/boxOver.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="main_container">
#Html.Partial("_Header")
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_Footer")
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
and the _Header.cshtml like this
#{
Layout = null;
}
<div id="header">
<input name="login_username" class="textbox" placeholder="Username" type="text">
<input name="login_password" class="textbox" placeholder="Pasword" type="text">
<input name="login" class="button" value="login" type="submit">
<input name="login" class="button" value="Register" type="submit">
<div id="logo"> <img src="images/logo.png" alt="" border="0" width="182" height="85" /> </div>
</div>
Here _Header.cshtml is a shared partial view. I want to develop this view with model and controller with database connection in master(Layout.cshtml) as partial view Using MVC 4 in .net.
The Header is like the below image,Header Html Layout Image
Has anyone ever run into the problem of not neing able to type in spaces when using a text input type in jquery-mobile
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css"/>
<link rel="stylesheet" type="text/css" href="mobile-css.css"/>
</head>
<body>
<div data-role="dialog" data-theme="d">
<div data-role="header" data-theme="d"><h5 style="margin: 0.6em 10% 0.5em;">Comment</h5></div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
Try this simple example (tested on iPhone 5), which uses the latest version of jQuery Mobile at the moment (1.2.0), and let me know if this works:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>HEADER</h1>
</div>
<div data-role="content">
<h1>my content</h1>
<input type="text"/>
<a data-role="button" href="#mydialog" data-rel="dialog">OPEN DIALOG</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
<!-- YOUR DIALOG -->
<div data-role="dialog" data-theme="d" id="mydialog">
<div data-role="header" data-theme="d">
<h5 style="margin: 0.6em 10% 0.5em;">Comment</h5>
</div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
You should get the following:
Try typing spaces in the input textbox:
Then, click on the button OPEN DIALOG, which will lead you to your dialog box (the code you provided), and try inputting spaces inside the dialog's input textbox:
I hope this will work for you. Anyway, let me know about your results mate.