I have dataTable in my page. Initially I want it to be hidden, and show after fetching data by AJAX request. I know how to fetch data and put into table, but I don't know how to show table if it is hidden. Here is the code:
<h:commandButton value="aa">
<f:ajax execute="from to validTo" render="transportOffers"/>
</h:commandButton>
<p:dataTable id="transportOffers" value="${cargoOffer.transportsForCargo}" var="transport">
<p:column>
<h:outputText value="${transport.company}"/>
</p:column>
</p:dataTable>
Table is visible initially, even if it is empty. If I set rendered="false" it is invisible, and remains invisible also after AJAX request.
How can I make it hidden initially, and to show up after populating with data?
You could try having the dataTable to render conditionally based on the size of the list:
rendered = "#{cargoOffer.transportsForCargo.size() != 0}"
I think if rendered=false then the element isn't created, so the AJAX request can't find it.
Related
I have a button that makes a download and when clicking on the update another component(btnsFGC)
my xhtml:
<p:commandButton ajax="false" value="Descargar CSV"
icon="fa fa-arrow-circle-down"
actionListener="#{biblioF2.setBanderaDescarga(true)}">
<p:dataExporter type="csv" target="tablaDatos" fileName="libros" />
</p:commandButton>
<h:panelGroup id="btnsFGC">
....
</h:panelGroup>
Not sure if i understand your question but ... The whole point of using ajax is that you don't update the whole page, just parts of the page components instead. if you set up ajax to false, then the whole page will be updated. If you just want to update btnsFGC then do this:
set ajax in commandButton to true or take it out since the default value is true, then set update="btnsFGC" in the commandButton. this will only update the components specified by the update attribute. I will also use action instead of actionListener.
I have a table of users, click on a username and a table of the users data is displayed under the table of users. This works only issue is the h:commandLink submits the form and the entire page reloads, the proper data is shown but the page reloads.
The table of user data is on another page which is included from a ui:include. The page has a rendered condition based on the selected users dataset. Here is the button in question:
h:column>
<f:facet name="header">
<h:outputText value="Username " />
</f:facet>
<h:commandLink value="#{user.username}" immediate="true">
<f:param name="username" value="#{user.username}" />
<f:ajax
render="-welcomePageForm-grootPageSubView-adminUserPageSubview-testSubviewUserPage-entriesTable"></f:ajax>
</h:commandLink>
</h:column>
As you can see I am using the absolute path to the table on the included page, this however does not work and I do not know why.
Quick note, this h:column is obviously in a datatable, all of this is in a f:subview not that it should matter. All surrounding elements have an id, there are no nested forms. And I am out of ideas as to why this does not work.
If you could help I greatly appreciate it!
Nested naming container are referenced using the : prefix to the container ids, so render=" " should read something like:
render=":welcomePageForm:grootPageSubView:adminUserPageSubview:testSubviewUserPage:entriesTable"
I'm making form with dropdowns, where user have to make first choice, than using ajax next choices appear. It works just fine. But I wanted to add bootstrap formatting for dropodwns, so I installed bootstrap-select. It work also just fine, but when ajax event renders data for next he renders it in a new dropdown, next to still empty bootstrap formated dropdown. Witch, how can you predict, isn't desired action. Here's code from jsf:
<h:selectOneMenu styleClass="bootstrap-select" id="marka" value="#{searchBean.markiID}">
<f:selectItems value="#{searchBean.listaMarek}" var="c" itemLabel="#{c.marka}"
itemValue="#{c.markaID}"/>
<f:ajax event="change" execute="marka" render="model"/>
</h:selectOneMenu>
<h:outputText value="#{msg.carModel}"></h:outputText>
<h:selectOneMenu styleClass="bootstrap-select" id="model" value="#{searchBean.modelID}">
<f:selectItems value="#{searchBean.listaModeli}" var="p" itemLabel="#{p.model}"
itemValue="#{p.modelID}"/>
<f:ajax event="change" execute="model" render="liczbaDrzwi"/>
</h:selectOneMenu>
In backingbean, when user choose smthging from first dropdown, Is generated list of items for second dropdown, and so on. And this is the result of making choice:
As you can see, ajax makes totally new dropdown, instead of filling already existing.
Thanks for any ideas:)
JSF Ajax works in this way... instead of filling the already existing dropdown... the jee server send a new HTML fragment to replace this dropdown code...
Maybe you could read this link to understand JSF lifecycle...jsf lifeclycle
Did you try using primefaces or richfaces instead of h:selectOneMenu component?
Here is a PrimeFaces example where you can see how to update one dropdown when you select a value on another dropdown... pf example
I'm using JSF with PrimeFaces to make an application as an assignment for college. I'm struggling to get something working. I'm using PrimeFaces and I have a tabview which contains 5 tabs. In one of those tabs I have a dataTable which has several rows and columns. This all works fine, but the problem is that I want to submit the form without rerendering the (entire page). The thing is, every column in the dataTable has a selectBooleanCheckbox, and when that checkbox is selected, a button should disappear. If it's unselected the button should appear. This works fine with onchange="this.form.submit()" or onclick="this.form.submit()" but it refreshes the entire application, and it causes the first tab to be selected, rather than the one I was at. So I'm looking for a solution to be able to submit and re-render some stuff without refreshing the entire program. This is my code:
<body>
<h:form id="customerForm">
<p:dataTable id="customerlist" var="c" value="#{customerBean.customerList}">
<p:column>
<f:facet name="header">Select</f:facet>
<center>
<p:selectBooleanCheckbox value="#{c.selected}" onchange="this.form.submit()"/>
</center>
</p:column>
</p:dataTable>
<h:commandButton id="testtest" value="test" rendered="#{customerBean.numberSelected() == 0}"/>
</h:form>
</body>
I removed most of the columns for the sake of simplicity. What is the solution to this? I've tried using ajax, but that didn't work
<p:selectBooleanCheckbox value="#{c.selected}">
<f:ajax event="click" execute="#form" render="#none"/>
</p:selectBooleanCheckbox>
Do you really need to submit the whole form? If it's enough that the view is being rerenderd try just to update the form. For that you can use the primefaces ajax event.
<p:selectBooleanCheckbox value="#{c.selected}">
<p:ajax update="#form"/>
</p:selectBooleanCheckbox>
If this does not work, please tell us what "..ajax, didn't work" exactly mean. Is there any POST Request submitted? Is any Action/Setter called?
I am using JSF along with RichFaces and Spring Webflow. I am trying to select rows from the data table using and perform some operation on the server side on the selected row. How ever I am facing problem retrieving the data from the checkbox.
<rich:column id="compCheckBox" styleClass="center-aligned-text">
<f:facet name="header">
<h:selectBooleanCheckbox title="selectAll">
</h:selectBooleanCheckbox>
<h:outputText value="Select"/>
</f:facet>
<h:selectBooleanCheckbox id="selectComponent" title="selectAll" value="#{workspace.selectedComponentIds[componentInfo.id]}">
</h:selectBooleanCheckbox>
</rich:column>
And submitting the value using
However only the Ids are restored in the Map, and by default all the values of the ids in the map are shown as 'false'.
How do I get the selected checkboxes to get marked as true in the map.
I have referred link text for information.
How can I resolve this?
Thanks,
Abdul
You need to ensure that the same datamodel is preserved in the subsequent request. The value attribtue of the datatable must return exactly the same datamodel during form submit as it was during display. If the datamodel is not present or different, then chances are that the map of selected items won't be filled as you'd expect.
Update as per the comment: you also need to ensure that the table and the submit button are inside the same <h:form>.