based on this example:
<a4j:commandButton value="Submit"
action="#{mappedAction}"
eventsQueue="#{eventsQueue}"
reRender="#{myId}noteArea"
onclick="this.disabled=true"
oncomplete="#{facesContext.maximumSeverity == null ? '' : 'this.disabled=false'}" />
I'm trying to show and hide a modal panel based on the validation
<a4j:commandButton value="Submit"
action="#{mappedAction}"
eventsQueue="#{eventsQueue}"
reRender="#{myId}noteArea"
oncomplete="#{facesContext.maximumSeverity == null ? '' : rich:component(modalConvalida).hide()}"
onclick="#{rich:component(modalConvalida)}.show()"
/>
Where modalConvalida is a ui:param passed into my facelet composite component, but I can't manage to get the syntax right. the panel shows onclick, but it doesn't get hidden in the oncomplete.
If I put an alert in the second branch of the ? operator I can see that it gets executed, though.
Done:
<a4j:commandButton value="Submit"
action="#{mappedAction}"
eventsQueue="#{eventsQueue}"
reRender="#{myId}noteArea"
onclick="#{rich:component(modalConvalida)}.show()"
oncomplete="#{rich:component(modalConvalida)}.hide()"/>
Thanks anyway
Related
I am working using Thymeleaf for presentation. I am getting value for ordertype from back-end, and I want to check value is in (rushOrder,consignmentOrder,procurementOrder) to display button. I need help to resolve this.
I tried below code
<a th:if="${order.orderStatus == 'rushOrder' || order.orderStatus == 'order.consignmentOrder' || order.orderStatus == 'procurementOrder'}" th:href="#{/orders/edit/{id}(id=${order.id})}" class="btn btn-primary" accesskey="m">Modify</a>
I have a JSF page(already register jQuery in header) contains indicator, reason and a h:commandButton used for submit h:form. The indicator has two values Y and N.
The logic I try to build is when page load and indicator = Y(in jQuery below is indicator.data("prev") == 'Y'), if user toggle from Y to N but NOT type in any word in reason, even the user click the h:commandButton, the form should NOT submitted.
In short, before submit, it should check status of indicator's current and previous value relation is turn from Y to N(I set this logic part in jQuery script section), also need to check reason is not empty. I guess to implement such checking operations may need to re-organize code structure.
Below is my current code which missing this logic, never prohibit a submit and cause conflict on backing bean, . As I am new to jQuery and JSF, could someone tell me how to prevent this submit ? Thank you.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>myPage</title>
<h:outputScript name="jquery.js" target="head"/>
</h:head>
<f:event type="preRenderView" listener="#{myPage.getmyPage}" />
<h:body>
<f:view>
<h:form name ="myPage" id ="myPage">
<table>
<tr>
<td align="left">
<h:selectOneMenu id="indicator" value="#{myPage.indicator}">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
</h:selectOneMenu>
</td>
<td>
<h:inputTextarea id="reason" value="#{myPage.reason}">
</h:inputTextarea>
</td>
<td>
<h:commandButton id="submit" value="Submit"
onclick="if (! confirm('Do you want to update?')) return false" action="#{myPage.update}">
</h:commandButton>
</td>
</tr>
</table>
</h:form>
</f:view>
// TODO: I want to add the logic to prevent h:commandButton submit(e.g disable the button) when reason is empty
// and indicator value turn from 'Y' to 'N', the jQuery section reflect the case when toggle from 'Y' to 'N',
// reason editable, as it need to consider two elements(indicator value/ reason value) at the same time,
// how should the code look like ?
<script type="text/javascript">
$(window).load(function() {
var indicator = $(document.getElementById("myPage:indicator"));
// set the indicator pre data
indicator.data("prev", indicator.val());
// Handle initial status of indicator, when page load, if it is 'Y' open reason field
// if it is 'N' disable reason field,
if(indicator.data("prev") == 'Y') {
$(document.getElementById("myPage:reason")).prop('disabled', false);
} else {
$(document.getElementById("myPage:reason")).prop('disabled', true);
}
// Handle change status of indicator,
indicator.change(function(data){
var jqThis = $(this);
var after_change = jqThis.val();
var before_change = jqThis.data("prev");
if(before_change == 'Y' && after_change == 'N'){
$(document.getElementById("myPage:reason")).prop('disabled', false);
}
});
});
</script>});
</h:body>
Basically you could implement some logic to disable your commandbutton depend on some conditions. For instance :
<h:commandButton id="submit" value="Submit" disabled=#{myPage.isSubmitButtonDisabled()}
onclick="if (! confirm('Do you want to update?')) return false" />
Then in backing bean you should implement logic which you want to achieve like :
public boolean isSubmitButtonDisabled() {
return indicator.equals("N") && reason.isEmpty();
}
Finally to process changes on indicator selection you should add onchange="submit()" to your <h:selectOneMenu> component. Logic for button enabling/disabling could be further expanded with reaction to typed text in reason text area with similiar manner, for instance by addig onkeyup="submit()". Of course this would require to use render attribute to prevent pafe refresh. This is of course some way of do that, but it could point you to solution which satisfy you
I want to show a popup with the requiredMessages of some inputText fields when I click on a submit button. But just only in case of there are those messages. I have tried with bean variable and javascript on the oncomplete tag, but I'm not able to make it work properly. If I put visible="true" in p:dialog, the popup is always displayed, although I try to control it from the commandButton. Now, I have this, but the popup is never displayed:
<h:inputText id="Scheme"
required="true"
requiredMessage="Required.">
</h:inputText>
<h:commandButton id="submitModify" value="#{msg['systemdetail.modify']}"
action="#{sistem.modify}"
oncomplete="if (#{facesContext.maximumSeverity != null}) {dlg1.show();}">
</h:commandButton>
<p:dialog id="popup"
style="text-align:center"
widgetVar="dlg1"
modal="true">
<h:messages layout="table"/>
</p:dialog>
How can I do this? Thanks in advance.
Standard JSF and PrimeFaces does not support request based EL evaluation in on* attributes. RichFaces is the only who supports that. Besides, the standard JSF <h:commandButton> does not have an oncomplete attribute at all. You're probably confusing with PrimeFaces <p:commandButton>
There are several ways to achieve this:
Check the condition in the visible attribute of the <p:dialog> instead.
<p:dialog visible="#{not empty facesContext.messageList}">
or if you want to show validation messages only instead of all messages
<p:dialog visible="#{facesContext.validationFailed}">
Use PrimeFaces <p:commandButton> instead, the PrimeFaces JS API supports the #{facesContext.validationFailed} condition through the args object as well:
<p:commandButton ... oncomplete="if (args.validationFailed) dlg1.show()" />
If you need to check for what kind of messages, here is a way that I made work with primefaces. Since primefaces oncomplete is called after update, by updating the component holding the javascript function, the javascript function can be rebuilt using the latest #facesContext.maximumSeverity} values before executed.
<p:commandButton
oncomplete="executeAfterUpdate()"
update="updatedBeforeOnComplete"/>
<h:panelGroup id="updatedBeforeOnComplete">
<script language="JavaScript" type="text/javascript">
//
function executeAfterUpdate(){
if (#{facesContext.maximumSeverity==null
or facesContext.maximumSeverity.ordinal=='1'})
{
// your code to execute here
someDialog.show();
}
}
//
</script>
</h:panelGroup>
The onclick attribute of my commandButton has some EL dependent Javascript inside. To be more specific, here is that piece of code:
<p:commandButton
onclick="javascript: if('#{userBean.user.friendList.size() gt 0}' == 'true') deleteFriendsConfirmDialog.show(); else friendsAlreadyDeletedErrorDialog.show();"
value="Delete all friends?" />
deleteFriendsConfirmDialog clears the list of friends and updates the #form. The list of friends, commandButton and the dialogs are all in that form.
So I click the button, confirmation dialog comes up (because the length of friends' list is gt 0), I confirm and the list is emptied, the view is updated. However, when I click the Delete all friends? button once more, the confirmation dialog comes up again. Since the length of the list is now 0, I instead expect the error dialog to show.
That, I guess, is because the Javascript written inside onclick is not updated (although the button is in the form).
Edit: Changing #{userBean.user.friendList.size() gt 0} to #{not empty userBean.user.friendList} doesn't work neither.
How come? What's wrong here?
Any help appreciated. :)
Indeed. PrimeFaces (and standard JSF) does not re-evaluate the EL in on* attributes on a per-request basis. It only happens on a per-view basis. RichFaces however does that in <a4j:xxx> components.
You need to solve the problem differently. I suggest to use the visible attribute of the <p:dialog> instead.
<h:form>
...
<p:commandButton value="Delete all friends?" update=":deleteDialogs" />
</h:form>
...
<h:panelGroup id="deleteDialogs">
<p:dialog id="deleteFriendsConfirmDialog" visible="#{facesContext.postback and not empty userBean.user.friendList}">
...
</p:dialog>
<p:dialog id="friendsAlreadyDeletedErrorDialog" visible="#{facesContext.postback and empty userBean.user.friendList}">
...
</p:dialog>
</h:panelGroup>
An alternative is to use PrimeFaces' RequestContext in the bean's action method which allows you to execute JavaScript code programmatically in bean's action method (although this tight-couples the controller a bit too much with the view, IMO).
<p:commandButton value="Delete all friends?" action="#{userBean.deleteAllFriends}" />
with
RequestContext context = RequestContext.getCurrentInstance();
if (!user.getFriendList().isEmpty()) {
context.execute("deleteFriendsConfirmDialog.show()");
} else {
context.execute("friendsAlreadyDeletedErrorDialog.show()");
}
Unrelated to the concrete problem, your original onclick, while it does not work out in your particular case, shows some poor practices. The javascript: pseudoprotocol is superfluous. It's the default already. Remove it. Also the test against == 'true' is superfluous. Remove it. Just let the EL print true or false directly. The following is the proper syntax (again, this does not solve your problem, just for your information)
<p:commandButton
onclick="if (#{not empty userBean.user.friendList}) deleteFriendsConfirmDialog.show(); else friendsAlreadyDeletedErrorDialog.show();"
value="Delete all friends?" />
It would have worked if you were using RichFaces' <a4j:commandButton>.
<a4j:commandButton
oncomplete="if (#{not empty userBean.user.friendList}) deleteFriendsConfirmDialog.show(); else friendsAlreadyDeletedErrorDialog.show();"
value="Delete all friends?" />
I need to disable couple of HTML Buttons on the page based on a boolean variable coming from the server.
I can access the variable on the JSP page. Do I need an event listener for this task? Any similar example would help a lot.
I'm not sure of the exact syntax but you could do something like this..
<input type="button" <%= disableFlag ? "disabled=\"disabled" : "" %> />
You don't need JS, just add the disabled property to your button.
<button type="button" disabled="disabled">Click Me!</button>