We are using Richfaces 4.1.0, and I am trying to use an extendedDataTable. I started (for simplicity's sake) with dataTable. The code below works fine, and shows my data in a table, as expected.
<rich:dataTable value="#{recipientBean.recipientList}" var="recipient" selectionMode="none" id="recipientTable">
<rich:column sortable="false" id="col_1" label="Name">
<f:facet name="header">
<h:outputText value="Name" id="name" />
</f:facet>
<h:outputText value="#{recipient.name}" id="rec_name" />
</rich:column>
<!-- More columns below, removed for post brevity -->
</rich:dataTable>
We are expecting a large number of records, so we would like the table to be scrollable. I thought that I could just change the dataTable to extendedDataTable, however, when I do that, no data shows up at all.
I just started to inspect the element in Chrome, and all of a sudden the data showed up. So when I inspect the element, I see the values in the html, but they don't display when the page loads.
Could this be a style issue? An attribute that is missing (something that is needed for extendedDataTable, but not needed for dataTable)?
What else am I missing?
EDIT: I do have this extendedDataTable inside a rich:tabPanel. When I remove the rich:tabPanel it displays correctly (but I really need the tabPanel). Is this a known issue?
EDIT2: It does display correctly if it is on the first tab of the rich:tabPanel.
I found a bug report on the joss site. The work around was to use the switch type of Ajax instead of client for the tab panel.
If it still doesn't work after switching to ajax switchType you may try to use redirect instead of forward, when you navigate to the page with rich:extendedDataTable. To achieve this you may e.g. add ?redirect-faces=true to the page URL.
Related
I'm using p:graphicImage tag in my XHTML page to displaying the same image in small an large :
<f:facet name="header">#{msgs.ATTR_PICTURE}</f:facet>
<h:panelGroup>
<p:graphicImage id="product_thumbnail" styleClass="thumbnail"
cache="false" value="#{imageBean.streamedImageById}">
<f:param name="productId" value="#{_product.id}" />
</p:graphicImage>
<p:tooltip id="imagebigger" for="product_thumbnail" position="right" showDelay="0" showEffect="blind" styleClass="tooltip_thumbnail">
<p:graphicImage value="#{imageBean.streamedImageById}" styleClass="thumbnail_large" cache="false">
<f:param name="productId" value="#{_product.id}" />
</p:graphicImage>
</p:tooltip>
</h:panelGroup>
I would like to avoid the 2 HTML requests systematically for each image to display. Is there a way to avoid that ?
You could use the stream attribute and set it to false.
This will render the image in base64 instead of rendering the URL to the image.
I don't suggest it as the markup will be very big and probably much worse performance.
I you remove the cache="false" from the first p:graphicImage (it defaults to true) the image is retrieved in the first <img ... /> (which the p:graphicImage renders to) on the client and just displayed from the client cache for the second one without retrieving it twice.
The cache="false" might have been there for a reason like you mentioned in the comments, but that is effectively a new question for which there are several Q/A in Stackoverflow but which one is the most appropriate depends on the details of your use case. Your new question might either be a duplicate again or a new valid question on its own... It might even be that returning the cache="true on the first p:graphicImage and replacing the second one with something else (even some pure client-side 'duplication' e.g.) might be a good approach.
I have two problems which are closely related:
I need to update a form inside a tag inside ui:repeat from a dialog at the main page and cannot figure out how (because there are many tags in the ui:repeat and I need to update only one)
naming containers are messed up and lose their "index" when I use id in that form (in case of trying to determine the update path expression...)
reason I need this: updating the 'wholelist' (current situation) breaks all <p:calendar> inside the <p:dialog> somehow (no errors...) (the calendar overlay shows at the first time, but after updating the list it does not appear any more (must reload page again). Also I don't want to update 100 elements each time if only one can be changed
page.xhtml
<h:panelGroup id="wholelist">
<ui:repeat var="entry" value="#{bean.foundEntries}" id="repeatId">
<customTag:someTag entry="#{entry}" />
</ui:repeat>
</h:panelGroup>
...
<p:dialog widgetVar="dialog" id="dialog">
<p:calendar value="#{bean.date}" ... /> <!-- overlay pops up on select until the whole list is refreshed. after that it does not appear until page reload -->
<p:commandButton actionlistener="#{bean.saveSomething()}" update="#{bean.componentToUpdate WHICH DOES NOT WORK...}"/>
</p:dialog>
someTag.xhtml
and within the <customTag:someTag> (which is a tag because of multiple reuses) :
...
<h:form>
... display a lot of data which can be changed by the dialog...
<p:commandButton value="show edit dialog" onComplete="PF('dialog').show()" update=":dialog">
<f:setPropertyActionListener value="??? (#form does not work)" target="#{bean.componentToUpdate}" />
</p:commandButton>
</h:form>
First Question:
I need to refresh one single form from the dialog (=the dialog which needs to know which form I want to refresh, and I have no idea how to do so...)
And how can I get the update-logic working (pass the component to update to the bean so the dialog knows what to update or equal)?
Second Question:
why does JSF generate in case of not defining a id="..." to a naming container within a ui:repeat something like
repeatId:0:j_id_c0_6
repeatId:1:j_id_c0_6
repeatId:2:j_id_c0_6
and when I define a id to the form (<h:form id="formname">) something like
repeatId:formname
repeatId:formname
repeatId:formname
which causes duplicateId (because the lack of the "iterator-number" in the name)?
Does this make sense?
I have solved it; error was elsewhere: I have forgotten in an included tag file which caused the js warning (which broke the calendar).
many thanks
I'm developping with Primefaces 4.0, JSF Mojarra 2.1.7 and jBoss_7.1.1_Final.
The tool I'm creating is mainly a dialog window showing a dataTable with dynamic columns (p:columns)
Those dynamic columns show a pSpinner like this :
<p:spinner id="updateQj_#{colIndex}_#{rowQj.idQbt}" widgetVar="updateQjJs_#{colIndex}_#{rowQj.idQbt}" stepFactor="1" min="0" max="#{rowQj.qbtType}"
value="#{rowQj.quantiteDuJour(qjColonne.property)}" onkeydown="return false;"
styleClass="editQj" rendered="#{not verrouille}" title="Cliquez ici pour modifier la quantité journalière" >
<p:ajax listener="#{recherche.updateQj}" update="#this, :formRecherche:growl" process="#this"/>
<f:param name="idQbt" value="#{rowQj.idQbt}"/>
<f:param name="jour" value="#{qjColonne.property}"/>
<f:param name="ligne" value="#{rowIndex}"/>
<f:param name="colonne" value="#{colIndex}"/>
</p:spinner>
</p:column>
</p:columns>
Everything seems to be working fine till for some unknown reason, the click in one of the columns modifies the current value plus the one previously updated in another column. To see it clearly: if I keep clicking/updating spinners in the same column everything works fine. If I click a spinner of another column it updates both. Any idea would be greatly appreciated.
in primefaces4, p:spinner in a cell made of p:columns>p:column doesn't behave like it should, first clicks work but at some moments, a simple click generates incessant ajax calls as if i clicked each spinner in each cell...After several days of workaround, and thinking that pf makes usage of jquery under the cover i tried by myself. Surprisingly, firebug console logged 'spinner is not a function' and jquery.ui.version was 1.10.3 so i downloaded 1.10.4 on jquery's site and included it in my header after other javascripts. jquery.ui.version showed 1.10.4 and no more error message appeared. :)
Finally, i wrote this in each p:column of p:columns in a p:datatable
<input id="updateQj_#{rowIndex}_#{colIndex}_#{rowQj.idQbt}" widgetVar="updateQjJs" class="editQj" value="#{rowQj.listeDesQj[colIndex].quantiteRealisee}">
</input>
<script type="text/javascript">
jQuery("input[id=updateQj_#{rowIndex}_#{colIndex}_#{rowQj.idQbt}]")
.spinner({ min:0,
max:#{rowQj.qMax},
step:1,
change:function(){ rmt_updateQj([parameters]); } });
</script>
I am using Mojarra JSF (v2.2.10) with Spring (v3.2.5) for a small admin-console on a tomcat (also Twitter Bootstrap for styling).
Basically there is a multiple select box which I can add new entries to via textbox and button. I can also remove entries by selecting them and clicking the remove button.
Here is the relevant code piece:
<h:form>
<h:outputLabel for="selectedEntries" value="Selected entries" />
<h:selectManyListbox id="selectedEntries" value="#{myBean.entriesToRemove}">
<f:ajax/>
<f:selectItems value="#{myBean.selectedEntries}" />
</h:selectManyListbox>
<h:commandButton action="#{myBean.addEntriesToSelection}" value="Add">
<f:ajax render="selectedEntries entriesInput" />
</h:commandButton>
<h:commandButton action="#{myBean.removeEntriesFromSelection}">
<f:ajax render="selectedEntries entriesInput" />
</h:commandButton>
<h:outputLabel for="entriesInput" value="Input" />
<h:inputTextarea id="entriesInput" value="#{myBean.entriesInput}">
<f:ajax/>
</h:inputTextarea>
The fields "entriesToRemove" and "selectedEntries" are simple String Lists and the field "entriesInput" is a String.
Everything works just fine, but when the "selectedEntries" list grows to say 10.000 entries, I hit a performance problem: When I try to add a new entry into this overgrown list, the page freezes for about 30 seconds before it renders the updated list. The same goes for removing an entry. This freeze however does not occur in the method "addEntriesToSelection" but rather afterwards, when the backing bean fields are already updated. So I assume this has something to do with the rendering of the page.
Does anybody have a clue, how I could solve this problem? Is this maybe Mojarra- or JSF-specific?
This is a client side problem, not a server side problem. Some browsers, particularly MS Internet Explorer, are known to be laggy when updating the HTML DOM tree with an "insane" amount of new HTML elements. Certainly 10.000 listbox items is "insane". Google e.g. also doesn't show all those million potential matches at once when you open the search homepage. Instead, it shows an autocomplete-capable input field allowing you to find and filter the relevant data.
Consider turning that listbox into a search/autocomplete input field.
I have a primeface datatable as follows
<p:dataTable id="associatedProductsTable" var="oap"
value="#{checkoutController.associatedProducts}"
styleClass="cssAssociatedProductsTable">
<p:column>#{oap.product.code}</p:column>
<p:column>
<p:selectBooleanCheckbox value="#{oap.includedInOrder}" />
</p:column>
<p:column>#{oap.productPriceTotal}</p:column>
</p:dataTable>
the productPriceTotal field is 0 as long as selectBooleanCheckbox is unchecked. My desire is to set the value of productPriceTotal when user selects the checkbox value of selectBooleanCheckbox
I do not care if this is happening with a postback or dynamically ajax, but no matter how I am doing it I canot get it working.
Thanks
I have done it. Actually I was looking for an example, for some documentation to make it easier for me.
It works now very nice.
The problem was that the update of the table was supposed to be done only once at page load, and I was not doing this. I was loading the data each time on each refresh, so of course, no matter what i was changing, the data was wiped out, by the reload.
if (!FacesContext.getCurrentInstance().isPostback())
{
//load once
}
It works now
Thanks