AJAX not firing in JSF 2.0 -

i have problem ajax requests not firing in jsf, unknown reasons.

admin.xhtml snippet:

<h:form id="adminpanel"> ... <f:subview id="editcustomer#{customer.id}">     <p class="#{adminservice.geteditcustomerclass(customer.id)}">         <h:inputtext id="email#{customer.id}" value="#{adminservice.customeremail}"/><br/>         <h:inputtext id="firstname#{customer.id}" value="#{adminservice.customerfirstname}"/>         <h:inputtext id="lastname#{customer.id}" value="#{adminservice.customerlastname}"/><br/>         <h:commandbutton id="saveedit#{customer.id}" type="button" value="save">             <f:ajax render="@form" event="click" listener="#{adminservice.savecustomer()}"/>         </h:commandbutton>         <h:commandbutton id="canceledit#{customer.id}" type="button" value="cancel">             <f:ajax render="@form" event="click" listener="#{adminservice.canceledit()}"/>         </h:commandbutton>     </p> </f:subview> ... </h:form> 

adminservice.java snippet:

@named @stateless @localbean public class adminservice {      public string geteditcustomerclass(int id) {         return id != customerid ? "hidden" : "";     }      public void savecustomer() {         canceledit();     }      public void canceledit() {         movieid = -1;         customerid = -1;         orderid = -1;         actorid = -1;         employeeid = -1; //if none of id's match, p should return 'hidden' class , not seen.     }  } 

originally had problems because instead of hiding , showing css, using "rendered=" attribute. however, heard partial rendering of views can break ajax, phased out, hoping not partially rendering view (only hiding , showing it) fix problem.

however ajax still not calling method specified in listener attribute (the entire page lot bigger , uses lot more ajax, though rest of works until these buttons pressed, other ajax buttons stop responding.)

if change button type submit, perform listener method if press button twice, other ajax links don't call respective listener methods.

how can work?

update:

here information post request jsf fires on click:

request headers:

accept:*/* accept-charset:iso-8859-1,utf-8;q=0.7,*;q=0.3 accept-encoding:gzip,deflate,sdch accept-language:en-us,en;q=0.8 connection:keep-alive content-length:2186 content-type:application/x-www-form-urlencoded;charset=utf-8 cookie:jsessionid=7342e0de92edc023eecbf706dae3 faces-request:partial/ajax host:www.minimalcomputers.com:8181 origin:https://www.minimalcomputers.com:8181 referer:https://www.minimalcomputers.com:8181/movieproject/admin/admin.xhtml user-agent:mozilla/5.0 (windows nt 6.2; wow64) applewebkit/537.31 (khtml, gecko) chrome/26.0.1410.64 safari/537.31 

form data:

adminpanel:adminpanel adminpanel:representativeactionpane:customerpane:customerslist:0:editcustomer1:email1:phroph@yahoo.com adminpanel:representativeactionpane:customerpane:customerslist:0:editcustomer1:firstname1: adminpanel:representativeactionpane:customerpane:customerslist:0:editcustomer1:lastname1: adminpanel:representativeactionpane:customerpane:customerslist:1:editcustomer1:email1:phroph@yahoo.com adminpanel:representativeactionpane:customerpane:customerslist:1:editcustomer1:firstname1: adminpanel:representativeactionpane:customerpane:customerslist:1:editcustomer1:lastname1: adminpanel:representativeactionpane:customerpane:customerslist:2:editcustomer1:email1:phroph@yahoo.com adminpanel:representativeactionpane:customerpane:customerslist:2:editcustomer1:firstname1: adminpanel:representativeactionpane:customerpane:customerslist:2:editcustomer1:lastname1: adminpanel:representativeactionpane:customerpane:customerslist:3:editcustomer1:email1:phroph@yahoo.com adminpanel:representativeactionpane:customerpane:customerslist:3:editcustomer1:firstname1: adminpanel:representativeactionpane:customerpane:customerslist:3:editcustomer1:lastname1: adminpanel:representativeactionpane:customerpane:customerslist:4:editcustomer1:email1:phroph@yahoo.com adminpanel:representativeactionpane:customerpane:customerslist:4:editcustomer1:firstname1: adminpanel:representativeactionpane:customerpane:customerslist:4:editcustomer1:lastname1: javax.faces.viewstate:1088200739038195170:4402027985833798256 javax.faces.source:adminpanel:representativeactionpane:customerpane:customerslist:0:editcustomer1:canceledit1 javax.faces.partial.event:click javax.faces.partial.execute:adminpanel:representativeactionpane:customerpane:customerslist:0:editcustomer1:canceledit1             adminpanel:representativeactionpane:customerpane:customerslist:0:editcustomer1:canceledit1 javax.faces.partial.render:adminpanel javax.faces.behavior.event:click javax.faces.partial.ajax:true 

response header

cache-control:no-cache content-type:text/xml;charset=utf-8 date:thu, 02 may 2013 21:45:05 gmt server:glassfish server open source edition 3.1.2.2 transfer-encoding:chunked x-powered-by:servlet/3.0 jsp/2.2 (glassfish server open source edition 3.1.2.2 java/sun microsystems inc./1.6) x-powered-by:jsf/2.0 

update 2:

when switch commandbuttons of type "submit" without ajax, works expected (except of buttons requires 2 clicks activate). problem localized f:ajax tags.

update 3:

the entire base of code admin.xhtml. it's bit unclean because it's in process of being debugged , trying things make work.

<?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:ui="http://java.sun.com/jsf/facelets"       xmlns:f="http://java.sun.com/jsf/core">     <h:head>         <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"/>         <h:outputstylesheet name="header.css" library="css"/>         <link href='http://fonts.googleapis.com/css?family=noto+sans' rel='stylesheet' type='text/css'/>         <title>videopile - administration</title>     </h:head>     <h:body>         <div id="body">             <ui:insert name="header" >                 <ui:include src="/templates/header.xhtml" />             </ui:insert>             <div id="content">                 admin.                 <h:form id="adminpanel">                     <!--<h:commandbutton id="admin" value="administrative actions" rendered="{adminservice.hasadminprivileges()}">                         <f:ajax render="@form" event="click" listener="{adminservice.toggleadminpane()}"/>                     </h:commandbutton>-->                     <h:commandbutton id="manager" type="button" value="manager actions" rendered="#{adminservice.hasmanagerprivileges()}">                         <f:ajax render="@form" event="click" listener="#{adminservice.togglemanagerpane()}"/>                     </h:commandbutton>                     <h:commandbutton id="representative" type="button" value="representative actions" rendered="#{adminservice.hasrepresentativeprivileges()}">                         <f:ajax render="@form" event="click" listener="#{adminservice.togglerepresentativepane()}" />                     </h:commandbutton>                     <br/>                     <!--<f:subview id="administrativeactionpane" rendered="{userservice.showadminpane}">                         admin pane                     </f:subview>-->                     <f:subview id="managerialactionpane">                         <div class="#{adminservice.getshowmanagerclass()}">                         manager pane:                         <h:commandlink id="editmovies" value="movies">                             <f:ajax render="@form" event="click" listener="#{adminservice.togglemoviepane()}"/>                         </h:commandlink>                         <h:commandlink id="employes" value="employees">                             <f:ajax render="@form" event="click" listener="#{adminservice.toggleemployeepane()}"/>                         </h:commandlink>                         <h:commandlink id="sales" target="_blank" value="view sales report" action="/admin/salesreport"/>                         <h:commandlink id="employees" target="_blank" value="view active employees" action="/admin/activeemployees"/>                         <h:commandlink id="customers" target="_blank" value="view active customers" action="/admin/activecustomers"/>                         <h:commandlink id="movies" target="_blank" value="view active movies" action="/admin/activemovies"/>                         <br/>                         <f:subview id="movieseditpane">                             <span class="#{adminservice.getshowmovieclass()}">                                 movies.                                 <ui:repeat value="#{adminservice.currentmoviepage}" var="movie">                                     #{movie.name}                                     <h:commandlink id="edit" value="edit">                                         <f:ajax render="@form" event="click" listener="#{adminservice.editmovie(movie.id)}"/>                                     </h:commandlink>                                      <h:outputtext rendered="#{adminservice.movieid eq movie.id}" value="edit"/>                                     <br/>                                 </ui:repeat>                             </span>                         </f:subview>                         <f:subview id="employeeseditpane">                             <span class="#{adminservice.getshowemployeeclass()}">                                 employees.                                 <ui:repeat value="#{adminservice.currentemployeepage}" var="employee">                                     #{employee.firstname} #{employee.lastname}                                     <h:commandlink id="edit" value="edit">                                         <f:ajax render="@form" event="click" listener="#{adminservice.editemployee(employee.id)}"/>                                     </h:commandlink>                                      <h:outputtext rendered="#{adminservice.employeeid eq employee.id}" value="edit"/>                                     <br/>                                 </ui:repeat>                             </span>                         </f:subview>                         </div>                     </f:subview>                     <f:subview id="representativeactionpane">                         <div class="#{adminservice.getshowrepresentativeclass()}">                             customer representative pane:                             <h:commandlink id="recordorder" value="record order">                                 <f:ajax render="@form" event="click" listener="#{adminservice.toggleorderpane()}"/>                             </h:commandlink>                             <h:commandlink id="customers" value="customers">                                 <f:ajax render="@form" event="click" listener="#{adminservice.togglecustomerpane()}"/>                             </h:commandlink>                             <h:commandlink id="mailinglist" target="_blank" value="view mailing list" action="/admin/mailinglist"/>                             <f:subview id="orderpane">                                 <span class="#{adminservice.getshoworderclass()}">                                     create new order.                                 </span>                             </f:subview>                             <f:subview id="customerpane">                                 <span class="#{adminservice.getshowcustomerclass()}">                                     customers.                                     <ui:repeat id="customerslist" value="#{adminservice.currentcustomerpage}" var="customer">                                         <f:subview id="editcustomer#{customer.id}">                                             <p class="#{adminservice.geteditcustomerclass(customer.id)}">                                                 <h:inputtext id="email#{customer.id}" value="#{adminservice.customeremail}"/><br/>                                                 <h:inputtext id="firstname#{customer.id}" value="#{adminservice.customerfirstname}"/>                                                 <h:inputtext id="lastname#{customer.id}" value="#{adminservice.customerlastname}"/><br/>                                                 <h:commandbutton id="saveedit#{customer.id}" type="submit" value="save" actionlistener="#{adminservice.savecustomer()}">                                                     <f:ajax render="@form" event="click" execute="@form"/>                                                 </h:commandbutton>                                                 <h:commandbutton id="canceledit#{customer.id}" type="submit" value="cancel" actionlistener="#{adminservice.canceledit()}">                                                     <f:ajax render="@form" event="click" execute="@form" />                                                 </h:commandbutton>                                             </p>                                         </f:subview>                                         <f:subview id="viewcustomer#{customer.id}">                                             <p class="#{adminservice.getviewcustomerclass(customer.id)}">                                                 #{customer.email}<br/>                                                 #{customer.firstname} #{customer.lastname}<br/>                                                 <h:commandlink id="suggestion" target="_blank" value="view suggestions" action="/admin/customersuggestions">                                                     <f:param name="user" value="#{customer.id}"/>                                                 </h:commandlink>                                                 <h:commandbutton id="edit" type="submit" value="edit" action="#{adminservice.editcustomer(customer)}">                                                     <f:ajax render="@form" event="click" execute="@form" />                                                 </h:commandbutton>                                             </p>                                         </f:subview>                                         <br/>                                     </ui:repeat>                                 </span>                             </f:subview>                         </div>                     </f:subview>                 </h:form>             </div>         </div>     </h:body> </html> 

i found answer, , cause of quite strange, makes sense.

in id's, using el define unique id's uicomponents (even though not necessary). when remove el id's, ajax works!

i'm presuming (though i'm sure balusc give more thorough answer), because id's aren't static, though id in concept same, affecting way jsf finds uicomponents.

now feel dumb, because problem would've been avoidable if didn't add superfluous elements.

for example, code in original post should follows:

<h:form id="adminpanel"> ... <f:subview id="editcustomer">     <p class="#{adminservice.geteditcustomerclass(customer.id)}">         <h:inputtext id="email" value="#{adminservice.customeremail}"/><br/>         <h:inputtext id="firstname" value="#{adminservice.customerfirstname}"/>         <h:inputtext id="lastname" value="#{adminservice.customerlastname}"/><br/>         <h:commandbutton id="saveedit" type="button" value="save">             <f:ajax render="@form" event="click" listener="#{adminservice.savecustomer()}"/>         </h:commandbutton>         <h:commandbutton id="canceledit" type="button" value="cancel">             <f:ajax render="@form" event="click" listener="#{adminservice.canceledit()}"/>         </h:commandbutton>     </p> </f:subview> ... </h:form>