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
Related
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
I need to make a calculator in a jsf view using only client-side part. No data can be passed to server-side.
I have the view splitted in a couple of <h:form> with calculator in the middle:
<h:form id="customer_form">
// view here working nice
</h:form>
<h:panelGroup layout="block" styleClass="ui-grid-col-2 offset-boxes" >
<p:panel id="calculator" header="Calculadora" styleClass="half-screen-height calculator-table">
<h:inputText id="result" widgetVar="result" styleClass="result-text"/>
<p:button value="X" widgetVar="X" ajax="false" onclick="calculate('x')" styleClass="right"></p:button>
// more calculator buttons
</p:panel>
</h:panelGroup>
<h:form id="consumption_form">
// view here working nice
</h:form>
Until here all is ok, but when I try to manage calculator with javascript:
<script type="text/javascript">
function calculate(sel){
if (sel == "x") {
document.getElementById("result").value = "";
} else {
var input = document.getElementById("result").value;
document.getElementById("result").setAttribute("value", input + sel);
}
}
</script>
Each time i change result value, server-side is called and value is reset to original value.
EDIT according to PrimeFaces documentation of p:button::onclick event
Client side callback to execute when button is clicked.
Either <h:button> tag is acting like this, so I guess problem is the way JSF or PrimeFaces are handling the javascript event...
I also tried to call and set input value by jquery with $("result").value but the result i get is a function(b7) not the value itself.
What am I doing wrong?
Thanks! ;)
J
you got to make sure you're JS code will not try to submit the form, so that will trigger a server side call, for that I suggest you return false and try using event.preventDefault() on your HTML buttons onclick calls, so you will avoid bubbling up the event to any listeners.
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");
}
}