Primefaces enable combobox after click on button - javascript

Use case: I have a value in the edit form which is very important and should not be changed very often. I have decided to have it read only and have button "Change" on the side. After clicking on this button dialog with warning is dispalyed to the user and this readonly field is enabled for changing. (it is a selectOneMenu)
First attempt:
<p:selectOneMenu
id="integrationCombo"
value="#{backendBean.integration.backend}"
widgetVar="backendIntegrationCombo"
disabled="true">
<f:selectItems
value="#{backendBean.backends}"
var="backend" itemValue="#{backend}"
itemLabel="#{backend.name}" />
</p:selectOneMenu>
<p:commandButton type="button"
styleClass="inlineTableCellButton"
onclick="backendIntegrationCombo.enable()"
value="#{msg['button.change']}" />
This enables the combo box, but his value is not send to the server (this is due to disabled=true as i found)
My second attempt was to have editable boolean on the view scoped bean and
disable="#{!bean.editable}" and calling setEditable(true) with command button. This worked well, but for unknown reason now the save action on command button that submits the form stopped working.
Third attempt: render h:outputText with name and combobox (with hidden class) and after change button is clicked switch their hidden classes.
function changeBackend() {
$("#backendName").addClass("hidden");
$("#integrationCombo_input").parent().parent().removeClass("hidden");
}
That works fine too except one thing: after save is done - nothing is rendered (neither ouputText nor combo box)

Related

onchange() event of dropdownlist missing after disabled

I have an ASP.NET MVC project at work. Browser: Internet Explorer (forget what version), but my work machine is 32bit Windows 7.
In one of the view page, I have a dropdownlist. If there is any change, it will populate a text box with certain value. Here is the code (translated to HTML): Please note the drop down list is in a form
<form>
<select id="searchType" name="searchType" onchange="FillMyTextBox()">
<option value="1" selected>A</option>
<option value="2">B</option>
...
</select>
</form>
At the top of page, I have a button called 'Commit'. Once this button is clicked, all fields are disabled and form is submitted. $('input, select').attr('disabled', 'true') The 'Commit' button will be gone, and another button 'Back' appears. This 'Back' button, if clicked, will set all fields editable and form is submitted. $('input, select').removeAttr('disabled') (I guess you are aware of, these two sections of code use jQuery.)
However, once the 'Commit' button is pressed, select has attribute disabled and form is submitted. Once the form / page comes back, I find out the onchange() function is missing in the dropdownlist. Why? I use document.getElementById('searchType).hasAttribute('onchange') and it returns false (when I am in Console tab of Internet Explorer developer tool).
Why the disabled attribute remove the onchange() event of a dropdownlist? Is this a design flaw? I mean if I have many controls on the page, if I disable these controls, but somehow later on enable them back (say user review what has entered, but find out need to re-enter some fields), then I have to re-associate each with its own event, it seems rather inefficient.
[Edit] Stress that drop down list is inside a form and each button will cause the form to be submitted [/Edit]
Try using $('input, select').prop('disabled', false) to see if it works.
Or in other way this page may help. According to the answer assigning attribute uses $("input").attr('disabled','disabled') and removing by $("input").removeAttr('disabled');

Why value assigned using Javascript to Primefaces inputText widget is not sent to server when readonly=true?

I have created specific code that allow a user to load a dialog to specify some search criterias.
The code that call the dialog is
<i class="fa fa-fw fa-dot-circle-o"
onclick="PF('LoadLabelHomoVectoDialog').show();"
/>
<p:inputText
id="CertificationCodeId"
value="#{vC.postLabellingSearchCriteria.certificationCode}"
readonly="true"
/>
The user click on icon and dialogbox is displayed.
The user make some action in dialog, click on OK button and CertificationCodeId inputText widget is filled directly using Javascript. I can see specific value in it.
Then on main page (not more in dialog), I click on SEARCH button to start a new search using criteria value found in CertificationCodeId inputText widget.
If readonly attribute equal "false", the widget value is correctly transmitted to ViewController on server.
If readonly attribute equal "true", the widget value is NOT transmitted to ViewController on server.
I thought that readonly attribute is only to prohibit user input, but not to prohibit value to be transmitted to server.
What do I wrong ?
Is that a Primefaces issue ?
There exists a answer to my problem to Validate readonly components anyway on form submit that is disctinct from what is proposed !!! What is proposed is a duplicate of the link I propose :-)
JSF and PrimeFaces do not process values when inputs are disabled or readOnly for security purposes. So even a hacker enables the input and submits the form, JSF-PrimeFaces checks the component. So it is standard behavior. You need to enable it on server side.
Found here: https://forum.primefaces.org/viewtopic.php?t=15632
Because I will that visible inputText is READ-ONLY, the only solution is to duplicate READ-ONLY inputText like this ...
<i class="fa fa-fw fa-dot-circle-o"
onclick="PF('LoadLabelHomoVectoDialog').show();"
/>
<p:inputText
id="CertificationCodeId"
value="#{vC.postLabellingSearchCriteria.certificationCode}"
readonly="true"
/>
<p:inputText
id="CertificationCodeIdBecauseJSFdontSentReadOnlyWidgetValueToServer"
value="#{vC.postLabellingSearchCriteria.certificationCode}"
style="display:none"
/>
The value of second widget is sent to server because it is not disabled or read-only.
In Javascript code, I must assign the two widget.
JSF and PrimeFaces do not process values when inputs are disabled or
readOnly for security purposes. So even a hacker enables the input and
submits the form, JSF-PrimeFaces checks the component.
I think now, that issue that JSF/Primefaces want to avoid, is always there because an hacker can change content of the hidden widget.
The only thing I see is that the code is more complex and less readable :-)
Why to do simple when it is possible to do complex ?

