I'm new to primefaces, so I probably did a newbie mistake, but I simply can't google find my answer.
I'm trying to make a hidden panel show after I click on the checkbox, but it doesn't show.
My html looks as follows:
<br></br> Choose one <br></br><br></br>
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’visible’);" >
</p:selectBooleanCheckbox>
<h:outputText value=" click " />
</h:panelGrid>
<p:panel id="testid" header="TESTHDR" style="display:none" >
<h:panelGrid columns="2" cellpadding="10">
<p:selectBooleanCheckbox value="#{selectBooleanView.mTest}">
</p:selectBooleanCheckbox>
<h:outputText value=" test " />
</h:panelGrid>
</p:panel>
The problem is that my testid panel doesn't show after I click on the checkbox.
I'm probably doing the checkbox action listener wrong, but I honestly can't see the problem myself.
change display visible to display block like this because display visible does not exist in css.
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’block’);" >
I think thats it if youre code works fine.
Prime faces mangles IDs similar to ASP.NET. Both ensure that the ID is unique across the page so you get something like id="base_container_child_container_your_control_id"
You should find the way to "unmangle" it. Again in .NET you have control.ClientID which you can get from the server. Not sure about PF equivalent.
Anyhow, the solution would be to add name attribute and use
$('input[name=your-id]') // matches exactly 'your-id'
$('input[name^=your-id]') // matches those that begin with 'your-id' if you have group of them
OR use like selector
id*='value'
Related
I have a list of autocompletes that is rendered using a p:dataList. Something like shown below:
<h:panelGroup layout="block" id="outerPanel">
<p:dataList rendered="#{bean.myModel.listOfItems.size()>0}"
var="additionalMP"
value="#{bean.myModel.listOfItems}"
rowIndexVar="index" emptyMessage="">
<div class="wrapper ui-g">
<div>
<p:autoComplete
cache="true"
value="#{bean.myModel.listOfItems[index]}"
completeMethod ="#{handler.getAutoCompleteData}"
rendered ="true"
required="false"
scrollHeight="200"
styleClass="custom"
forceSelection="true">
<p:ajax event="query" global="false"/>
<f:attribute name="filter" value="filterName" />
<f:attribute name="mode" value="edit" />
</p:autoComplete>
</div>
<div>
<p:commandLink value="+ Add" actionListener="#{bean.addAutoComplete()}"
update=":formName:outerPanel"></p:commandLink>
</div>
</div>
</p:dataList>
</h:panelGroup>
So, the Add button inserts a new item in the list and I update the container panel so that the newly added item can be rendered on the UI.
As expected the panel is updated and I see another autocomplete on the UI. But the problem is, all the auto completes now don't work. i.e. they stop firing the query event and don't give any suggestions.
Edited: The partial response that updates the section of form with autocomplete fields, contains some script tags, which probably execute on page ready/load event. So I know that basically the newly added prime faces widgets are not being initialized.
Any idea how I can initialize the newly added autocompletes in the DOM?
The reason for all this trouble was an error in javascript that was caused by trying to scrollTo a particular element on the page from the bean. This crappy line of code in the bean was the source of all the trouble. There was no element on the page with the id messages. A glaring example of why UI should not be coupled in such a way.
RequestContext.getCurrentInstance().scrollTo("formId:messages");
I'm trying to update a primefaces dialog every time it pops up.
The dialog is triggered by a calendar field changing and the actual call is made from the bean.
When I call it the first time, the datas are fine but, if I close it and open it again, it'll still show the old datas.
It kinda makes sense: it's rendered just once and then it's shown and hidden and never actually updated.
I was thinking about updating it before the dialog.show() in the bean, but I don't know how to do that.
Any idea?
<p:dialog
site ="sectionDlg"
widgetVar ="Dlg"
minWidth ="430"
modal ="true"
closable ="true"
resizable ="false"
dynamic ="true"
width="450" height="300"
>
<h:form id="Form">
<br/>
<p:panelGrid id ="dates" styleClass="cmt-no-grid-100perc" columns="4">
<calendar attribName ="offerStartDateDlg"
value ="#{bean.startDate}"
writable ="#{false}"/>
<calendar attribName="offerEndDateDlg"
value="#{bean.endDate}"
writable="#{false}"/>
</p:panelGrid>
<div align="center">
<p:commandButton
onclick ="PF('whichSectionDlg').hide()"
>
</p:commandButton>
<p:commandButton
onclick ="PF('whichSectionDlg').hide()">
</p:commandButton>
</div>
</h:form>
This could make things easier
Ok so, I managed to figure it out.
I solved it by updating it from the bean, right before the call
public void show_dlg_method(){
RequestContext.getCurrentInstance().update("Dlg");
RequestContext.getCurrentInstance().execute("PF('Dlg').show()");
}
with "Dlg" being the widgetVar attribute value.
Some code of what you already have is always helpful. However, depending on what triggers the dialog to show up you can:
add an update to the triggering link/button/whatever or
initiate the update by the dialog itself like shown below.
<h:form>
<p:remoteCommand name="updateDialog" update="dialogpanelid" />
</h:form>
<dialog onShow="updateDialog">
<p:outputPanel id="dialogpanelid"> your content here </p:outputPanel>
</dialog>
Note that:
You need the remoteCommand to reside inside h:form
You should always update the dialogs content, not the dialog itself
the client-side id might differ depending on your page structure.
im using Primefaces 3.5 to create a dataTable with filters.
<h:form id="table">
<div class="showRuleStyle">
<p:dataTable id="RuleTable" var="e" value="#{ruleListBean.rules}" filteredValue="#{ruleListBean.filteredRules}" styleClass="ruleTable" paginator="true" paginatorPosition="bottom" rows="15" emptyMessage="Keine Einträge gefunden.">
<p:column id="companyColumn" headerText="Name" filterBy="#{e.name}" filterOptions="#{ruleListBean.filterNameOptions}" >
<h:outputText value="#{e.name}"></h:outputText>
</p:column>
...
<p:column>
<f:facet name="header"></f:facet>
<h:commandButton id="DeleteRuleButton" value="Löschen" styleClass="buttondefault" action="#{ruleListBean.removeRule(e)}" update=":table"></h:commandButton>
</p:column>
</p:dataTable>
</div>
</h:form>
Now, i get the table as intended and can choose an filter which updates the table. But now, if i try to choose a different filter or select the empty filter, nothing happens. If I click the button, it works again, which i think is because of the update of the form.
I tried to add
<p:ajax event="filter" update=":table">
and other events, but it won't work.
Any suggestions?
Greets
Alex
What is the scope of the ruleListBean? I've tried your code and it worked as expected (without the p:ajax).
My ruleListBean is in view scope.
It is suggested to use a scope longer than request like viewscope to
keep the filteredValue so that filtered list is still accessible after
filtering. (PrimeFaces User’s Guide pg. 135)
NOTE: Change h:commandButton to p:commandButton so that you can use the update feature.
I encountered a problem on selectOneMenu component and the primefaces fileupload.
<h:outputLabel value="Categorie :" />
<p:selectOneMenu value="#{composantbean.selectedCategoryId}" required="true" >
<f:selectItem itemLabel="Select categorie" itemValue="" />
<f:selectItems value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" />
<p:ajax update="panlecart2" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
My problem is at the display.
the selectOneMenu is displayed but ItemLabel is hidden with a black color of my theme "trontastic"
and the file upload is not displayed.
This problem no longer exite when I work with explorer instead of chrome
or when I do
<p:commandButton value="Annuler" update="panel1" process="#this">
<p:resetInput target="panel1" />
</ p: commandButton>
I should do, please thank you in advance
when I chnage my methode like this
public String Ajouter(){
selcetitem=new Composant();
return "AjoutC?faces-redirect=true";
}
instead of this
public String Ajouter(){
selcetitem=new Composant();
return "AjoutC";
}
it works fine :)
I am not sure about the root cause but here is a temporary solution:
$(document).ready(function() {
$(document.getElementById('button')).click();
});
And this script execute your button:
<p:commandButton id="button"value="Annuler" update="panel1" process="#this" style="display:none;">
<p:resetInput target="panel1" />
</p:commandButton>
Try to give exact client id of the button inside javascript function. You can detect it via browser's settings.
About problem's itself; p:selectOneMenu showing the selected value inside of a label. I guess sth. overrides it's css, let give an id to your p:selectOneMenu(let say menu) and if it is exists inside of a form(let's say it's id is form). So you can try to change the css of that label via:
$(document.getElementById('form:menu_label')).css("width":150);
Or directly alter the css class which is .ui-selectonemenu label
Also to be able to avoid from view state bug ajax=false should be added into navigation button. Actually navigation should be done via links and their outcome property like here.
Okay. So I'm trying to implement a global filter using commandLinks. The idea is to have an alphabet of commandLinks, which a user can then use instead of typing a letter.
So far, I've got filtering working on the column (will add the filterStyle none once the commandLinks are working).
Using chromes debug tool (ctrl-shift+i), and clicking on the command link, i can see the datatable refresh the list. However, it doesn't filter anything.
I've been using primefaces showcase, and this stack overflow post to base my code on, which is below:
<p:dataTable id="availableSpecies" var="species" value="#{bbWizardBean.speciesPaletteList}"
emptyMessage="Add First Species" dynamic="true"
width="120"
widgetVar="speciesPaletteVar"
scrollHeight="250" scrollRows="20" scrollable="true"
styleClass="width-fix-spcPal-ie" style="width:150px; margin-left: auto; margin-right: auto;"
filteredValue="bbWizardBean.speciesPaletteListFilter">
<f:facet name="header">
<h:outputText value="Species Palette" />
<p:commandLink id="globalFilter" value="A" onclick="$('speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
</f:facet>
<p:column filterBy="#{species.speciesName}"
headerText="Species" style="font-size:13px;" id="speciesColumn">
<h:outputText id="dragIcon" value="#{species.speciesNameSmall}" style="font-size:11px; background-color:silver; cursor:move;"/>
<h:outputText id="dragIconTooltip" value="..." title="Full Name: #{species.speciesName}" rendered="#{species.speciesNameLength > 10}"/>
<p:tooltip for="dragIconTooltip" />
<p:draggable for="dragIcon" revert="true" />
</p:column>
I've removed the rest of the table to make the codebase smaller. I think I'm screwing up the value I should set, but I'm not quite sure how. Any help would be appreciated! First post, so any suggestions to clean up the question is appreciate ;)
Okay, so for some reason (like i thought), the setting of the val for the filter wasn't working right. You need to add two \'s before the : for some reason. If anyone knows, that would be awesome, but the correct code is:
<p:commandLink id="globalFilter" value="A" onclick="$('#positiveRegulationForm\\:availableSpecies\\:speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
Where
positiveRegulationForm is the top form
availableSpecies is the DataTable name
speciesColumn_filter is the filter for the column speciesColumn
Really curious as to why you need the two forward slashes