可能重复：
Component ID has already been found in the view when using datatable with binding and Session Scoped
我有一个id唯一性的问题。当我修改View定义然后尝试重新显示页面 lister_ecoles.xhtml 时，我收到此消息。
这是显示的错误消息：
java.lang.IllegalStateException: Component ID j_id15:j_id16:j_id29 has already been found in the view. See below for details.
+id: null
type: javax.faces.component.UIViewRoot@1abe6f6
+id: javax_faces_location_HEAD
type: javax.faces.component.UIPanel@c84a5d
+id: j_id4
type: javax.faces.component.UIOutput@18a5776
+id: j_id22
type: javax.faces.component.UIOutput@1742dcc
+id: j_id19
...
这是我在编辑，删除或添加新学校后重定向的页面：
lister_ecoles.xhtml：
<?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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="table-style.css" />
<title>Internet Dreams</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->
<!-- jquery core -->
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<!-- checkbox styling script -->
<script src="js/jquery/ui.core.js" type="text/javascript"></script>
<script src="js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="js/jquery/jquery.bind.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('input').checkBox();
$('#toggle-all').click(function(){
$('#toggle-all').toggleClass('toggle-checked');
$('#mainform input[type=checkbox]').checkBox('toggle');
return false;
});
});
</script>
<!-- styled select box script version 1 -->
<script src="js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.styledselect').selectbox({ inputClass: "selectbox_styled" });
});
</script>
<!-- styled select box script version 2 -->
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
$('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
});
</script>
<!-- styled select box script version 3 -->
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>
<!-- styled file upload script -->
<script src="js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("input.file_1").filestyle({
image: "images/forms/choose-file.gif",
imageheight : 21,
imagewidth : 78,
width : 310
});
});
</script>
<!-- Custom jquery scripts -->
<script src="js/jquery/custom_jquery.js" type="text/javascript"></script>
<!-- Tooltips -->
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('a.info-tooltip ').tooltip({
track: true,
delay: 0,
fixPNG: true,
showURL: false,
showBody: " - ",
top: -35,
left: 5
});
});
</script>
<!-- date picker script -->
<link rel="stylesheet" href="css/datePicker.css" type="text/css" />
<script src="js/jquery/date.js" type="text/javascript"></script>
<script src="js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{
// initialise the "Select date" link
$('#date-pick')
.datePicker(
// associate the link with a date picker
{
createButton:false,
startDate:'01/01/2005',
endDate:'31/12/2020'
}
).bind(
// when the link is clicked display the date picker
'click',
function()
{
updateSelects($(this).dpGetSelected()[0]);
$(this).dpDisplay();
return false;
}
).bind(
// when a date is selected update the SELECTs
'dateSelected',
function(e, selectedDate, $td, state)
{
updateSelects(selectedDate);
}
).bind(
'dpClosed',
function(e, selected)
{
updateSelects(selected[0]);
}
);
var updateSelects = function (selectedDate)
{
var selectedDate = new Date(selectedDate);
$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
.bind(
'change',
function()
{
var d = new Date(
$('#y').val(),
$('#m').val()-1,
$('#d').val()
);
$('#date-pick').dpSetSelected(d.asString());
}
);
// default the position of the selects to today
var today = new Date();
updateSelects(today.getTime());
// and update the datePicker to reflect it...
$('#d').trigger('change');
});
</script>
<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix( );
});
</script>
</h:head>
<body>
<!-- Start: page-top-outer -->
<div id="page-top-outer">
<!-- Start: page-top -->
<div id="page-top">
<!-- start logo -->
<div id="logo">
<a href=""><img src="images/shared/logo.png" width="156" height="40" alt="" /></a>
</div>
<!-- end logo -->
<div class="clear"></div>
</div>
<!-- End: page-top -->
</div>
<!-- End: page-top-outer -->
<div class="clear"> </div>
<!-- start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat">
<!-- start nav-outer -->
<div class="nav-outer">
<!-- start nav-right -->
<div id="nav-right">
<div class="nav-divider"> </div>
<div class="showhide-account"><img src="images/shared/nav/nav_myaccount.gif" width="93" height="14" alt="" /></div>
<div class="nav-divider"> </div>
<div class="clear"> </div>
<!-- start account-content -->
<div class="account-content">
</div>
<!-- end account-content -->
</div>
<!-- end nav-right -->
<!-- start nav -->
<div class="nav">
<div class="table">
<ul class="select"><li><a href="Acc_superu.xhtml"><b>Accueil</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select">
<li><a href="#nogo"><b>Encadrants</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub ">
<ul class="sub">
<li ><a href="lister_encadrants.xhtml">Lister</a></li>
<li><a href="Add_encadrant.xhtml">Ajouter</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select">
<li><a href="#nogo"><b>Entites</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="lister_entites.xhtml">Lister</a></li>
<li><a href="Add_entite.xhtml">Ajouter</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Specialites</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub ">
<ul class="sub">
<li><a href="lister_specialites.xhtml">Lister</a></li>
<li><a href="Add_specialite.xhtml">Ajouter</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="current">
<li><a href="#nogo"><b>Ecoles</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li class="sub_show"><a href="lister_ecoles.xhtml">Lister</a></li>
<li><a href="Add_ecole.xhtml">Ajouter</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- start nav -->
</div>
<div class="clear"></div>
<!-- start nav-outer -->
</div>
<!-- start nav-outer-repeat................................................... END -->
<div class="clear"></div>
<!-- start content-outer ........................................................................................................................START -->
<div id="content-outer">
<!-- start content -->
<div id="content">
<!-- start page-heading -->
<div id="page-heading">
<h1>Lister Ecoles</h1>
</div>
<!-- end page-heading -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
<th class="topleft"></th>
<td id="tbl-border-top"> </td>
<th class="topright"></th>
<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
<td id="tbl-border-left"></td>
<td>
<!-- start content-table-inner ...................................................................... START -->
<div id="content-table-inner">
<!-- start table-content -->
<div id="table-content">
<!-- start message-blue -->
<div id="message-blue">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="blue-left">Welcome back ! </td>
<td class="blue-right"><a class="close-blue"><img src="images/table/icon_close_blue.gif" alt="" /></a></td>
</tr>
</table>
</div>
<!-- end message-blue -->
<!-- start message-green -->
<div id="message-green">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="green-left">
<br /> <h:messages globalOnly="true" /> <br />
</td>
<td class="green-right"></td>
</tr>
</table>
</div>
<!-- end message-green -->
<!-- start product-table ..................................................................................... -->
<f:view>
<h:form >
<h:dataTable binding="#{ecole.dataTable}" value="#{ecole.getEcoleList()}" var="c"
border="0" width="100%" cellpadding="0" cellspacing="0"
styleClass="order-table"
headerClass="order-table-header"
rowClasses="order-table-odd-row,order-table-even-row"
>
<h:column>
<f:facet name="header">
ID
</f:facet>
#{c.idEcole}
</h:column>
<h:column>
<f:facet name="header">
Nom
</f:facet>
#{c.nomEcole}
</h:column>
<h:column>
<f:facet name="header">
Description
</f:facet>
#{c.desc_ecl}
</h:column>
<h:column>
<f:facet styleclass="options-width" name="header">
Options
</f:facet>
<h:commandLink action="#{ecole.editEcoleItem()}" title="Edit" >
<h:graphicImage style="border:0" url="/icones/b_edit.png" />
</h:commandLink>
   
