So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.
I have already tried changing the path (as suggested in other similar questions) to something like #{css/styles.css} instead of #{/css/styles.css} but that did not work.
Does anyone know if I'm missing something here?
Below is the HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="#{/css/styles.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">Don't have account?
Signup Now
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/loginscript.js}"></script>
</body>
where is your css folder?
css, js should be in static folder
src
main
java
resources
static
css
i18n
img
js
templates
Add this in your head tag:
<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="#{/styles.css}">
Note: Above code will only work if styles.css present in below path:
|--resources
|--static
|--css
|--styles.css
This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="#{../static/css/styles.css}". Thanks to everyone who answered!
Related
I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.
I have a Laravel application. I can't get modal forms to work. I'm basing the code entirely on this Bootsnipp example
To test things out, I have defined a 'test' route, that loads the view 'test.blade.php'. The Blade code is as follows:
#extends('layout')
#section('content')
Login
<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="loginmodal-container">
<h1>Login to Your Account</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
Register - Forgot Password
</div>
</div>
</div>
</div>
#stop
I have a layout.blade.php file where I'm adding the css file from that example.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ asset('css/homepage.css') }}" rel="stylesheet"/>
<link rel="stylesheet" href="{{ asset('css/table.css') }}" rel="stylesheet"/>
<link rel="stylesheet" href="{{ asset('css/modal.css') }}" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I have put the modal.css file in the 'public/css' folder. When I view the page source it displays the css file which shows it loads correctly. Yet, the modal box is not appearing.
Seeing your layout.blade.php I think that you've placed scripts in wrong order. bootstrap.js is depends to jquery so the order should be jquery in the first place:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!
If I add some custom tags in my spring-boot project, is it possible use them inside a thymeleaf-based file? For instance, if I had this tag defined in my TLD file (place in the directory /src/main/resources/static):
<tag>
<name>Input</name>
<tag-class>org.store.custom.taglib.form_control.InputTag</tag-class>
</tag>
Do I could use this in my view like that:
<p th:case="'Input'"><f:Input/></p>
Anyone knows if this is possible?
UPDATE
I try that, but when I run the application, the custom tags are not processed into the corresponding tags:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="/form.tld" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>cadastro</title>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">cadastro</h3>
</div>
<div class="panel-body">
<f:form th:attr="action=#{/__${command.getClass().getSimpleName()}__/cadastra}">
<div th:each="item : ${command['class'].declaredFields}">
<div th:each="item2 : ${item.declaredAnnotations}">
<div th:switch="${item2.annotationType().simpleName}" th:with="index=${itemStat.index}">
<p th:case="'Checkbox'"><f:Checkbox/></p>
<p th:case="'DataList'"><f:DataList/></p>
<p th:case="'Input'"><f:Input/></p>
<p th:case="'Radiobutton'"><f:Radiobutton/></p>
<p th:case="'Select'"><f:Select/></p>
<p th:case="'Textarea'"><f:Textarea/></p>
</div>
</div>
</div>
</f:form>
</div>
</div>
</body>
</html>
No. Thymeleaf's fundamental principle is that no alien tags should exist. (Only standard html). All dynamic content is added via custom attributes.
You can use this way
<input th:attr="your string message ='\'' + #{yourObject.meesage}" + '\''"/>
More examples: https://attacomsian.com/blog/thymeleaf-custom-html-attributes
I created a simple login page using ionic framework in Html.
<html>
<head>
<title>Login ionic form</title>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0- beta.9/css/ionic.css">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
</head>
<body>
<div class="bar bar-header bar-stable">
<h1 class="title">Welcome!</h1>
</div>
<div class="content has-header padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
</div>
<button class="button button-block button-positive">
Log In
</button>
<div class="row" align="center">
<div class="col col-50"><button class="button button-light">Forgot Pass? </button></div>
<div class="col col-50"><button class="button button-light"> Sign UP </button></div>
</div>
</div>
</body>
</html>
But when i convert it to HAML and run it with sinatra with thin i get formatting issues. The issue being it cuts off the bottom buttons.
I have no clue where to look or understand why this is happening.
!!!
%html
%head
%title Login ionic form
%link{href: "http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css", rel: "stylesheet", type: "text/css"}/
%meta{content: "width=device-width, user-scalable=no, minimal-ui", name: "viewport"}/
%body
.bar.bar-header.bar-stable
%h1.title Welcome!
.content.has-header.padding
.list.list-inset
%label.item.item-input
%input{placeholder: "Username", type: "text"}/
%label.item.item-input
%input{placeholder: "Password", type: "password"}/
%button.button.button-block.button-positive
Log In
.row{align: "center"}
.col.col-50
%button.button.button-light Forgot Pass?
.col.col-50
%button.button.button-light Sign UP
My current "stack" is
sinatra
haml
thin-server / have tried both development and production
my server "app"
%w[sinatra haml].each{|gem| require gem}
get '/' do
haml :index
end
HAML
HTML
HAML pastebin
http://pastebin.com/embed_js.php?i=sQ5Pc1YK
HTML pastebin
http://pastebin.com/embed_js.php?i=DP4rSx31
had to add some style: "padding-top: xxpx; padding-top: xxpx;" in places. I guess something is still broken somewhere. It looks fine and all but I feel robbed because I thought everything would format correctly when i converted from HTML > HAML.