PrimeFaces.current().focus method works with inputTexts but with a commandButton I see no results, alternative I can use executeScript but the idea is to use focus for this kind of requeriment:
This works:
PrimeFaces.current().executeScript("document.getElementById('frmAperturaCajaMasiva:btnAceptarAperturaCajaMasiva').focus();");
This works on inputTexts but not working on button:
PrimeFaces.current().focus("frmAperturaCajaMasiva:btnAceptarAperturaCajaMasiva");
Any idea why? its the same thing but different in both commands
This is the code of the button on the xhtml nothing fancy :)
<p:commandButton id="btnAceptarAperturaCajaMasiva"
value="#{etiquetasMsg.cerrar_caja}" styleClass="cds-icon-button"
icon="cds-icon aprobar"
disabled="#{aperturaMasivaMB.blBtnProcesar}"
title="#{tooltipsMsg.cierrecaja_masiva_cerrar}"
onclick="if(!confirmarSeleccionTabla(PF('dtbFrmCajaWv'),null)){ return false; }"
actionListener="#{aperturaMasivaMB.validarCierreCajaMasivo}"
rendered="#{adminRestriccionMB.validarRestriccion('BTN_CERRAR_CAJAMASIVO')}" />
Yes I know why. The focus method in PrimeFaces specifically excludes buttons it was intended to focus input fields. Here is the source code.
focus: function(id, context) {
var selector = ':not(:submit):not(:button):input:visible:enabled[name]';
Notice the "not(:submit):not(:button)" in the Jquery selector.
Source code:
https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.js#L699-L728
Related
This is my primefaces code
<p:calendar id="cal1" showButtonPanel="true">
<p:ajax event="close" oncomplete="clear1();"/>
</p:calendar>
<p:calendar id="cal2" showButtonPanel="true">
<p:ajax event="close" oncomplete="clear2()"/>
</p:calendar>
The issue is when invoke second calendar also the first javascript method I defined gets called. I checked my code twice and I was correctly calling the method? Can somebody please tell me why this is behaving like this? I am really confused
edit 1:
Also this is what I am trying in that:
function clear1(){
$(document).on('click', '.ui-datepicker-close', function () {
clearValue();
});
}
function clearValue(){
document.getElementById("form:cal1_input").value="";
}
function clear2(){
$(document).on('click', '.ui-datepicker-close', function () {
clearValue1();
});
}
function clearValue1(){
document.getElementById("form:cal2_input").value="";
}
And whenever I close calendar it opens the first method twice and second method twice :( I checked it via alerts.And this method works correctly when there is a single calendar and fails in case of multiple calendars
You are trying to turn the "done" button into a "clear" button. A solved issue exists for this but I cannot find a clear button on calendar component: https://github.com/primefaces/primeng/issues/506
Possibly you should use the datePicker which has a clear button: https://www.primefaces.org/showcase/ui/input/datePicker.xhtml
In my code, I'm expanding treeNode in left frame that is selected through navigation links present in right frame. It works but everytime I click the link on right frame, I have to refresh the right frame manually. I tried to reload the page from backing bean using javascript code but it's not working. Can anyone please help me to figure out why it's not getting executed.
Thanks in advance for helping me out.
Below is the code I'm using.
public void expandTreeView( TreeNode selectedNode )
{
if ( selectedNode != null )
{
selectedNode.getParent().setExpanded( true );
}
RequestContext rc = RequestContext.getCurrentInstance();
rc.execute("window.location.reload(true)");
}
You need to combine a JS Function with remoteCommand, it will look like this :
myHTML.xhtml
<p:commandLink id="commandLink" onclick="myFunction(nodeSelected)" >
...
</p:commandLink>
Also add a JS function
<script type="text/javascript">
function myFunction(x) {
...
}
</script>
and finally combine it with a p:remoteCommand it allows you to call a managedBean method from your JS function
You can see Primefaces remoteCommand Example or simply look to this SO post Invoking a p:remoteCommand via a JavaScript function passing a message local to that function to another function through the “oncomplete” handler
Hope that helped you.
In my project i have a <h:datatabel> that contains details of polls that defined in the system. I will use pagination in my page, then create use a next command with the following code:
<h:commandLink value="<" action="#{PollSearchControler.next}" >
<f:ajax render="checkall" />
</h:commandLink>
my button work good and when i click in it my table refresh and load new data. but i have a problem with Cufon. I use Cufon in my project for use non standard font. when my date changed, i must call Cufon.refresh(). this function render new data and show my data with my font. now i have a question:
How can i say to <f:ajax> that call Cufon.refresh() after it load new data?
thanks.
You can use the onevent attribute to call a javascript function, this function will be called three times during the request lifetime: begin, complete, success. for example <f:ajax render="checkall" onevent="refreshCuffon"/>
and the function will be
function refreshCuffon(data) {
if(data.status == "success") {
Cufon.refresh()
}
}
I call a javascript function that makes a click on a hidden commandButton but the click run when the page loads, not when I call the function.
this is the html code :
<p:inputText id="aa" value="#{bonBonneManagedBean.sel}" onkeyup="fnc()" />
<h:commandButton id="hh" onclick="#{bonBonneManagedBean.kk()}" style="display:none"/>
and the javaScript function :
function fnc()
{
length = document.getElementById('form:aa').value.length;
if(length == 10)
{
$("#hh").click();
document.getElementById('form:aa').value = "";
}
}
You should use the action attribute instead of onclick like this
<h:commandButton id="hh" action="#{bonBonneManagedBean.kk()}" style="display:none"/>
Note that you might have to add form prefix to the selector, like this
$("#myFormId\\:hh").click();
The same would work for a commandLink or any other 'clickable' component.
Must there be a button on this page(which I doubt, seeing as you're hiding it anyways)? You're better served using something like <p:remoteCommand/> here
Ditch the hidden button and replace with
<p:remoteCommand name="fnc" actionListener="#{bonBonneManagedBean.kk}"/>
But, if it's an absolute requirement, you can very easily emulate a button click in js with the click() method from your function you need to
Change the <h:commandButton/> to a <p:commandButton/> so you can assign the button a widgetVar attribute(to guarantee the name of the element in the DOM). The widgtetVar attribute can be set on almost all primefaces components to make your life easier
Using the widgetVar, just call the click() method in your function
<p:commandButton ajax="false" widgetVar="theButton" id="hh" action="#{bonBonneManagedBean.kk()}" style="display:none"/>
<p:inputText id="aa" widgetVar="theTextBox" value="#{bonBonneManagedBean.sel}" onkeyup="fnc()" />
and in the function:
function fnc(){
length = theTextBox.value.length;
if(length == 10){
theButton.click()
theTextBox.value = "";
}
}
If the top answers from Daniel and Kolossus doesn't help out someone: I found that characters got put in front of the id I set in my case, therefore this helped me:
$('[id$=hh]').click();
Basically the selector is saying the id ends with 'hh' but may not be the full id.
This is also helpful in SF development as the same thing happens with comandButtons, etc.
This seems like it should be pretty straightforward but I'm not feeling it.
I have a JSF CommandButton that executes a long running serverside task (10-15 seconds). I've seen forms where the button context changes after it's been clicked (The label on the button changes and the button becomes disabled until the processing is complete).
I'm using ICEFaces and have the disabled property set to a boolean on the underlying page code.
The action listener bound to the button changes that boolean to disable it but alas, no changes on the JSP.
Anyone?
What you can do is to change the status of the button using Javascript:
<h:commandButton ... onclick="this.disabled=true"/>
Edit regarding the comment:
If the previous code does not submit the form, then you have to disable the button a little time after the click, not "during" the click itself. You can do that using the following code:
<h:commandButton ... onclick="setTimeout('this.disabled=true', 100);"/>
I'm not sure if the fact to use the this keyword directly in the setTimeout method will work correctly. If not, you can use another way to do that:
<h:commandButton ... onclick="disableButton(this.id);"/>
with the following Javascript function:
function disableButton(buttonId) {
setTimeout("subDisableButton(" + buttonId + ")", 100);
}
function subDisableButton(buttonId) {
var obj = document.getElementById(buttonId);
if (obj) {
obj.disabled = true;
}
}
(I'm sure this code can be enhanced, thus)
You should use an ice:commandButton instead of h:commandButton, since it has the partialSubmit property, which will perform the action as an AJAX call. This should refresh your button's state, so if the property on the server has been set to false, your button should be disabled.
do a javascript submit(); first and then disable the button
Similar to the solution from romaintaz
For a Firefox specific solution, the following works (it does not work in IE):
<h:commandButton ... onclick="disableButton(this.id);" />
Using Javascript function:
function disableButton(buttonId) {
var obj = document.getElementById(buttonId);
if (obj) {
setTimeout(function(thisObj) { thisObj.disabled=true; }, 50, obj);
}
}
do it after icefaces has updated the DOM. you can use ice.onAfterUpdate(callback):
Here with jQuery
ice.onAfterUpdate(function(){
updateButtons();
});
function updateButtons(){
if(!isButtonEnabled()){
jQuery(".myButton").attr('disabled', true);
jQuery(".myButton").removeClass("iceCmdBtn").addClass("iceCmdBtn-dis");
}else{
jQuery(".myButton").removeAttr('disabled');
jQuery(".myButton").removeClass("iceCmdBtn-dis").addClass("iceCmdBtn");
}
}