<h:commandLink title="Delete"
onclick="return confirm('Voulez-vous confirmer la suppression?') ;"
action="#{ecole.deleteEcole(c)}"
>
<h:graphicImage style="border:0" url="/icones/b_drop.png" />
</h:commandLink>
</h:column>
</h:dataTable>
<!-- end product-table................................... -->
</h:form>
</f:view>
</div>
<!-- end content-table -->
<!-- start actions-box ............................................... -->
<div id="actions-box">
<a href="" class="action-slider"></a>
<div id="actions-box-slider">
<a href="" class="action-edit">Edit</a>
<a href="" class="action-delete">Delete</a>
</div>
<div class="clear"></div>
</div>
<!-- end actions-box........... -->
<!-- start paging..................................................... -->
<table border="0" cellpadding="0" cellspacing="0" id="paging-table">
<tr>
<td>
<a href="" class="page-far-left"></a>
<a href="" class="page-left"></a>
<div id="page-info">Page <strong>1</strong> / 15</div>
<a href="" class="page-right"></a>
<a href="" class="page-far-right"></a>
</td>
<td>
<select class="styledselect_pages">
<option value="">Number of rows</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</td>
</tr>
</table>
<!-- end paging................ -->
<div class="clear"></div>
</div>
<!-- end content-table-inner ............................................END -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
<th class="sized bottomleft"></th>
<td id="tbl-border-bottom"> </td>
<th class="sized bottomright"></th>
</tr>
</table>
<div class="clear"> </div>
</div>
<!-- end content -->
<div class="clear"> </div>
</div>
<!-- end content-outer........................................................END -->
<div class="clear"> </div>
<!-- start footer -->
<div id="footer">
<!-- start footer-left -->
<div id="footer-left">
Admin Skin © Copyright Internet Dreams Ltd. <span id="spanYear"></span> <a href="">www.netdreams.co.uk</a>. All rights reserved.</div>
<!-- end footer-left -->
<div class="clear"> </div>
</div>
<!-- end footer -->
</body>
</html>