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()
}
}
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
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.
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.
I have a jsf facelet which displays a summary of a search process.
Now I want to redirect to a detail page, if only one element was found by the search engine. I do not want to implement this redirect in my beans because I want to have the "knowledge" about this redirection out of my java code.
So I want to write something like that:
<ui:redirect if="#{searchResult.count eq 1}" target="details.jsf">
<f:param name="id" value="#{searchResult.firstResult.technicalId}" />
</ui:redirect>
Any solutions or ideas for that?
I know, there are page-actions in JSF 2.2 but I am using JEE6 and there is JSF 2.0 available.
Btw. I currently I am usingMyFaces, Primefaces and Richfaces.
Greetings.
You should do this job in the controller, not in the view.
To get search results, you first need to invoke an action method by a search form, right? Just do the redirect job right there. You can tell JSF to send a redirect by specifying the faces-redirect=true in the query string of the action outcome.
public String search() {
results = service.find(query);
if (results.size() == 1) {
return "details?faces-redirect=true&id=" + results.get(0).getTechnicalId();
}
else {
return "results";
}
}
Or if it's a GET request which is handled by <f:event type="preRenderView">, then do so:
public void onPreRenderViewListener() {
results = service.find(query);
if (results.size() == 1) {
FacesContext.getCurrentInstance().getExternalContext().redirect("details.jsf?id=" + results.get(0).getTechnicalId());
}
}
I would say the cleanest way is to generate the action in the bean.
Anyway I would propose you to simulate a click in case your search count is eq to 1 with javascript.
you need an input hidden containing the count:
<h:inputHidden id="count" value="#{searchResult.count}" />
and a hidden button to trigger the redirection:
<h:commandButton id="redirectButton" action="details.jsf" style="display: none;" />
then when you trigger the search, you update the input count and oncomplete you can check
if the value of count is 1, then you can do a click on the commandButton.
If you use Jquery, it would be something like
if($("#count").val()==1){
$("#redirectButton").click();
}
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");
}
}