I have a commandLink which calls a backend page bean method. but I want to make a delay before it calls that method. How to do this using javascipt or primefaces?
PrimeFaces offers p:remoteCommand. It can be called via javascript and execute, do action and ajax process and updates. Use the p:commandLink to call a javascript function with a timeout. In short
<p:commandLink onclick="delayIt()" />
<p:remoteCommand name="remoteCommandName" ... action ... update ... process/>
<script type="text/javascript">
var delayIt = function(){
setTimeout( remoteCommandName,5000) //don't write () as it would execute it immediately
}
</script>
In primefaces try 'delay' as attribute. delay is null as default.
<p:commandLink id="clid" actionListener="#{buttonView.buttonAction}" delay="1000">
<h:outputText value="text" />
</p:commandLink>
Related
I'm trying to set value to hidden variable on page load and call to send that value to managedbean.Onpage load i'm able to set value and call commandbutton and get value in managed bean but its going to unconditional loop and executing more than once. Here's my code.
<script>
window.onload = setId ;
function setId(){
var facId = document.getElementById('formname:bId').value;
document.getElementById('formname:nameId').value = facId;
document.getElementById('formname:buttonId').click();
}
</script>
<h:inputText id="nameId" value="#{bean.nameId}"></h:inputText>
<h:commandButton id="buttonId" value="fId" action="#{bean.init()}" />
On page load its calling the button contineously.
h:commandButton submits the form and causes whole page reload due to which your script is executed again and this repeats. To avoid this one add
<h:commandButton id="buttonId" value="fId" >
<f:ajax event="click" listener="#{bean.init()}" />
</h:commandButton>
Hope this helps
The problem is, I have next to no knowledge of javascript, and just a passing knowledge of PrimeFaces, and I couldn't find how-to in the documentation :(
So I have a primefaces text box on my page:
<p:inputText styleClass="step1-input" value="#{PageBean.documentToDownload}">
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener="#{PageBean.validateUrl}"/>
</p:inputText>
In the text box, when I write something, an action takes place, which takes a few seconds to complete. On result, a panel appears on the page that either displays something, or says what I've written is wrong:
<p:panel id="infopanel" visible="#{PageBean.validLink and PageBean.info != null}" header="Information" style="margin-bottom:10px;">
<h:outputText value="Everything is okay"/>
</p:panel>
<p:panel id="infopanel2" visible="#{PageBean.validLink and PageBean.info == null}" header="Error" style="margin-bottom:10px;">
<h:outputText value="An undefined error occured."/>
</p:panel>
There's already a primefaces statusDialog on the page that I can use:
<script type="text/javascript">
function start(){ statusDialog.show(); }
function stop(){ statusDialog.hide(); }
</script>
So, what I want to do is: on keyup event in the input text I want to launch start() function, to display a dialog, only if PageBean.validLink is true (validLink is set in PageBean.validateUrl listener, and it's instantaneous)
And when infopanel or infopanel2 is shown as an ajax action, I want to call the stop() function.
So, how can I do that?
If i understand your question correctly you want to execute javascript function when the ajax action completes? For this you can use the oncomplete attribute on the ajax component:
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener {PageBean.validateUrl}" oncomplete="stop()"/>
If you want to make a callback to execute before an ajax reques begins, you can use the onstart attribute
I am using JSF 2.0 and primefaces 3.0. I have a rowtoggler and rowexpansion. Since I am using primefaces old version so I dont have rowToggle event. And I need to call a method on server side through ajax at the time of row expansion. So I have put div tag around rowtoggler and calling a javascript function. Now I want to initiate ajax call through click event of panelgrid which is inside rowexpansion. If this happen then it would look like 3.4 rowToggle event.
You can use jQuery's event binding to execute Javascript when clicking on the row toggler.
<h:form id="form">
<p:dataTable id="dt" value="[1,2]">
<p:column>
<p:rowToggler />
</p:column>
</p:dataTable>
<p:remoteCommand name="remotecommand"
oncomplete="alert('remote command fired')" />
</h:form>
<script type="text/javascript">
$("[id='form:dt'] .ui-row-toggler").on("click", function() { remotecommand(); });
</script>
Explanation of Javascript:
The $("[id='form:dt'] .ui-row-toggler") selects the datatable by id (form:dt) and then selects all descendants that have the style class ui-row-toggler.
The .on("click", function() { remotecommand(); }) binds an anonymous function to a click event which fires a Javascript function declared by p:remoteCommand.
You can use the p:remoteCommand to execute bean methods with it's action or actionListener. ;-)
Note that this I don't find this to be a long term solution. Upgrading to PrimeFaces 3.4 would be a better solution.
I have put commandLink arround rowtoggler and I make ajax call through commandlink and I can also pass value through it using EL2.2
<p:commandLink action="#{myBean.doSomething(foo)}" >
<p:rowToggler/>
</p:commandLink>
I guess you'd something like
<p:panelGrid>
<p:ajax event="click" listener="#{bean.onclick}" />
...
the rest of the grid here
...
<p:panelGrid>
I haven't tested it but it works for other components
Except solution of siebz0r I found one more solution.
<p:commandLink action="#{bean.abcFunction}"> <p:rowToggler/> </p:commandLink>
it also works and simple too :-)
I have a javascript function to run h: or a4j: commanButton. When javascript function is called, action button runs action but after that page is not redirected.
I am using Seam 2.2 and RichFaces 3.3.3
What is the problem here? Thanks.
function submitForm(){
document.getElementById('myForm:save').click();
// does not redirect.
//document.getElementById('myForm').submit();
}
Even if I use submit() page is not redirected.
Form:
<h:form id="myForm">
//some fields
<h:commandButton id="save" value="Save"
action="#{personHome.persist}" />
</h:form>
To the point, the following should work for <h:commandButton>:
document.getElementById('myForm:save').click();
and when the button is the first button of the form in question:
document.getElementById('myForm').submit();
You only need to ensure that the generated client ID is exactly the same as the ID which you're specifying in getElementById(). If the <h:form> is by itself nested in another UINamingContainer component, then the ID will be prepended with its ID. Rightclick page in browser and View Source to be sure.
As to the concrete problem, perhaps you've attached this function to another button which in turn also submits some form by itself which will result in a race condition of two requests. You should then return false; from or after the function to block the caller's default action. E.g.
<h:commandButton onclick="return submitForm();" />
with
function submitForm(){
// ...
return false;
}
I am reading an xml file using javascript and then I need to submit my form so that it calls a particular method in my JSF handler. Usually this can be done on a jsp when user clicks a button by having an actionlistener like so:
<h:commandLink styleClass="button" action="#{myHandler.outcome}" actionListener="#{myHandler.doNext}">
<span><h:outputText value="#{text.button_submit}" /></span> </h:commandLink>
I am not sure how to call a method like 'doNext' above in the handler from javascript. I cannot do a simple:
document.form.submit();
as it then repeats the processing i have already done. I want to read values from an xml file and then call a particular method in handler. Any ideas much appreciated.
I found a solution to this. I added a hidden button to my jsp like:
<p id="hiddenButton" style="display:none;" >
<h:commandLink id="hiddenRegButton" styleClass="button" action="#{myHandler.doNext}" />
</p>
and in my javascript I used jQuery to execute the click which leads t the "doNext" method in my Handler to get executed.
jQuery('#hiddenRegButton').click();
this was easier than I thought.