I have a menu in thymleaf and i have a login - logout button inside it.
Here is the complete page of this menu:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RentIt Company</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
Sign in
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
Logout
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
The problem is, when i run, it complains with:
There was an unexpected error (type=Internal Server Error, status=500).
Exception evaluating SpringEL expression: "#authorization.expression('isAuthenticated()')"
It seems that, it does not recognize the isAuthenticated method, so how can i fix it?
You have to add the dependencies in you project, see below the piece of code in the build.gradle (I'm using gradle, adapt to your build system if different):
dependencies {
// your dependencies ...
compile "org.thymeleaf:thymeleaf-spring4:3.0.1.RELEASE"
compile "org.thymeleaf.extras:thymeleaf-extras-springsecurity4:3.0.1.RELEASE"
}
And also is necessary add a Spring Security extension to Thymeleaf in your configuration as follow:
#ComponentScan(basePackageClasses = HomeController.class)
public class ServletContextConfig extends WebMvcConfigurerAdapter {
#Bean
public TemplateEngine templateEngine(ApplicationContext applicationContext) {
final SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setEnableSpringELCompiler(true);
templateEngine.addDialect(new SpringSecurityDialect(););
templateEngine.setTemplateResolver(defaultTemplateResolver(applicationContext));
return templateEngine;
}
// other #Bean configurations ...
}
Change version of org.thymeleaf.extras as below
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity4</artifactId>
<version>3.0.1.RELEASE</version>
It will solve your problem
Related
I am developing an app which requires to show the data at every click on my different list of icon. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.
Here, I have tried with, but not working all..
<div class="col-xs-12 col-sm-6 col-md-3">
#foreach($Play as $post)
<div class="member">
<div class="member-img">
#if ($post->new_game)
<img src="{{ $post->new_game}}" alt="member" />#endif
</div>
<!-- .member-img end -->
<div class="member-info">
<h5>{{$post->friendly}}</h5>
<h6>{{$post->enemy}}</h6>
<div class="divider--line divider--center"></div>
<p>{{ $post->weapon }}</p>
<button type="button" class="btn btn--primary btn--link" href="#" data-toggle="modal" data-target="#myModal" id="{{$post->id }}" onclick="showDtails">Get more weapon detials</button>
</div>
</div>
#endforeach
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
</div>
<div class="modal-body">
<img src="/app/assets/images/team/thumb/1.jpg">
<p>{{$post->full_weapon}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
Html should like this
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Button
<button type="button" data-toggle="modal" data-target="#myModal" onclick="showDtails({{$post->id }})">Get more weapon detials</button>
call function with ajax
function showDtails(postid){
$.ajax({
url : '{{ route("getdata") }}',
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
data:{postid:postid},
success:function(data){
$('.modal-body').html(data)
},
});
}
Route.php
Route::post('/getdata', 'HomeController#getdata')->name('getdata');
Controller.php
public function getdata(Request $request){
$postid = $request->postid;
$post = Post::where('id',$postid)->first();
return view('getdata',compact('post'));
}
getdata.blade.php file
<div>
//whatever you write here or display here you'll get this data to your bootstrap model.
</div>
You will need to hit a get api containing the data you need, when the response is received fill the values with javascript and then display the modal
Just write the function in th script tag
function showDtails(){
$( ".modal-body" ).load("/admin/edit_location", function() {
$( "#myModal" ).modal('show');
});
}
where /admin/edit_location is the route to load view and below is the function of the route:
public function GetEditLocationsModal(){
return view('modals.admin_edit_current_location');
}
use javascript or js framework like vuejs or library like jquery
axios|ajax call to controller->controller send back corresponding data ->show in modal
//show modal
$('#myModal').modal('show');
//hide modal
$('#myModal').modal('hide')
sorry my english is not good but i help as i can.
update
look at this example you will get the idea
welcome.blade.php
<html lang="en">
<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">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>Document</title>
</head>
<body>
<ul class="list-group">
<li ><button type="button" id="btn1" class="btn btn-primary m-3" onclick="get('btn1')">button 1</button></li>
<li ><button type="button" id="btn2" class="btn btn-primary m-3" onclick="get('btn2')">button 2</button></li>
<li ><button type="button" id="btn3" class="btn btn-primary m-3" onclick="get('btn3')">button 3</button></li>
</ul>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="modalBody">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function get(btn) {
// send data and recive response from controller
axios.post('/getData',{ // send
btnClick:btn
}).then(res =>{ // recive
$('.modal').modal('show'); // open modal
$('#modalBody').empty().append(res.data); // append data in modal body
});
}
</script>
web.php
Route::post('/getData', 'apiController#index');
controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class apiController extends Controller
{
public function index(Request $request)
{
switch( $request->btnClick){
case 'btn1':
return 'data for button 1';
break;
case 'btn2':
return 'data for button 2';
break;
case 'btn3':
return 'data for button 3';
break;
}
}
}
maybe you want send response from controller according to current user id. then use auth()->user()->id
I have already asked this question already(closed due to inactivity) and I have been trying many different methods to solve it but it still doesn't work. I even try removing all those related to vue inside laravel by following many different kind of website where they all told me to remove the vue dependency. (here is one of the link that I followed, https://mattstauffer.com/blog/removing-all-vue-dependencies-from-laravel/) I even replaced the app.js with a new one created from scratch since in the past I didn't do anything to it
Can somebody please help me, I am stuck in this problem for quite a long time already and I really don't know what to do. All I want is to solve this error "[Vue warn]: Error compiling template:" since it is affecting the navbar in my webpage
I am using laravel framework 5.5.7 and I didn't even update my laravel to get until this vue. And also I don't even recall installing vue into my laravel.
This is the error they given me:
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)
app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li>Driver License Class Edit</li>
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Evaluation</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
I've generated a Spring Boot web application using Spring Initializr, using embedded Tomcat + Thymeleaf template engine.
I have this Thymeleaf template
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="common-navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a th:text="#{navbar.home.text}" href="/"></a></li>
<li><a th:text="#{navbar.about.text}" href="/about"></a></li>
<li><a th:text="#{navbar.contact.text}" href="/contact"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a th:href="#{/login}" th:text="#{navbar.login.text}" />
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<form id="f" th:action="#{/logout}" method="post" role="form" class="navbar-form">
<button type="submit" th:text="#{navbar.logout.text}" class="btn btn-primary" />
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
</html>
But I have 2 warnings No end tag (</a>). & No end tag (</button>).
If you use spring-boot-starter-thymeleaf dependency, you should add
<properties>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>
to your pom.xml.
This forces maven to use Thymeleaf 3. The default Thymeleaf 2 doesn't support pure HTML5.
More informations here: https://docs.spring.io/spring-boot/docs/current/reference/html/howto-spring-mvc.html#howto-use-thymeleaf-3
Thymeleaf prevents rendering no-valid HTML. What you are doing, using a and button tags with self enclosing, is unvalid according to HTML5 standards.
You can check validation of HTML codes on W3 validator page : https://validator.w3.org
Try an HTML code with self enclosed a and button tags and see the result.
Thymeleaf is not that much tough with validation of HTML codes, though.
You see W3 says a missing title attribute on a button element is an error. But thymeleaf doesn't give an error on that.
Nevertheless; it is important for Thymeleaf that your HTML code shouldn't have missing enclosing tags when it's required.
I'm trying to show users in my view, but i have this error Undefined variable: users
I don't know what is the problem, because in my controller for that view the user method is called.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Role;
use App\Http\Requests;
class pagesController extends Controller
{
public function viewIndex(){
$users = User::all();
return view('index', ['users' => $users]);
//return view('index');
}
}
And this is the route where my controller is called
Route::get('/index', [
'uses' => 'pagesController#getIndex',
'as' => 'admin',
'middleware' => 'roles',
'roles' => ['Admin']
]);
This is my blade file
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Laravel Blog</title>
<!-- CHANGE THIS TITLE FOR EACH PAGE -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for 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/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>
<!-- Default Bootstrap Navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li><a class="btn btn-default" href="{{ url('/login') }}">Login</a></li>
<li><a class="btn btn-default" href="{{ url('/register') }}">Register</a></li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#foreach($users as $user)
#if($user->hasRole('Admin'))
<li>Edit users</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
#else
<li>Edit page</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
#endif
#endforeach
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1>Welcome to My Blog!</h1>
<p class="lead">Thank you so much for visiting. This is my test website built with Laravel. Please read my popular post!</p>
</div>
</div>
</div>
</div>
<!-- end of .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Any ideas?
I think you're pointing to wrong controller method in your routes.
Your route will be:
Route::get('/index', [
'uses' => 'pagesController#viewIndex',
'as' => 'admin',
'middleware' => 'roles',
'roles' => ['Admin']
]);
and your controller (pagesController) will go like this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Role;
use App\Http\Requests;
class pagesController extends Controller
{
public function viewIndex(){
$users = User::all();
return view('index', compact('users'));
}
}
I think this will help to solve your problem.
Note: Please follow the naming conventions in your code so that it would be easy to understand and some frameworks (like laravel itself) runs on some followed conventions.
Thanks!
I'm unable to work out why i'm getting the 404, if i turn
BundleTable.EnableOptimizations = false;
then everything works OK, but set it to
BundleTable.EnableOptimizations = true;
then I get
Failed to load resource: the server responded with a status of 404
(Not Found)
I cannot work this out and it only happens for css, js bundle works ok any help appreciated.
I'm Using VS2015 and Umbraco 7.2.1
using System.Web.Optimization;
namespace Web.UI
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-datepicker.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.min.css",
"~/Content/PagedList.css",
"~/Content/bootstrap-datepicker.css",
"~/Content/site.css"));
BundleTable.EnableOptimizations = true;
}
}
}
using System.Web.Optimization;
using Umbraco.Core;
namespace Web.UI
{
public class ApplicationEvents : ApplicationEventHandler
{
protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/bundles/" />
#inherits UmbracoTemplatePage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<meta name="description" content="#ViewBag.Description" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10" style="text-align: center">
<img src="../../Images/Sitelogo.png" alt="Logo" width="300" />
</div>
</div>
<div class="row">
<div id="custom-bootstrap-menu1" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home"> </i></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
</div>
</div>
</div>
</div>
</div>
<div class="container bottomPadding">
#RenderBody()
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<footer role="navigation">
<p>#Umbraco.RenderMacro("CopyrightDate")</p>
</footer>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
#RenderSection("datepicker",false)
</body>
</html>
Namespace
<add namespace="System.Web.Optimization"/>
added to web.config in Views Folder
Found answer to my problem, the following link explains http://letswritecode.net/articles/using-the-umbraco-client-dependency-framework-to-bundle-and-minify/