Here is my blade file. The v-models are not reactive, and the button does nothing when clicked. I am getting no errors from vue at all. I tried running an alert() function in the mounted property, it worked fine. But nothing else works? What am I doing wrong?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flower Company</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/fontawesome-pro.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{csrf_token()}}">
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div id="app"></div>
<table class="table">
<form action="#" #submit.prevent="validateData" #keydown="errors.clear($event.target.name)">
<tbody>
<tr></tr>
<tr>
<td>
<input type="text" name="name" v-model="model.name" class="input_title_desc" required placeholder="Name"><!-- End td 1 -->
</td>
<td>
<input type="text" name="email" v-model="model.email" class="input_title_desc" id="email" placeholder="Email">
<!-- End td 2 -->
</td>
<td>
<input type="text" name="phone" v-model="model.phone" class="input_title_desc" id="phone" required placeholder="Phone">
<!-- End td 3 -->
</td>
</tr>
<tr></tr>
<tr>
<td colspan="3">
<input type="text" name="address" v-model="model.address"
class="input_description" placeholder="Address">
<button type="button" class="btn_add_fin" #click="validateData">
<i class="far fa-user-plus fa-2x"></i>
</button>
</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</form>
</table>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
And then my app.js file:
import Vue from 'vue'
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
class Errors
{
constructor()
{
this.errors = {};
}
get(field)
{
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors)
{
this.errors = errors;
}
clear(field)
{
delete this.errors[field];
}
has(field)
{
return this.errors.hasOwnProperty(field);
}
any()
{
return Object.keys(this.errors).length > 0;
}
}
new Vue({
el: '#app',
data: {
errors: new Errors(),
model: {
name: '',
email: '',
phone: '',
address: ''
}
},
methods: {
validateData: function() {
axios.post('/validate-data', this.$data.model)
.then((response) => {
console.log(response);
var date = $('#email').val();
var description = document.querySelector('.input_description').value;
var title = document.querySelector('.input_title_desc').value;
var action = $('#phone').val();
var class_li =['list_shopping list_dsp_none','list_work list_dsp_none','list_sport list_dsp_none','list_music list_dsp_none'];
var cont = '<div class="col_md_1_list"><p>'+action+'</p></div><div class="col_md_2_list"><h4>'+title+'</h4><p>'+description+'</p></div><div class="col_md_3_list"><div class="cont_text_date"><p>'+date+'</p></div><div class="cont_btns_options"><i class="fas fa-mobile-alt fa-2x" style="color: #6d696f;"></i><ul><li></i></li></ul></div></div>';
var li = document.createElement('li');
li.className = class_li[select_opt]+" li_num_"+contador;
li.innerHTML = cont;
document.querySelectorAll('.cont_princ_lists > ul')[0].appendChild(li);
setTimeout(function(){ document.querySelector('.li_num_'+contador).style.display = "block";
},100);
setTimeout(function(){
document.querySelector('.li_num_'+contador).className = "list_dsp_true "+class_li[select_opt]+" li_num_"+contador;
contador++;
},200);
$('#email').val('');
$('.input_description').val('');
$('.input_title_desc').val('');
$('#phone').val('');
})
.catch(error => {
});
}
}
});
I don't understand why this is not working?
Your contents are outside of div which id is app for Vue.
look at this <div id="app"></div>
Please make sure all of your elements which need to be with Vue is inside of your app div.
correction:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flower Company</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/fontawesome-pro.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{csrf_token()}}">
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div id="app">
<table class="table">
<form action="#" #submit.prevent="validateData" #keydown="errors.clear($event.target.name)">
<tbody><tr>
</tr>
<tr>
<td>
<input type="text" name="name" v-model="model.name" class="input_title_desc" required placeholder="Name"><!-- End td 1 -->
</td>
<td>
<input type="text" name="email" v-model="model.email" class="input_title_desc" id="email" placeholder="Email">
<!-- End td 2 -->
</td>
<td>
<input type="text" name="phone" v-model="model.phone" class="input_title_desc" id="phone" required placeholder="Phone">
<!-- End td 3 -->
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">
<input type="text" name="address" v-model="model.address" class="input_description" placeholder="Address">
<button type="button" class="btn_add_fin" #click="validateData"><i class="far fa-user-plus fa-2x"></i></button>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</tbody>
</form>
</table>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Related
I want ro concate some things in thymeleaf but concate symbol throws
unexcepted '+' error, I define ctotal in my common.kt class and want
to use the reference of the ctotal in cart.html but ctotal shows under
redline error I donot know which type of error it
cart.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head.html">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-7">
<div class="overlay text-center d-none">
<h4 class="display-4">You are being redirected to paypal...</h4>
<img src="/images/ajax-loader.gif" alt="">
</div>
<h2 class="display-4">Cart Overview</h2>
<table class="table">
<tr>
<th>Product</th>
<th>Image</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr th:each="el: ${cart}">
<td th:text="${el.value.name}"></td>
<td>
<img style="width: 100px;" th:src="#{'/media/' + ${el.value.image}}" />
</td>
<td>
<span th:text="${el.value.quantity}"></span>
<a th:href="#{'/cart/add/'+${el.value.id}} + '?cartPage=true'"
class="btn btn-success btn-sm">+</a>
<a th:href="#{'/cart/subtract/'+${el.value.id}}" class="btn btn-primary btn-sm">-</a>
<a th:href="#{'/cart/remove/'+${el.value.id}}" class="btn btn-danger btn-sm">remove</a>
</td>
<td th:text="'$' + ${el.value.price}"></td>
<td th:with="formattedTotal=${el.value.price} * ${el.value.quantity}" th:text="'$' + ${#numbers.formatDecimal(formattedTotal, 0, 'COMMA', 2, 'POINT')}"
>
</td>
</tr>
<tr>
<td class="text-right" colspan="4"><b>Grand Total:</b></td>
<td colspan="1" th:text="'$' + ${#numbers.formatDecimal(ctotal, 0, 'COMMA', 2, 'POINT')}"></td>
</tr>
<tr>
<td>
Clear Cart
</td>
<td colspan="4" class="text-right">
Checkout
</td>
</tr>
</table>
</div>
<div class="col"></div>
</div>
</div>
<form id="paypalform" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="zennil1305014666#gmail.com">
<th:block th:each="el, iter : ${cart}">
<input type="hidden" th:name="'item_name_'+${iter.count}" th:value="${el.value.name}">
<input type="hidden" th:name="'amount_'+${iter.count}" th:value="${el.value.price}">
<input type="hidden" th:name="'quantity_'+${iter.count}" th:value="${el.value.quantity}">
</th:block>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
<div th:replace="/fragments/footer"></div>
<script>
$(function () {
$("a.checkout").click(function (e) {
e.preventDefault();
$("div.overlay").removeClass("d-none");
$.get("/cart/clear", {}, function () {});
$("form#paypalform").submit();
});
});
</script>
</body>
</html>
i got error exact line 33 on the '+' symbol
<a th:href="#{'/cart/add/'+${el.value.id}} + '?cartPage=true'"
class="btn btn-success btn-sm">+</a>
And got red underlined error below line
<td colspan="1" th:text="'$' + ${#numbers.formatDecimal(ctotal, 0, 'COMMA', 2, 'POINT')}"></td>
at ctotal i got redline error .ctotal i defined in my common class
common.kt
package com.nilmani.cmsshopingcart
import com.nilmani.cmsshopingcart.model.Cart
import com.nilmani.cmsshopingcart.model.Category
import com.nilmani.cmsshopingcart.model.Page
import com.nilmani.cmsshopingcart.repository.CategoryRepository
import com.nilmani.cmsshopingcart.repository.PageRepository
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.ControllerAdvice
import org.springframework.web.bind.annotation.ModelAttribute
import java.security.Principal
import javax.servlet.http.HttpSession
#ControllerAdvice
class Common {
#Autowired
private lateinit var pageRepo: PageRepository
#Autowired
private lateinit var categoryRepo: CategoryRepository
#ModelAttribute
fun sharedData(model: Model, session: HttpSession, principal: Principal?) {
if (principal != null) {
model.addAttribute("principal", principal.name)
}
val pages: List<Page> = pageRepo.findAllByOrderBySortingAsc()
val categories: List<Category> = categoryRepo.findAllByOrderBySortingAsc()
var cartActive = false
if (session.getAttribute("cart") != null) {
val cart: HashMap<Int, Cart> = session.getAttribute("cart") as HashMap<Int, Cart>
var size = 0
var total = 0.0
for (value in cart.values) {
size += value.quantity
total += value.quantity * value.price.toDouble()
}
model.addAttribute("csize", size)
model.addAttribute("ctotal", total)
cartActive = true
}
model.addAttribute("cpages", pages)
model.addAttribute("ccategories", categories)
model.addAttribute("cartActive", cartActive)
}
}
here is my form
<!--destinationList List-->
<div class="form-group">
<div class="col-sm-3">
<label for="Destination">Destination</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" th:field="*{destinationList[0]}" />
<input type="text" class="form-control" th:field="*{destinationList[1]}" />
<input type="text" class="form-control" th:field="*{destinationList[2]}" />
<input type="text" class="form-control" th:field="*{destinationList[3]}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<button type="submit" class="btn btn-primary btn-block">Calculate</button>
</div>
</div>
</form>
And I'm going to fill following model
public class PriceSearchDTO {
private List<String> destinationList;
public List<String> getDestinationList() {
return destinationList;
}
public void setDestinationList(List<String> destinationList) {
this.destinationList = destinationList;
}
}
I can do this. But I hard coded number of input fields in the list as above in the view. I need to genarate them dynamically and make the number of element in the list is airbitary.
Try this:
<div class="col-sm-9">
<input type="text" class="form-control" th:each="destination : ${destinationList}" th:field="*{destination}" />
</div>
You are using Iteration in Thymeleaf. In fact, there is a quite complete set of objects that are considered iterable by a th:each attribute.
Like this :
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../../css/gtvg.css" th:href="#{/css/gtvg.css}" />
</head>
<body>
<h1>Product list</h1>
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="destination: ${destinations}">
<td th:text="${destination}">Onions</td>
</tr>
</table>
<p>
Return to home
</p>
</body>
</html>
And Controller in Spring framework.
#RequestMapping(value = "/")
public ModelAndView showView(ModelAndView mav) {
List<String> destinations = new ArrayList<String>();
destinations.add("elementA");
destinations.add("elementB");
destinations.add("elementC");
mav.addObject("destinations", destinations);
mav.setViewName("/viewName");
return mav;
}
In my laravel project I am using resource controller for update. but it is not working. I tried but it failed.
my blade
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ config('app.name') }}</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>{{ config('app.name') }}</h1>
<form class="dis-none" id="FormAjax">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" rows="3" id="address"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" />
</div>
</div>
</div>
<button type="submit" id="SaveAjax" class="btn btn-success">Save Form</button>
<button type="button" id="cancel" class="btn btn-danger">Cancel</button>
</form>
<div id="ShowAjax" class="row">
<button type="button" id="AddForm" class="btn btn-success">Add Form</button>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Country</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#AddForm").click(function () {
$("#FormAjax").fadeIn();
$("#ShowAjax").hide();
$('#UpdateForm').text('Save Form');
});
$("#SaveAjax").click(function () {
$("#FormAjax").hide();
$("#ShowAjax").fadeIn();
});
$(document).on('click', '#cancel', function () {
$('#name').val('');
$('#country').val('');
$('#address').val('');
});
$(document).on('click', '#edit', function () {
$("#FormAjax").fadeIn();
$("#ShowAjax").hide();
name = $(this).parent().parent().find('#ename').text();
address = $(this).parent().parent().find('#eaddress').text();
country = $(this).parent().parent().find('#ecountry').text();
$('#name').val(name);
$('#address').val(address);
$('#country').val(country);
$('#SaveAjax').text('Edit');
$('#SaveAjax').prop('id', 'UpdateForm');
$('#UpdateForm').attr('data-id', $(this).data('id'));
});
$(document).on('click', '#UpdateForm', function () {
name = $('#name').val();
country = $('#country').val();
address = $('#address').val();
url = "peoples";
id = $(this).data('id');
editUrl = url + '/' + id + '/edit';
$.get( {{ route('editUrl') }}, {name:name, country:country, address:address, id:id}, function (data) {
console.log('success');
});
});
});
</script>
</body>
</html>
route/web.php
Route::resource('peoples', 'PeopleController');
PeopleController.php
public function edit(People $people)
{
if($request->ajax()) {
$request->validate([
'name' => 'required',
'address' => 'required',
'country' => 'required',
]);
$people = People::find($request->id);
$people->name = $request->name;
$people->address = $request->address;
$people->country = $request->country;
$people->save();
return response()->json();
}
}
When I try type in browser http://localhost:8000/peoples I see this error.
Route [editUrl] not defined. (View: C:\xampp\htdocs\Tutorials
Laravel\Ajax\resources\views\peoples.blade.php)
You cannot use the route() helper here as you have not named your routes. Instead, try using the url() helper to generate the URL.
url(id . '/edit')
But, here I see another problem as the id will come in dynamically when the JS executes by which time the Laravel helper would have already executed. So, I would suggest the following approach:
url = {{ base_url() }} + '*apiPrefix*' + '/peoples/' + id + '/edit'
Ran into a bit of a problem with combining Laravel and Vue.js to populate a table.
Essentially, I was trying to use the v-repeat property in combination with a http:get request using the vue-resources extension. The problem is that no values appear to be getting passed through by Vue - I simply get the {{first_name}} and {{email_address}} in brackets.
I can confirm that the API method that is called by the http:get request is in fact spitting out data (manually accessing the URL in the browser reveals data).
Here is the code in the routes.php file that is responsible for outputting the data:
get('api/v1_users',function()
{
return App\User::all()->toJson();
});
And here is what it spits out in the browser:
[{"email_address":"test123#gmail.com,"first_name":"John","password":"test123"}]
The Chrome console displays no errors nor warnings.
Here 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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">
<!-- Custom styles for this template -->
{!! Html::style('css/navbar.css') !!}
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">User Password Operations</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="inactive">Reset New User</li>
<li class="inactive">Pending Users</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Pending 1.0 Users</h1>
<p>A list of 1.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div id = "user">
<tr v-repeat = "user: v1_user">
<td>
#{{ first_name }}
</td>
<td>
#{{ email_address }}
</td>
<td>
<button type="button" class="btn btn-success">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
<div class="jumbotron">
<h1>Pending 2.0 Users</h1>
<p>A list of 2.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div>
<tr v-repeat = "user: v1_user">
<td>
#{{user.first_name}}
</td>
<td>
#{{user.email_address}}
</td>
<td>
<button type="button" class="btn btn-success" v-on= "click: onClick">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Vue.js file REP -->
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.min.js"></script>
<!-- Main Vue file-->
<script src="/js/main.js"></script>
</body>
</html>
Here is the accompanying javascript file with the Vue.js code: (main.js)
new Vue({
el: "#user",
data:
{
v1_user:[],
},
ready : function()
{
this.fetchV1IntermediaryUsers();
},
methods:
{
fetchV1IntermediaryUsers: function() {
this.$http.get('/api/v1_users',function(v1users) {
this.$set('v1_user',v1users);
});
}
}
});
You have multiple DIV's with the same ID's. ID's in HTML must be unique. When you start a VUE instance you bind it to an element, in this case which is in your code twice. Remove the ID's and add an ID to the <Body> tag, then check your code.
I work with spring and jsp ( which include iframe)
I have problem with session
I have the login page ( index.jsp) and I have other page ( menu.jsp) which include iframe
I want when the session is expired to redirect from menu.jsp to index.jsp
this is my index.jsp :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="/Test/theme/login.css">
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="page">
<div id="content">
<div id="content_space">
<form name='f' action="<c:url value='j_spring_security_check' />" method="POST">
<c:if test="${param.error == 1}">
<h3 style="font-size:20; color:#FF1C19;">error.</h3>
</c:if>
<table dir="ltr">
<tbody>
<tr>
<td width="100%">
<table align="left" width="100%" dir="ltr" style="padding-top: 35px;">
<tbody><tr>
<td width="10"></td>
<td><input name="j_username" type="text" value=""></td>
<td width="10"></td>
<td style="color: #000000" align="right">username</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="100%">
<span id="_58_passwordCapsLockSpan" style="display: none;">Caps Lock is on.</span><table align="left" dir="ltr" width="100%">
<tbody><tr>
<td width="10"></td>
<td><input name="j_password" type="password" value=""></td>
<td width="10"></td>
<td style="color: #000000" align="right">login</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<table align="left" dir="ltr" style="padding-left: 15px;">
<tbody><tr>
<td><input type="submit" class="signinAR" value=""></td>
<td width="10"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
<div id="sidebar">
<p></p>
</div>
</div>
</div>
</body>
</html>
and this is my menu.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%#page import="org.springframework.security.core.userdetails.UserDetails"%>
<%#page import="org.springframework.security.core.context.SecurityContextHolder"%>
<%
String contextPath = request.getContextPath();
Boolean enbaleSMenu = false;
if(request.isUserInRole("ADMIN")){
enbaleSMenu=true;
}
Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
String username = "";
if (principal instanceof UserDetails) {
username = ((UserDetails)principal).getUsername();
} else {
username = principal.toString();
}
if(username.equals("anonymousUser")){
response.sendRedirect("/Test/index.htm");
parent.reLoadPage();
}
%>
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="/Test/theme/default.css">
<script type="text/javascript"
src="<c:url value='/extjs/jquery-latest.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/extjs/main.js'/>"></script>
<script>
function loadIframe(iframeName, url) {
var $iframe = $('#' + iframeName);
if ( $iframe.length ) {
$iframe.attr('src',url);
return false;
}
return true;
}
function reLoadPage(){
location.replace("/Test/index.htm");
location.reload();
}
// hidding menu
var hiddenSMenu=<%=enbaleSMenu%>;
function showMenu()
{
if(hiddenSMenu)
{
document.getElementById("idSmenu").children[2].style.display="none";
loadIframe('cmpframe', '/Test/administration/Validation.htm');
}
else
{
document.getElementById("idSmenu").children[0].style.display="none";
document.getElementById("idSmenu").children[1].style.display="none";
loadIframe('cmpframe', '/Test/citizen/Request.htm');
}
}
</script>
<style type="text/css">
label.myBold
{
font-weight: bold;
text-decoration: none;
color: red;
}
.my-fieldset {
background: #F1F3FB,
border: 1px solid red
}
.my-fieldset .x-fieldset-header {
color: red
}
</style>
</head>
<body dir="rtl" onload="showMenu()" >
<script>
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
</script>
<a href="<c:url value="../j_spring_security_logout" />" > ????</a>
<div id="wrapper">
<div id="header">
<div id="logo_left">
<p>
<img src="/Test/theme/images/Taif_logo.png">
</p>
</div>
<div id="logo">
<h1><img src="/Test/theme/images/MIS_logo.png"></h1>
</div>
</div>
<div id="page">
<div id='cssmenu'>
<ul>
<li style="display: none;><span>Home</span></li>
<li><span><spring:message code="label.titleProjet"/></span>
<ul id="idSmenu">
<li class="current"><spring:message code="label.consult"/></li>
<li class="current"><spring:message code="label.validate"/></li>
<li class="current"><spring:message code="label.Request"/></li>
</ul>
</li>
</li>
</ul>
</div>
<div id = "divFrame" >
<iframe id="cmpframe" name="myframe" width="84%" height="100%" >
</iframe></div>
</div>
</div>
</body>
</html>
this is the code whcih should redirect from menu.jsp to index.jsp when the session is expired :
Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
String username = "";
if (principal instanceof UserDetails) {
username = ((UserDetails)principal).getUsername();
} else {
username = principal.toString();
}
if(username.equals("anonymousUser")){
response.sendRedirect("/Test/index.htm");
parent.reLoadPage();
}
but with this code I have also the same problem
Updated :
this is my error when I test this code :
parent cannot be resolved
39: }
40: if(username.equals("anonymousUser")){
41: response.sendRedirect("/Test/index.htm");
42: parent.reLoadPage();
43: }
44:
45:
I didn't know how can I declare parent