I was trying to excute an ajax call on search button issue is 404 error.
Main form loads goods, lightbox(jquery works) and when clicking on search issue is 404, debugged to see if method gets call nothing beging called on ajax command button.
<h:form id="mainForm">
<h:commandButton onclick="showLig();" value="Find Person"/>
<div id="moreInfo" class="lightbox" style="display: none;">
<ui:include src="external.xhtml"/>
</div>
</h:form>
external xhtml
<h:inputText id="personSearch" value="#{bean.holdingValue}" ></h:inputText>
<h:commandButton value="Search">
<f:ajax render="#form" execute="personSearch" listener="#{controller.method}"/>
</h:commandButton>
<h:dataTable id="someTable" value="list" var="x">
blah..
</h:dataTable>
Related
I have the below code
<h:form enctype="multipart/form-data">
<p:panel id="panelEmployee">
<h:commandButton value="Go" action="#{employee.getFirstEmployee()}">
<f:ajax render="panelEmployee" execute="#form"/>
</h:commandButton>
<p:fileUpload value="#{employee.file}" mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
</p:panel>
</h:form>
When i clicked on go button and if the form enctype is multipart/form-data then the first ajax call is ok, the second one gives this javascript error
SCRIPT5007: Unable to get value of the property 'contentWindow': object is null or undefined
Can anyone please suggest?
Thanks.
I am trying to add records to datatable by submitting a form built using JSF and primefaces which gets popped up from the page containing datatable.On submit of the form the data gets updated to database but i need to refresh/update the datatable with the submitted data.Is there any way using which i can refer the main page on submit from the form so that i can refresh/update the datatable.
JSF code snippet containing datatable
<h:form id="lpcForm">
<!-- <p:growl id="messages" showDetail="true" /> -->
<div id="content">
<h:commandLink ajax="true" id="cmdLinkAdd" value="Add" action="#{lpcBean.addRecord}"
target="_blank" update="#form" process="#this" />
<p:dataTable var="lpcData" id="lpcDataTable" widgetVar="lpcTable"
value="#{lpcBean.lpcIdList}" selection="#{lpcBean.selectedRows}"
editable="true" scrollable="true" scrollWidth="1110"
scrollHeight="330" styleClass="datatable">
<!--Contents of the table-->
</p:dataTable>
</div>
On clicking the command link i get the web page popup through which i can submit the data,the snippet of which is as below
<h:form id="addLpc">
<p:focus context="addLpc" />
<div align="center">
<h:panelGrid id="addLpcForm" columns="3" >
contents of the form
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit" ajax="true"
action="#{lpcRecordAddition.formSubmit}" />
<h:outputText />
</div>
</h:form>
on submit of this form i need the datatable in other page to get updated.
Use the following for the commandButton:
<p:commandButton id="submitButton" value="Submit" ajax="true"
action="#{lpcRecordAddition.formSubmit}" update=":lpcForm:lpcDataTable" />
I have a problem that my AJAX requests are not firing in JSF, for 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 the id's match, p should return 'hidden' class and not be seen.
}
}
Originally I had problems because instead of hiding and showing with CSS, I was using the "rendered=" attribute. However, I heard that partial rendering of views can break AJAX, so I phased it out, hoping that not partially rendering the view (only hiding and showing it) would fix the problem.
However this ajax is still not calling the method I specified in the listener attribute (the entire page is a lot bigger and uses a lot more AJAX, though the rest of it works until these buttons are pressed, then other ajax buttons stop responding.)
If I change the button type to submit, it will actually perform the listener method if I press the button twice, but then the other ajax links don't call their respective listener methods.
How can I get this to work?
Update:
Here is the information from POST request that 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, like 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 I switch to commandButtons of type "submit" without AJAX, it works as expected (except some of the buttons requires two clicks to activate). So the problem is localized to the f:ajax tags.
Update 3:
The entire base of code for admin.xhtml. IT's a bit unclean because it's in the process of being debugged and trying things to make it 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 Most Active Employees" action="/Admin/activeemployees"/>
<h:commandLink id="customers" target="_blank" value="View Most Active Customers" action="/Admin/activecustomers"/>
<h:commandLink id="movies" target="_blank" value="View Most 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 the answer, and the cause of it is really quite strange, but it makes sense.
In my ID's, I was using EL to define unique ID's for UIComponents (even though this was not necessary). When I remove the EL from the ID's, the ajax works!
I'm presuming (though I'm sure BalusC would give a more thorough answer), was that because the id's aren't static, even though the ID in concept would be the same, it was affecting the way JSF finds UIComponents.
Now I feel dumb, because the problem would've been completely avoidable if I didn't add any superfluous elements.
For example, the code in my original post should be as 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>
Is there any reason for submitting the form by the Javascript Event onclick?
I suggest you to call the action like this:
<h:commandButton id="saveEdit#{customer.id}" value="Submit" actionListener="#{adminService.saveCustomer()}">
<f:ajax render="#form" execute="#form"/>
</h:commandButton>
i'm trying to use an search button which brings back the selected items (can be more than one) and it updates the datatable. Then i have a selectBooleanCheckbox next to each colomn, when user selects "n" items then presses the Select the checked Items it insert DB.
The code can be seen below:
<h:panelGrid columns="5">
<h:form>
<h:outputText value="Item Name"/>
<p:inputText value="#{StockController.itemName}"/>
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
//The code sample below belongs to BalusC see the post here
<h:panelGroup id="results">
<h:form>
<h:dataTable value="#{bean.entities}" var="entity">
<h:column>
<h:selectBooleanCheckbox value="#{bean.checked[entity.id]}" />
</h:column>
...
</h:dataTable>
<h:commandButton value="Select the checked Items" action="#{StockController.insertDao}" >
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
</h:panelGrid>
Now, i have read many blogs and Core javaServer Faces 3, i don't think there is logical error in ajax usage. I tested by removing each ajax then both works fine but whenever i try to use both of cummondButtons with ajax, the second one "Select the checked Items" does not even call the "StockController.insertDao" method.
Any help is appreciated.
Thanks all.
When you want to ajax-render content which in turn contains another form, then you need to include the ID of that form in the render attribute as well, otherwise the other form will lose its view state and nothing will be processed on submit.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results :resultsForm" />
</h:commandButton>
</h:form>
<h:panelGroup id="results">
<h:form id="resultsForm">
...
</h:form>
</h:panelGroup>
If there's however nothing which goes outside <h:form> inside the same <h:panelGroup>, then you can just omit the <h:panelGroup> altogether and re-render the form directly.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results" />
</h:commandButton>
</h:form>
<h:form id="results">
...
</h:form>
This is related to JSF spec issue 790.
See also:
Communication in JSF2 - Ajax rendering of content which contains another form
When the Save button in the popup(pp1) clicked the projects list gets updated.
But when press the update button in the projects list, the render ID :form1:pp1 is not there error comes when its being rendered. If do render="#all" it works, but its not good.
( error : <f:ajax> contains an unknown id ':form1:pp1')
<h:form id="form1" prependid=false>
<h:panelGroup id="projects">
<ui:repeat var="action" value="#{dadadada}" varStatus="status">
<h:commandButton value="Save">
//gives id not found error
<f:ajax event="click" execute="#form" render=":form1:pp1" listener="#{fsfsfsfsfs}" />
</h:commandButton>
</ui:repeat>
</h:panelGroup> // project panel group
//popup
<h:panelGroup id="pp1">
<div id="popup2" class="popup_block">
//save button in the popup
<div class="popupBody_save2">
<h:commandButton image="resources/images/saveBtn.gif" value="Save">
<f:ajax event="click" execute="#form" render="projects" listener="#{dfsfssfs}" />
</h:commandButton>
</div>
</div>
</h:panelGroup>
</h:form>
The :form1:pp1 won't work since you have prependId="false" on the form. The pp1 won't work since it's then looking for the component in the same scope as <ui:repeat> which is by itself an UINamingContainer component.
Open the JSF page in webbrowser, rightclick and View Source to get the generated HTML. Locate the HTML element which is generated by <h:panelGroup id="pp1">. It should look something like this
<span id="foo:bar:pp1">
You need to use exactly this ID prefixed with : in the render attribute.
<f:ajax render=":foo:bar:pp1">
If there's an autogenerated ID part such as j_id0, then you need to give the parent component in question an fixed ID.
If you use prependId=false your panelGroup's id is pp1 instead of form1:pp1. (Assume there is a typo in your attribute "prependID" instead of "prependid")