This week's book giveaway is in the Mac OS forum.
We're giving away four copies of a choice of "Take Control of Upgrading to Yosemite" or "Take Control of Automating Your Mac" and have Joe Kissell on-line!
See this thread for details.
The moose likes JSF and the fly likes Component ID has already been found in the view Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Java » JSF
Bookmark "Component ID has already been found in the view" Watch "Component ID has already been found in the view" New topic
Author

Component ID has already been found in the view

Zakaria Ben
Greenhorn

Joined: Sep 10, 2012
Posts: 1
i've a problem of id uniqueness . i got this message when i modify the View definition and then attempt to redisplay the page lister_ecoles.xhtml .
this is error message shown :

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
...

this is my page where I'm redirected after editing ,deleting or adding new school :

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" />
<hutputStylesheet 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>

Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16095
    
  21

Welcome to the JavaRanch, Zakaria!

There is a "Code" button available in the message editor which can be used to generate special formatting tags for formatted text such as Java code and XML. If you use it, your message will be a lot easier to read.

This error is a very common one when you modify a page template and redisplay the page. It comes from the fact that JSF has built a component object tree based on the old definition and that tree doesn't match the new definition. It also can come from using the same ID value for more than one object within the same JSF naming container, since the "id=" attribute is a special XML attribute which by definition may appear once and only once within its XML context. Since your ids are all automatically-generated, however, that's not the problem here.

The only real cure for the stale component object tree is to flush out the old component object tree so that a new one can be built. Often, the easiest way to do this is to simply stop and restart the webapp. It can be improved somewhat by using explicit id definitions on view components, however.


Customer surveys are for companies who didn't pay proper attention to begin with.
 
GeeCON Prague 2014
 
subject: Component ID has already been found in the view