Good Afternoon!
I have a situation and I don't know how solve it!
I'm using primefaces and I have a fieldSet with several fields and a commandButton called "Save" disabled inside it. So I need to enable the commandButton if any value of any field were modified. I know that there's the "onChange" event, but I have many fields, I would like to know if there's a way to check the whole form, I mean all fields at once, not field by field!
I'm using Primefaces 5.1
PS: If I wrote something wrong please sorry, just ask me and I will try to put it in other words!
Thank you all in advance
Related
I have a strange situation where one needs to dynamically populate dropdown values. The best idea I have come up with is creating a button, which triggers ajax request that fetches new dropdown values and on complete updates the dropdown and displays it.
I was wondering if there is any other more elegant way of handling situations like this. I am using the latest primefaces version 11.0.0.
I suggest to use the p:autoComplete component with the dropdown attribute set to true instead. It allows you to get the values when the button is clicked or when a query is typed. You don't need to take care of updating the component yourself. The only thing you need to do is have a completeMethod in your bean or have a completeEndpoint (REST endpoint).
With PrimeFaces 12 you can even (re)use a LazyDataModel as a suggestions provider.
When fields are remove from DOM due to hideExpression, its values in the model still exits and send on submit.
Using
angular-formly v8.4.1
angular-formly-templates-bootstrap version 6.5.1
¿How can I remove hidden Fields from de model or set them as null?.
Here you have an example of the problem:
http://angular-formly.com/#!/example/field-options/hide-fields
I want the checkbox state do not send in the model if checkbox is hidden.
Because if this checkbox is used for hide another third field, if we hide checkbox while is checked (using a hideExpression on it) this third field still show in the DOM which is a bit weird behavior because if checkbox is removed the third dependen field must be removed.
I have been able to observe that by simply putting null in the model the fields that are no longer in the DOM perfectly hide the dependent fields in chain
Please help to refresh model when hide fields.
Thank you in advance (sorry my bad English)
set it to use ng-if as the hideDirective in the formly-form
I am displaying records using datatable. I am showing a edit & delete button for each row. But now I want to show edit/delete button only for first 30 records. Can someone tell me how can I do this?
First of all define rowIndexVar attribute value for p:datatable
<p:dataTable rowIndexVar="rowIndex">
Now you can achieve it client side using rendered attribute :
rendered="#{rowIndex lt 30}"
Since you are using primefaces button then code would be :
<p:commandButton value="edit/delete" rendered="#{rowIndex lt 30}" />
Steps:
You want the button to conditionally render, so confirm that you
understand how to conditionally render a component (use rendered).
You want to only render the first 30 records, so confirm that you
understand how to access the loop index.
Combine the two, and you have a working solution.
If you have any specific problem performing these steps that you cannot solve yourself, please feel free to post another question.
I feel that your question lacks information but I'll try to be of some help..
You seem to be using JSF. Since you are using JSF you'd probably best solve this on the server side, in your backing-bean.
when we type into autoComplete, primefaces automatically highlighted first shown item. so when we press enter key that item will be selected. how can i change the behavior of enter key, so when it pressed, just entered text be submitted in backing bean property.
I know we can hit ESC button then continue but but user don't like it.
I am using primefaces 5.0 & jsf 2.1.11
What helped me to solve the same issue where the answers here and here. Basically, you have to override 2 different behaviours.
First one is the default selection of the first result, that can be achieved adding this to your autocomplete (as stated by the accepted answer in the first link, available in primefaces for versions 5.1.5, 5.0.14 and 5.2):
autoHighlight="false"
The second thing you want to override is the behaviour when Enter is pressed, as you want the form that contains the autocomplete to be submitted. For doing so, just add this code to either the containing form or the autocomplete:
onkeyup="if (event.keyCode == 13) {
document.getElementById('[searchFormId]:[submitButtonId]').click();
return false; }"
Change the ids between square brackets for your own ones and it's done.
PS: I know this is a rather old question but it still applies to the current version of primefaces (6.1 when this question was answered). And I also think it can help to have both changes combined in one answer.
Truth be told, this feels like a bug. Richfaces do that implicitly (submit on enter while suggesting). I haven't found an official fix so I did some research and turns out the simplest way is to override the JS function that resolves key presses. The whole autocomplete js is here. You just need to override the bindKeyEvents function so you declare it likewise:
PrimeFaces.widget.AutoComplete.prototype.bindKeyEvents = function () {
Then add the rest of the code for this specific function from the JS I mentioned before. I've omitted that code so it's more readable. Then you want to find a switch that resolves different keys that have some behavior mapped to them. And under the code:
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
Add something like:
if (highlightedItem.length == 0) {
document.getElementById("<your_form_id>").click();
_self.hide();
} else {
highlightedItem.click();
}
Also, make sure that you got forceSelection and the autohighlight off on the autocomplete component.
The problem in the JS is that even though you haven't selected any item from the suggestions it still triggers the event that tries to click the item... which doesn't even exist.
This is the simplest way as I said... you can also create your own autocomplete implementation and override the behavior there. But that's a lot of work and if you only need this one feature I suggest overriding the JS function.
In order to override the original JS with your custom one you need to make sure yours is loaded after the original one. To do that you can either use h:outputScript or simply just load the javascript like you're used to... but in the body (not the head).
Also there's probably a fancier way than having to specify the form id. But I just wasted too much time searching for a solution that I had to get it done real fast.
I have a form which one of it's fields is a code and description, also a button for opening a popup window that contains a list of all of the available codes.
when the user double clickes a row from that table i want to set these values to the code and description. - how can this be done?
Another question, I want to create this popup and table to be initialized dynamically - by that i mean that if i have a few forms in my application, when ever i have a field which has a description i want to be able to open this popup and to see the available list for that field. (every field can be from a diffrent table). is it possible to create something like that? if so, how?
Any help will be appritiated,
Thank's In Advance.
Yes, it is possible. Even more, many component libraries have ready to use popup/dialog components, such as RichFaces with <rich:popupPanel> and PrimeFaces with <p:dialog>.
If you do not want to use a component library for some reason, you would need to create a custom component for this which generates basically an absolutely positioned HTML <div> element with a CSS overlay which get shown/hidden by JS on a particular click/action. The HTML/CSS/JS part should be relatively simple if you are familiar with those languages. The JSF part is somewhat hard if you have never created a custom component before, but it should be possible with a composite component as well, so you could also just create one with pure XHTML. The updating/refreshing can just take place by the usual <f:ajax> means.