I am working on JSF application in primefaces in that i am showing an information to the user via <p:messages> .
So when the user click submit the page will processed and the p:messages dialog will triggered to show the information to the user ,
I referred Primefaces p:messages showcase Page
It is working fine..But after it displayed the messages , it is not closing automatically either we need to close that dialog manually or it remains in open stage.
I need it should it close automatically after it displayed the message to user...
How can i do that ...Can anybody give suggestion that how can i do ?
<p:messages id="msgs"> is ultimately rendered as <div id="msgs"> and its contents is then updated with the factual messages to the user.
If you want to clear the message screen after some delay you should use the JavaScript setTimeout function after ajax call has been completed:
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs").html(''); }, 3000);" />
The second parameter of setTimeout function is the delay in milliseconds.
The other alternative is to use <p:growl> instead.
Worked for me for <p:fileUpload>, which was in <p:dataList> and <h:panelGrid> elements.
<p:fileUpload...
oncomplete="setTimeout(function() { $('[id$=mr-upload-messages]').hide(1000); }, 2000);">
...
<p:messages id="mr-upload-messages" showDetail="true" showSummary="false" closable="true"/>
I have used jQuery $('[id$=mr-upload-messages]' to find id's which ends with mr-upload-messages, because Primefaces adds it's unique identifier at the beginning of id.
$('#msgs').html(''); immediately hide in 3 seconds but if you want to hide slowly as jquery hide method do this..
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs').hide(1000); }, 3000);" />
hide(1000); hiding motion will be completed in 1 second
I came across the attention, and did it this way:
function hideMsg(){
$("#msg").delay(1000).hide(1000);
}
oncomplete="hideMsg()"
Related
I'm working on icefaces upgrade from 1.8 to 3.3 as well as jsf from 1.2 to 2.0.
I have used this link as reference for icefaces upgrade
I'm using ice:datatable in which I have column of checkbox which is grouped for single worker.Check picture which is of before upgrade.
ISSUE 1:
Now Problem faced after migration is that the valuechangelistener of ice:selectbooleancheckbox works fine when I check then uncheck the checkbox of a single worker. But when I do following steps:
Check first worker (This updates the Assigned door column ).
Then check other worker . This unchecks the previous checked worker and also unchecks currently checked worker.
To analyse if there is any issue in phase I used balus C blog to check phase of icefaces when it hits valuechangelistner . Then I found on my second check 2 or more valuechangelistner are called one for previous worker other for current worker(Sometimes twice) this all happens in same invoke application phase.
ISSUE 2:
ValueChangeListener gets called even after Clicking "OK" button or "CANCEL".
Fixed it by adding f:param in ice:commandButton and checking for the param in valuechangelistener method.
Tried:
To change all ice tags in the page to ace tags(Related to datatable i.e datable ,row and column).
Result : Same issue with ace valuechangelistener as well as distorted style. Maybe because I could not find ice:rowHeader equivalent in ace tags and also much more.
Changed only checkbox column to ace:column. Valuechangelistener worked fine but issue with "groupOn" attribute so changed it to "groupBy" and condition="group" still may be it did not work because I used ice:datatable which doesn't support it.
Then I tried to implement groupOn functionality manually. Using rowspan and rendering single checkbox for single worker . But rowspan didn't work. Also when I tried to render checkbox, its style is not exactly same as I need. Check this hattp://postimg.org/image/ih2mgoh7d/ remove 'a' from 'hattp'.
<ace:column groupBy ="#{item.workerName} + #{item.workerId}" rowspan="2"
styleClass= "alignSBChbx" >
<ice:setEventPhase events="ValueChangeEvent"
phase="INVOKE_APPLICATION">
<ice:selectBooleanCheckbox id="dwaCheckbox" value="#{item.select}"
style=" width:'#{appViewSettings.checkboxSize}';
height:'#{appViewSettings.checkboxSize}';"
valueChangeListener="#{dockWorkerAssignmentBean.doorAssignmentChange}"
partialSubmit="true" immediate="true"
disabled="#{!empty dockWorkerAssignmentBean.errorMap['dockWorkersAssignmentPopup:assignmentErrorField']}"
rendered="#{item.visible}">
<f:attribute name="workerIdSelected" value="#{item.workerId}" />
<f:attribute name="assignmentIdSelected" value="#{item.assignmentId}" />
</ice:selectBooleanCheckbox>
</ice:setEventPhase>
</ace:column>
backend
public final void doorAssignmentChange(final ValueChangeEvent event) {
System.out.println("inside door Assignment...");
final String workerIdSelected = (String) event.getComponent().getAttributes().get(
"workerIdSelected");
// unrelevant code
}
}
I have a Jquery pop-up that contains a form, and the submit button disabled. The button is supposed to get enabled once all fields have been filled. I ran a javascript script for this. However, it didn't work, and the page got refreshed. I added another button just to test the enabling.
<'button id="submitButton" disabled='true' data-theme="b" data-icon="check">Done<'/button'>
<'button id="x" onclick="enableButton()"'>Enable<'/button'>
The script:
function enableButton()
{
document.getElementById("submitButton").disabled=false;
}
This didn't work. I tried scripting it according to the jquery plugin guidelines like so:
$("#x").onclick(function()
{
$("#submitButton").button('enable');
});
This didn't work either. Any idea why? Again, this form is in a jquery pop-up.
Try:
$("#submitButton").removeAttr('disabled');
In your click event
You can try this;
$("#submitButton").removeClass('ui-disabled');
First of all, Thanks a lot all of you for your continuous support.
I have a problem releated .xhtml and 'f:ajax'.
I am setting richfaces:collapsiblepanel 'expanded' attribute by bean variable which is default collapsed and on blur event it gets expanded. I want to set focus a UIComponent after f:ajax request compeleted. And for that I have written a function in javascript and called it in 'onevent' of f:ajax.
But onevent function fires before panel open and I can not able to set focus on UIComponent which are define in that collapsible panel.
How can I setFocus or How can I fire that function after ajax request compeleted ?
Thanks in advance.
Your js function should look like this
function doTheFocus(data) {
if (data.status === 'success') {
//here goes the js code that will set the focus
//this code will be executed only when the ajax will be done
}
}
And here is how your f:ajax will look like
<f:ajax onevent="doTheFocus" />
If you want to call the js function of the focus when the panel is opened you can try
<rich:collapsiblePanel onswitch="doTheFocus"
or (I'm not sure...)
<rich:collapsiblePanel onswitch="doTheFocus()"
If you eventually will use the onswitch , you might be needed to add some logic inside doTheFocus function to check if the panel is expanded or not...
I have a custom component location. I want that, when a change is done, the model is update so another component (an autocomplete) is to show only results related to the location value. Also, that component is rerendered to reset it.
I have a page with the following code (simplified):
<h:form id="ticketForm">
...
<loc:location id="locationId" <-- CUSTOM COMPONENT
hiddenFieldValue="#{ticketCtrl.ticket.location}"
visibleFieldValue="#{ticketCtrl.ticket.locationDescription}"
rendered="#{ticketCtrl.ticketModifiable}">
<f:ajax event="changeLocation" render=":ticketForm:gfhId" <-- AJAX CALL.
execute=":ticketForm:locationId" listener="#{ticketCtrl.locationListener}"/>
</loc:location>
...
</h:form>
When the value in the component is changed, the model is updated and :ticketForm:gfhId is rendered as needed, but the listener(which performs additional resets) is not executed.
Attaching the ajax to a simpler control results in the listener being executed; v.g.
<h:inputText id="contactId"
value="#{ticketCtrl.ticket.contactPerson}"
disabled="#{not ticketCtrl.ticketModifiable}">
<f:ajax event="change" render=":ticketForm:gfhId"
execute=":ticketForm:locationId" listener="#{ticketCtrl.locationListener}"/>
</h:inputText>
works perfectly.
I do not know if it may be related as how the changeLocation event is fired; inside my component I define it as
<composite:interface>
...
<composite:clientBehavior name="changeLocation" event="change" targets="visibleId"/>
</composite:interface>
with visibleId being a readonly text; when it is changed by javascript I fire the change event on it with JS.
function launchEvent(fieldName) {
if ("fireEvent" in fieldName) {
fieldName.fireEvent("onchange");
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
fieldName.dispatchEvent(evt);
}
}
The info I find in other questions is about making ajax an inner part of the composite component, here I want ajax detached because I probably won't need it in other uses of the component.
I am using JBoss 6.1 wih Mojarra 2.1.9 and Richfaces 4.
Thanks in advance.
UPDATE:
Even after finding jarek.jpa's answer right, if someone wants to check the code it is here:
The composite component
http://pastebin.com/9wqMVfR5
The main form
http://pastebin.com/i39ys2D9
This may have to do with the "readonly" attribute set to true. Though you manage to send the change-event by hand (JS), the server-side processing of the listener may be dropped due to the readonly state. See e.g. jsf (richfaces) readonly input text validation.
How do you invoke a bean method from Javascript in PrimeFaces?
I have the following menuItem:
<p:menuitem id="toggleAlarms" icon="ui-icon-cancel" rendered="#{navigationBean.admin}" value="Cancel Alert" update=":alarmMessages" action="#{alarmsBean.toggleAlertOff()}"/>
When I click on that item in the UI the method gets called.
But when I have this element:
<p:messages id="alarmMessages">
<script>
jQuery('#alarmMessages').effect("pulsate", {times:5}, 1000 );
jQuery('#alarmMessages').show();
$('#alarmMessages').click(function() {
jQuery('#toggleAlarms').click();
alert('fool');
})
</script>
</p:messages>
If I click on the messages object on the UI, I can see the alert message with fool in it.
However, I never see the toggleAlarms.click() method invoke the alarmsBean.toggleAlertOff() call.
Am I doing something wrong?
any chance that #{navigationBean.admin} returns false ?
cause if so you wont be able to find it in the DOM... (maybe better use style=display:none)
also , your selector might be wrong if the menuitem is inside form try jQuery('#someFormID\\:toggleAlarms').click(); do view source on your web page to see the right id of the menuitem
finally try the same with commandButton instead (not sure that menuitem will respond as expected to .click())
Update
in order to check if your jquery selector is right use alert($('#toggleAlarms').length) instead of alert('fool');