I create JSF form with Jquery Diaolg. When I submit my form , the request doesn't invoke my bean method on first click but calls it at second click. I implement a PhaseListener to debug and found out that during first click only RESTORE_VIEW and RENDER_RESPONSE were called. My Question is what can cause this.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:forseti="http://xmlns.jcp.org/jsf/composite/components"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:composition >
<div jsf:id="modal-wizard-edit" class="modal">
<div id="user-profile-3" class="modal-dialog">
<div class="modal-content" style="width:800px;">
<div id="modal-content">
<form class="form-horizontal" jsf:id="personne-morale-edit-form" jsf:prependId="false">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
Results for "Latest Registered Domains
</div>
</div>
<div class="tabbable" style="margin-top: 20px; margin-left: 20px;margin-right: 20px; margin-bottom: 20px;">
<ul class="nav nav-tabs padding-16">
<li class="active">
<a data-toggle="tab" href="#edit-basic">
<i class="green ace-icon fa fa-pencil-square-o bigger-125"></i>
Etat civil/Identité
</a>
</li>
</ul>
<div class="tab-content profile-edit-tab-content">
<div id="edit-basic" class="tab-pane in active">
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="edit-raison-sociale">Raison sociale:</label>
<div class="col-xs-12 col-sm-9">
<input id="edit-raison-sociale" type="text" jsf:value="#{personneMoraleBean.selectedPersonneMorale.raisonSociale}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="edit-ifu">IFU:</label>
<div class="col-xs-12 col-sm-9">
<input id="edit-ifu" type="text" jsf:value="#{personneMoraleBean.selectedPersonneMorale.ifu}"/>
</div>
</div>
</div>
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="nature_juridique_edit">Nature juridique:</label>
<div class="col-xs-12 col-sm-9">
<h:selectOneMenu class="chosen-select" id="nature_juridique_edit" value="#{personneMoraleBean.selectedPersonneMorale.natureJuridique}" p:data-placeholder="#{bundle.champNatureAffaireClassification}" required="true" >
<f:selectItem itemValue="" itemLabel="" />
<f:selectItems value="#{personneMoraleBean.listeNatureJuridiques}" var="item" itemValue="#{item}" itemLabel="#{item.libelle}" />
<f:converter converterId="natureJuridiqueConverter" />
</h:selectOneMenu>
</div>
<script src="../../resources/components/chosen.jquery.min.js"></script>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="secteur_edit">Secteurs d'activités:</label>
<div class="col-xs-12 col-sm-9">
<h:selectManyListbox class="multiselect" id="secteur_edit" value="#{personneMoraleBean.selectedPersonneMorale.secteurs}" p:data-placeholder="#{bundle.champNatureAffaireClassification}" p:multiple="" required="true" >
<f:selectItems value="#{personneMoraleBean.listeSecteurActivites}" var="item"
itemLabel="#{item.libelle}" itemValue="#{item}"/>
<f:converter converterId="secteurActiviteConverter"/>
</h:selectManyListbox>
</div>
</div>
<script src="../../resources/js/bootstrap-multiselect.min.js"></script>
<script type="text/javascript">
$('#secteur_edit').multiselect({
enableFiltering: true,
buttonClass: 'btn btn-white btn-primary',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"/></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
li: '<li><label></label></li>',
divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
}
});
</script>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="telephone_edit">Telephone:</label>
<div class="col-xs-12 col-sm-9">
<forseti:phoneNumber id="telephone_edit" value="#{personneMoraleBean.selectedPersonneMorale.telephone}"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px; margin-left: 20px;margin-right: 20px; margin-bottom: 20px;">
<div class="clearfix col-sm-12 ">
<button type="submit" jsf:id="submit-morale-edit" class="btn btn-primary btn-block" jsf:action="#{personneMoraleBean.doEdit}">
Block Button
</button>
</div>
</div>
</form>
</div>
</div><!-- /.span -->
</div><!-- /.user-profile -->
</div><!-- PAGE CONTENT ENDS -->
<script type="text/javascript">
function ajaxMonitoringFinishEdit(data) {
if (data.status == "success") {
$('#modal-wizard-edit').modal('hide');
}
}
</script>
</ui:composition>
</html>
This is my form code source
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package forseti.controller.personne;
import forseti.ejb.NatureJuridiqueFacade;
import forseti.ejb.PersonneMoraleFacade;
import forseti.ejb.SecteurActiviteFacade;
import forseti.jpa.personne.NatureJuridique;
import forseti.jpa.personne.PersonneMorale;
import forseti.jpa.personne.SecteurActivite;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.event.ActionEvent;
import javax.inject.Named;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
/**
*
* #author Gildasdarex
*/
#Named(value = "personneMoraleBean")
#ViewScoped
public class PersonneMoraleBean implements Serializable {
/**
* Creates a new instance of PersonneMoraleBean
*/
#Inject
private PersonneMoraleFacade personneMoraleFacade;
#Inject
private SecteurActiviteFacade secteurActiviteFacade;
#Inject
private NatureJuridiqueFacade natureJuridiqueFacade;
private PersonneMorale newPersonneMorale;
private PersonneMorale selectedPersonneMorale;
private List<PersonneMorale> listePersonneMorales;
private SecteurActivite selectedSecteurActivite;
public PersonneMoraleBean() {
}
#PostConstruct
public void init() {
newPersonneMorale = new PersonneMorale();
selectedPersonneMorale = new PersonneMorale();
}
public PersonneMorale getNewPersonneMorale() {
return newPersonneMorale;
}
public void setNewPersonneMorale(PersonneMorale newPersonneMorale) {
this.newPersonneMorale = newPersonneMorale;
}
public PersonneMorale getSelectedPersonneMorale() {
return selectedPersonneMorale;
}
public void setSelectedPersonneMorale(PersonneMorale selectedPersonneMorale) {
this.selectedPersonneMorale = selectedPersonneMorale;
}
public List<PersonneMorale> getListePersonneMorales() {
listePersonneMorales = personneMoraleFacade.findAll();
return listePersonneMorales;
}
public List<SecteurActivite> getListeSecteurActivites() {
return secteurActiviteFacade.findAll();
}
public List<NatureJuridique> getListeNatureJuridiques() {
return natureJuridiqueFacade.findAll();
}
public SecteurActivite getSelectedSecteurActivite() {
return selectedSecteurActivite;
}
public void setSelectedSecteurActivite(SecteurActivite selectedSecteurActivite) {
this.selectedSecteurActivite = selectedSecteurActivite;
}
public void doCreate() {
newPersonneMorale.setId(newPersonneMorale.getIfu());
personneMoraleFacade.create(newPersonneMorale);
listePersonneMorales = personneMoraleFacade.findAll();
}
public void doDel() {
personneMoraleFacade.remove(selectedPersonneMorale);
}
public void doEdit() {
System.out.println("edit "+selectedPersonneMorale.getId());
System.out.println("edit "+selectedPersonneMorale.getIfu());
System.out.println(selectedPersonneMorale.getRaisonSociale());
System.out.println(selectedPersonneMorale.getNatureJuridique());
System.out.println(selectedPersonneMorale.getSecteurs().size());
personneMoraleFacade.edit(selectedPersonneMorale);
}
public void doRemoveSecteur() {
selectedPersonneMorale.getSecteurs().remove(selectedSecteurActivite);
personneMoraleFacade.edit(selectedPersonneMorale);
listePersonneMorales = personneMoraleFacade.findAll();
}
public void passItemMoraleSecteur(PersonneMorale personneMorale, SecteurActivite secteurActivite) {
selectedPersonneMorale = personneMorale;
selectedSecteurActivite = secteurActivite;
}
public void passItem(PersonneMorale item) {
selectedPersonneMorale = item;
System.out.println("getItem "+selectedPersonneMorale.getId());
}
}
Related
Making my first steps in vue. I am crashing in importing a .json file. This job concernes a small shop. Goal of this paragraph is to enter 4 products in the shop. The productfiles are imported with an Axios hook. But the Vue Dev Tool errors an undefined (see picture). When loading the website the div with v-else is automatically loaded.
The products.json files is nested in the same folder as index.html. http://localhost:8000/products.json shows me the .json file.
Here you 'll find all the code for this small shop. Even with a copy/paste of this code mine is not working. I also made it smaller with the relevant code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct"> <!--not working-->
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">
All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>
Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">
☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<!--skipped this part-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: []
},
order: []
},
products: [],
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
console.log(productsArray);
console.log(this.products);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
..
}
},
beforeCreate: function () { //#B
if (APP_LOG_LIFECYCLE_EVENTS) { //#B
..
},
created: function () {
axios.get('./products.json')
.then((response) => {
this.products = response.data.products;
console.log(this.products);
});
},
beforeMount: function () {
..
},
mounted: function () {
..
},
beforeUpdate: function () {
..
},
updated: function () {
..
},
beforeDestroyed: function () {
..
},
destroyed: function () {
..
}
});
</script>
</body>
</html>
I tried out the same code here and it's working fine, i had did axios call to this json file :
https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct">
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">Pet Depot Checkout</div>
<div class="panel-body">
<div class="form-group">
<div class="col-md-12">
<h4>
<strong>Enter Your Information</strong>
</h4>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<strong>First Name:</strong>
<input v-model.trim="order.firstName" class="form-control" />
</div>
<div class="col-md-6">
<strong>Last Name:</strong>
<input v-model.trim="order.lastName" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>Address:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.address" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>City:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.city" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<strong>State:</strong>
<select v-model="order.state" class="form-control">
<option disabled value="">State</option>
<option v-for="(state, key) in states" v-bind:value="state">
{{key}}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<strong>Zip / Postal Code:</strong>
<input v-model.number="order.zip" class="form-control" type="number" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 boxes">
<input type="checkbox" id="gift" value="true" v-bind:true-value="order.sendGift" v-bind:false-value="order.dontSendGift" v-model="order.gift">
<label for="gift">Ship As Gift?</label>
</div>
</div>
<!-- end of form-group -->
<div class="form-group">
<div class="col-md-6 boxes">
<input type="radio" id="home" v-bind:value="order.home" v-model="order.method">
<label for="home">Home</label>
<input type="radio" id="business" v-bind:value="order.business" v-model="order.method">
<label for="business">Business</label>
</div>
</div>
<!-- end of form-group-->
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-primary submit" v-on:click="submitForm">Place Order</button>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of form-group-->
<div class="col-md-12 verify">
<pre>
First Name: {{order.firstName}}
Last Name: {{order.lastName}}
Address: {{order.address}}
City: {{order.city}}
Zip: {{order.zip}}
State: {{order.state}}
Method: {{order.method}}
Gift: {{order.gift}}
</pre>
</div>
<!-- end of col-md-12 verify-->
</div>
<!--end of panel-body-->
</div>
<!--end of panel panel-info-->
</div>
<!--end of col-md-10 col-md-offset-1-->
</div>
<!--end of row-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: {
AL: 'Alabama',
AK: 'Alaska',
AR: 'Arizona',
CA: 'California',
NV: 'Nevada'
},
order: {
firstName: '',
lastName: '',
address: '',
city: '',
zip: '',
state: '',
method: 'Home Address',
business: 'Business Address',
home: 'Home Address',
gift: '',
sendGift: 'Send As A Gift',
dontSendGift: 'Do Not Send As A Gift'
},
products: {},
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
if (!parseInt(price)) {
return "";
} //#C
if (price > 99999) { //#D
var priceString = (price / 100).toFixed(2); //#E
var priceArray = priceString.split("").reverse(); //#F
var index = 3; //#F
while (priceArray.length > index + 3) { //#F
priceArray.splice(index + 3, 0, ","); //#F
index += 4; //#F
} //#F
return "$" + priceArray.reverse().join(""); //#G
} else {
return "$" + (price / 100).toFixed(2); //#H
}
}
},
created: function() { //#C
axios.get('https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json')
.then((response) => {
this.products = response.data.products;
// console.log(this.products);
});
}
});
</script>
</body>
</html>
hello everyone i have a bootsfaces dataTabble, each row has an edit end delete action, i want to show a modal that contains selected row data to edit that object.
i successfully get the selected row i pass data to the managedBean, i assign data to managedProperties, but nothing is shown in Modal input elements.
this is my dataTable code:
<b:dataTable id="articleslist" value="#{listeArticlesAction.listeArticles}" var="article" page-length="10" paginated="true"
page-length-menu="10,20,30">
<b:dataTableColumn value="#{article.code}" label="Code" />
<b:dataTableColumn value="#{article.nom}" label="Nom" />
<b:dataTableColumn value="#{article.description}" label="Description" />
<b:dataTableColumn value="#{article.prix}" label="Prix (DH)" />
<b:dataTableColumn label="Modifier" style="text-align: center">
<h:commandButton style="padding: 0 4px;" iconAwesome="pencil" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
action="#{listeArticlesAction.modifierArticle}">
<f:setPropertyActionListener target="#{listeArticlesAction.editArticle}" value="#{article}"
/>
<f:ajax render="#form"/>
</h:commandButton >
</b:dataTableColumn>
<b:dataTableColumn label="Supprimer" style="text-align: center">
<h:commandButton style="padding: 0 4px; text-align: center;" iconAwesome="trash" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
onclick="confirmDelete()" action="#{listeArticlesAction.supprimerArticle}" >
<f:param name="actionDelete" value="article" />
</h:commandButton >
</b:dataTableColumn>
</b:dataTable>
and this is my managedBean class:
public class ListeArticlesAction {
private List<Article> listeArticles = new ArrayList<Article>();
private String editArticleNom;
private String editArticleDescription;
private int editArticlePrix;
private Article editArticle;
/**
* Methode pour preparer la liste des articles
*/
#PostConstruct
public void init() {
listeArticles = ServiceFactory.getArticleService().allArticles();
}
public List<Article> getListeArticles() {
return listeArticles;
}
public void setListeArticles(List<Article> listeArticles) {
this.listeArticles = listeArticles;
}
public String getEditArticleNom() {
return editArticleNom;
}
public void setEditArticleNom(String editArticleNom) {
this.editArticleNom = editArticleNom;
}
public String getEditArticleDescription() {
return editArticleDescription;
}
public void setEditArticleDescription(String editArticleDescription) {
this.editArticleDescription = editArticleDescription;
}
public int getEditArticlePrix() {
return editArticlePrix;
}
public void setEditArticlePrix(int editArticlePrix) {
this.editArticlePrix = editArticlePrix;
}
public Article getEditArticle() {
return editArticle;
}
public void setEditArticle(Article editArticle) {
this.editArticle = editArticle;
}
public void supprimerArticle() {
}
/**
* methode pour modifier un article quelconque
*/
public void modifierArticle() {
editArticleDescription = editArticle.getDescription();
editArticleNom = editArticle.getNom();
editArticlePrix = editArticle.getPrix();
}
}
and this is my modal html code:
<div class="modal" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Modifier le produit
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="edit_product_name" class="form-control-label">
Nom:
</label>
<h:inputText type="text" class="form-control" id="edit_product_name"
value="#{listeArticlesAction.editArticleNom}" autocomplete="off" />
</div>
<div class="form-group">
<label for="edit_product_description" class="form-control-label">
Description:
</label>
<h:inputTextarea class="form-control" id="edit_product_description"
value="#{listeArticlesAction.editArticleDescription}" autocomplete="off" />
</div>
<div class="form-group">
<label for="edit_product_price" class="form-control-label">
Prix(DH):
</label>
<h:inputText type="text" class="form-control m-input" id="edit_product_price"
value="#{listeArticlesAction.editArticlePrix}" autocomplete="off" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Annuler
</button>
<button type="button" class="btn btn-primary">
Modifier
</button>
</div>
</div>
</div>
</div>
Most likely you're updating the wrong part of the screen. That happens to many people using modals for the first time. Thing is, the modal is rendered when the page is loaded. That's potentially a minute before the button is clicked. So the modal doesn't know which data to display. You tell it using the update attribute of the command button.
As far as I can see, the datatable and the Java bean are OK. With the exception of the update region. Your code snippets don't show where the <h:form> or <b:form> tag is, so it's almost certainly outside the datatable. However, what you should update is the content of the modal. Don't update the entire modal (because that renders it hidden again). Just the content. Something like update="#(.modal-dialog)".
The modal itself looks a bit odd to me. What is listeArticlesAction? Judging from the other code snippets, you want to use listeArticlesAction.editArticle instead.
Side remark: I suggest you choose a language for the variable names (and stuff like this) and use it consistently. French is a good choice, although most developers (except me) recommend English. But it's hard enough to remember the variable name. You don't have to add the burden of remembering the language :).
MY QUESTION! WHY Once admin or users after login, they can not get on their dashboards. It updates the pages "/" or "/ home", but does not go
to UserDashboards or AdminDashboards?!
I am trying to configure Spring boot with Spring security and DB() for an application.
I have login-form in my home.jsp. User can login or registred in my site in modal window.
I will show you only a portion of home.jsp
<!-- Header -->
<li><spring:message code="nav.section.link5"/></li>
<c:if test="${email == null}">
<li><spring:message code="nav.section.link6"/></li>
<li><spring:message code="nav.section.link9"/></li>
</c:if>
<c:if test="${email != null}">
<li>${email}</li>
<li><spring:message code="nav.section.link10"></spring:message> </li>
</c:if>
<!-- modal login
================================================== -->
<div class="modal" id="modal-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default active"><spring:message code="nav.section.link6"/></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-2" data-dismiss="modal"><spring:message code="nav.section.link9"/></button>
</div>
</div>
</div>
<div class="modal-footer">
<div align="center">
<ul class="sign-social-icon">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="or">
<p><spring:message code="modal.section.h3"/></p>
</div >
<form:form method="post" action="/userLogin" id="contact-formL" class="form-horizontal">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
<div class="control-group controls">
<input type="email" class="reg" placeholder="<spring:message code="modal.section.h6"/>" name="email" id="emailL" value="${dto.email}">
</div>
<div class="control-group controls ">
<input type="password" class="reg" id="passwordL" placeholder="<spring:message code="modal.section.h7"/>" name="password" value="${dto.password}" >
</div>
<div class="sign form-actions">
<input role="button" type="submit" class="btn btn-primary btn-block" value="<spring:message code="nav.section.link6"/>">
</div>
</form:form>
<%--<div class="fmp">--%>
<%--<a><spring:message code="modal.section.h4"/></a>--%>
<%--</div>--%>
</div>
</div>
</div>
</div>
<!-- modal registration
================================================== -->
<div class="modal" id="modal-2">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-1" data-dismiss="modal" ><spring:message code="nav.section.link6"/></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default active"><spring:message code="nav.section.link9"/></button>
</div>
</div>
</div>
<div class="modal-footer">
<div align="center">
<ul class="sign-social-icon">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="or">
<p><spring:message code="modal.section.h3"/></p>
</div>
<form:form action="/saveUser" modelAttribute="dto" name="myForm" id="contact-form" class="form-horizontal">
<div class="control-group controls">
<input type="email" class="reg" placeholder="<spring:message code="modal.section.h6"/>" name="email" id="email" value="${dto.email}">
</div>
<div class="control-group controls ">
<input type="password" class="reg" id="password" placeholder="<spring:message code="modal.section.h7"/>" name="password" value="${dto.password}" >
</div>
<div class="control-group controls">
<input type="password" class="reg" id="conf" placeholder="<spring:message code="modal.section.h8"/>" name="conf">
</div>
<div class="sign form-actions">
<input role="button" type="submit" class="btn btn-primary btn-block" value="<spring:message code="nav.section.link9"/>">
</div>
</form:form>
<div class="policy">
<spring:message code="modal.section.h5"/> </div>
</div>
</div>
</div>
</div>
This is my login method in HomeController.class:
#RequestMapping(value = "/userLogin", method = RequestMethod.POST)
public String updateOne(#RequestParam(required = true) String email, #RequestParam(required = true) String password, HttpServletRequest request) throws SQLException {
HttpSession session = request.getSession();
User user = userService.getByEmail(email);
System.out.println("проверка пароля и имейла с БД");
if (user != null && user.getPassword().equals(password)) {
session.setAttribute("email", user.getEmail());
System.out.println("ЛОГИНИТСЯ!!!");
if (userService.getByEmail(email).getRole().equals(Role.USER)) {
System.out.println("SALUT USER!!");
session.setAttribute("user", user);
return "redirect:/";
} else if (userService.getByEmail(email).getRole().equals(Role.MODERATOR)) {
System.out.println("SALUT MODERATOR!!");
session.setAttribute("moderator", user);
return "redirect:/";
} else if (userService.getByEmail(email).getRole().equals(Role.ADMIN)) {
System.out.println("SALUT ADMIN!!");
session.setAttribute("admin", user);
return "redirect:/";
}
}
return "redirect:/loginProblems";
}
The users and admin then has to open their dashboards(using click on button <li>${email}</li> in HEADER).
This is my DashboardController.class:
#Controller
public class DashboardsConroller {
#Autowired
UserService userService;
#Autowired
UserDataService userDataService;
#RequestMapping(value = "/dashboards", method = RequestMethod.GET)
public String selectDashboard(HttpServletRequest request) {
System.out.println("method selectDashboard!!");
HttpSession session = request.getSession();
User user = userService.getByEmail((String) session.getAttribute("email"));
System.out.println("СМОТРИ СЮДА = " + user);
if (userService.getByEmail(user.getEmail()).getRole().equals(Role.USER)) {
System.out.println("USER want to open dashboard!!");
session.setAttribute("user", user);
return "redirect:/userDash";
} else if (userService.getByEmail(user.getEmail()).getRole().equals(Role.MODERATOR)) {
System.out.println("Moderator want to open dashboard!!");
session.setAttribute("moderator", user);
return "redirect:/moderatorDash";
} else if (userService.getByEmail(user.getEmail()).getRole().equals(Role.ADMIN)) {
System.out.println("ADMIN want to open dashboard!!");
session.setAttribute("admin", user);
return "redirect:/adminDash";
} else {
System.out.println("LAST ELSE IS WORKING");
return "redirect:/home";
}
}
}
This is my showAdminDashboard() method in AdminDashController.class:
#PreAuthorize("hasAuthority('ADMIN')")
#RequestMapping(value = "/adminDash", method = RequestMethod.GET)
public ModelAndView showAdminDashboard(#ModelAttribute("myUserData") UserData myUserData,
#RequestParam(required = false) String firstName,
#RequestParam(required = false) String secondName,
HttpServletRequest request) throws SQLException {
...
}
This is my showUserDashboard() method in UserDashController.class:
#PreAuthorize("hasAuthority('USER')")
#RequestMapping(value = "/userDash", method = RequestMethod.GET)
public ModelAndView showUserDashboard(#ModelAttribute("myUserData") UserData myUserData,
#RequestParam(required = false) String firstName,
#RequestParam(required = false) String secondName,
HttpServletRequest request) throws SQLException, InstantiationException, IllegalAccessException {
...
return modelAndView;
}
This is my SecurityConfig.class :
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.security.SecurityProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
#Configuration
#EnableGlobalMethodSecurity(prePostEnabled = true)
#Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
class SecurityConfig extends WebSecurityConfigurerAdapter {
#Autowired
private UserDetailsService userDetailsService;
#Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("/resources/**");
}
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/home", "/userLogin", "/dashboards", "/saveUser").permitAll()
.antMatchers("/adminDash").hasAuthority("ADMIN")
.antMatchers("/userDash").hasAuthority("USER")
.anyRequest().fullyAuthenticated()
.and()
.formLogin()
.loginPage("/")
.usernameParameter("email")
.passwordParameter("password")
.failureUrl("/loginProblems")
.permitAll()
.and()
.logout().logoutRequestMatcher(new AntPathRequestMatcher("/accountLogout"));
}
#Override
public void configure(AuthenticationManagerBuilder auth) throws Exception {
auth
.userDetailsService(userDetailsService)
.passwordEncoder(new BCryptPasswordEncoder());
}
}
pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
WHY Once admin or users after login, they can not get on their dashboards.
It happens because user wasn't authenticated properly, in fact for a Spring Security, user is still not authenticated.
When you're using Spring Security, it should authenticate users (by finding user in the database, comparing passwords, assigning roles and so on). But you're trying to authenticate users by your own code (in /userLogin).
I'm newbie with Aurelia and frontend frameworks generally.
I have page with List
list.html
<template>
<require from="services/list-item"></require>
<div class="container-fluid">
<div class="row row-centered container-top-space">
<div repeat.for="item of items">
<list-item item.bind="item"></list-item>
</div>
</div>
</div>
</template>
list.js
import { inject } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-fetch-client';
#inject(HttpClient)
export class ListItem{
constructor(httpClient) {
this.items= [];
httpClient.configure(...);
}
}
and ListItem
list-item.html
<template>
<div class="row">
<div class="list-item">
<div class="form-control-inline" style="width:33%">
<span>${item.name} </span>
</div>
<div class="form-control-inline" style="width:54%">
<span>${item.value}</span>
</div>
<div class="pull-right" style="width:100px">
<button class="btn btn-list-item" type="submit" name="submit" click.delegate="edit($event.target.parentElement)">Edit</button>
</div>
</div>
</div>
</template>
list-item.js
import { bindable } from 'aurelia-framework';
export class ListItem{
#bindable item;
edit(element){
//I'd like to replace view component with update component here
}
}
I'd like to change template of list-item on list-item-edit when edit function will be called, but completely don't know how to make it.
I have been through many questions here but doesn't solve my problem. I have an HTML form and I want to call a method of a managed bean class, when the submit button is clicked. Here are the code.
HTML Form:
<form class="form-horizontal" action= "" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Username</label>
<div class="controls">
<input type="text" id="inputUsrname" name="usrname" placeholder="Username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputUsrname" name="email" placeholder="Email"/>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
<h:commandButton value="click" action="#{hello_World.getMessage()}"/>
<button class="btn" type="reset">Reset</button>
</form>
Managed Bean class:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
#ManagedBean(name="hello_World", eager=true)
public class HelloWorld {
public HelloWorld() {
System.out.println("Helloworld started from managed bean");
}
public String getMessage() {
System.out.println("sjdfksadfbasdjkfh");
return "indexx.xhtml";
}
}
When I click the click button, nothing happens.
Thank you.