in firefox entering data into a textbox which acts as a radio button needs a double click

In mozilla firefox entering data into a textbox which acts as a radio button needs a double click...how to make it possible through single click.Even after selecting the radio button and If i click the textbox once and try to enter only the radio button gets selected and the data is not entered.
For Firefox, the first click in to select the radio button, which gets the focus (honnestly don't know why it's different with other browsers).
I think your solution will be to use Javascript... See this jdfiddle, I've update your code ;)
The idea is to have two inputs not linked in the HTML, but linked via the onclick (or onfocus) function, like:
<input type="radio" name="address-chosen" value="1" id="address-switch_1" />
<input type="text" name="address-item_1" value="1" onclick="selectRadioButton('address-switch_1')"/>
My question is: what's your final objective? Because when you submit the form, you'll have to take into account that you have two separate inputs... or maybe update the value of the radio button with JS, too?

execute f:setPropertyActionListener when click on button after onclick attribute

in one page I have a datatable that contains all users, each line contains two additional columns "edit" and "delete", the problem is on the botton delete
when the user click on "delete" button I show him a confirmation dialog with component primefaces and if he clickon "ok" I run a method that delete user from database
but the problem is in the button :
<p:column>
<p:commandButton actionListener="#{utilisateursController.supprimerUser()}" value="Supprimer" onclick="confirmation.show()" type="button" >
<f:setPropertyActionListener id="jesusi" value="#{car}" target="#{utilisateursController.u1}" />
</p:commandButton>
</p:column>
to delete the user it must be affected to utilisateursController.u1
but when I click in this button the code below
<f:setPropertyActionListener id="jesusi" value="#{car}" target="#{utilisateursController.u1}" />
doesn't be executed
then, the utilisateursController.u1 remains null
do you have any idea
thank you in advance
it doesn't execute because you added type="button". Remove that part. Also, you should be opening the dialog with oncomplete instead of onclick, so that by the time the dialog is opened, the selected row is already in utilisateursController.u1. That way you can include attributes (like name) in the confirmation dialog (you'll have to update dialog from button if you want to do this).

Open a dialog box in same window on selectOneMenu change

I have a jsf page where I have a selectOneMenu and , I want to open a dialog box on selectOneMenu changes.
As a example if user selects a value ="passive" from jsf selectOneMenu it
should open a dialog box or a light box on same page where I want to
display a small jsf form like as here done.(please click on that small image(yes, like this dialog box I want to open after selecting particular
value in selectOneMenu)
)
http://www.primefaces.org/showcase-labs/ui/dialogLogin.jsf
and I also want save that submitted data in my backing bean somewhere so I can store it in to database later.
I dont know how to open a dialog box or light box from backing bean in same window,as we will identify value change using valueChangeListener event or by using ajax event.
I am able to identify which value is selected from selectOneMenu(DropdownMenu), but dont know how to open a dialog box on selecting particular value.
<h:outputLabel
value="* Country: "/>
<h:selectOneMenu
id="someSelect"
value="#{testController.countryName}"
required="true">
<f:selectItem
itemLabel="Select Country"
itemValue=""/>
<f:selectItems
value="#{testController.countryNamesSelectItems}"/>
</h:selectOneMenu>
Supoose we have 2 options in selectItems as India and Austrlia, then If a user choose India
a dialog box should open on same page where a user need to fill some information and need to submit
if he is from india (like here in example http://www.primefaces.org/showcase-labs/ui/dialogLogin.jsf (please click on that small image(yes, like this dialog box I want to open after selecting particular
value in selectOneMenu)
)user will put his username and password and submits data)
Hope this helps
how can we check in primefaces , selected value of selectOneMenu using
java script(jquery) like done here for richfaces
t:selectOneMenu how to get selected value using java script??
You could use the onchange attribute of h:selectOneMenu to open the dialog:
<h:selectOneMenu
id="someSelect"
value="#{testController.countryName}"
required="true"
onchange="dlg.show()">
With dlg as value of the widgetVar attribute of the p:dialog. This will open the dialog before the server is hit.
If you want to open the dialog after completion of an ajax request you can use p:ajax with the oncomplete attribute:
<p:ajax update=".." process=".." oncomplete="dlg.show()"/>
Or if you want to make opening the dialog dependent on the selected value you could use a wrapper function:
function showDialog() {
if($('#IdOfYourSelectOneMenu').val() == 'India') {
dlg.show();
}
}
with:
<p:ajax update=".." process=".." oncomplete="showDialog()"/>

Categories