i often use but i have this problem.
if there is a whose action is delete some entity ,but i want notify user who click this commandLink a javascript function confirm(str); if the confirm() answer is false, it doesnot trigger a ajax function. So i begin to use jsf.ajax.request function;my code like this .
<h:commandLink value="ajax" onclick="return ask(this,event,null,'page');" actionListener="#{test.ajax}"/>
<h:inputText value="#{test.page}" id="page"/>
this is my javascript code
function ask(element,event,exec,target){
if(confirm("are you ready to delete it"))
{
try{
jsf.ajax.request(element,event,{execute:exec,render:target});
}catch(ex){
alert(ex);
return false;
}
}else
return false;
}
，but it can execute it successfully,but i found it not a ajax.other value for backing bean is updated too!
if sb can tell me ! Be grateful!
You don't need to take over <f:ajax>'s job. Just return in the onclick.
<h:commandLink value="ajax" action="#{test.ajax}" onclick="return confirm('Are you sure?')">
<f:ajax execute="#this" render="page" />
</h:commandLink>
<h:inputText value="#{test.page}" id="page"/>
And use action instead of actionListener. You can return null or void there.
I have solved my problem. It was because I did not understand jsf.ajax.request well. If I want the actionListener to invoke in the backing, I also take the actionListener whose owner--dom object is to be executed.
Related
Having a Question on JSF j:commandButton's action, chrome browser and JSF 1.1
Calling JavaScript function on click of command link as below
<h:dataTable>
<h:column>
<h:panelGroup rendered="#{expression which returns true}">
<f:verbatim rendered="#{someView.agentEdit}"> </f:verbatim>
<h:commandLink id= "editId" styleClass="commandLinkClass"rendered="#policyHistory.agentEdit}" onclick="return performPolicyHistoryAction('Edit', id);" value="Edit"/>
</h:panelGroup>
</h:column>
</h:dataTable>
With the above code I am getting the Link and it's able to call js function 'performPolicyHistoryAction'
In js function
function performPolicyHistoryAction(cntrlValue, cntrlId){
DWREngine.setAsync(false);
if (cntrlValue == 'Edit') {
document.getElementById("someString:lnkViewOnlyrefresh").click();
}
}
and someString:lnkViewOnlyrefresh is declared as
<h:commandButton action="#{someBean.viewOnlyAction}"
id="lnkViewOnlyrefresh" value="refresh" styleClass="hide" title="refresh"></h:commandButton>
here in chrome, not calling commandButton's action method. It's working fine in IE and FF
Note:If I put alert in <h:commandButton>'s onClick I am getting the alert.
Changed to onclick="return performPolicyHistoryAction('ViewOnly', id); " is changed to
onclick="performPolicyHistoryAction('ViewOnly', id); return false;"
in belowcode
<h:dataTable>
<h:column>
<h:panelGroup rendered="#{expression which returns true}">
<f:verbatim rendered="#{someView.agentEdit}"> </f:verbatim>
<h:commandLink id= "editId" styleClass="commandLinkClass"rendered="#policyHistory.agentEdit}" onclick="performPolicyHistoryAction('Edit', id); return false;" value="Edit"/>
</h:panelGroup>
</h:column>
</h:dataTable>
Working fine...
Thank you very much for your answer it helps me very much. In my case I was calling a click() action in the command button from Jquery. All this called from an input type image. But the page only refresh in chrome when submit and never called the datosTraficoJS in the managed bean, and for this reason the page never redirect to the next. Only in chrome and IE not works, FF works well.
I put the ";return false" after the onclick and it works very well.
The input type:
<input type="image" src="../resources/clock.png" onclick="editaTrafico(401); return false;"/>
The function:
function editaTrafico(idEmbarque) {
var fieldIdEmbarque = $("#consultaDespachosTraficoForm\\:hdnIdEmbarque");
fieldIdEmbarque.val(idEmbarque);
var botonTraf = $("#consultaDespachosTraficoForm\\:hdnBtn");
botonTraf.click();
}
The command button:
<h:commandButton id="hdnBtn" type="submit" action="#consultaDespachosTraficoBean.datosTraficoJS}"
value="#{msg.gen_filtrar}" />
Hope it helps to someone else.
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 have a commandButton like this:
<p:commandButton value="Save" actionListener="#{bean.checkDetails}" action="#{bean.save}" />
My checkDetails() method checks some fields on the page and if they are not filled in, uses RequestContext to trigger a Javascript alert() which I want to use to block bean.save from being called until the user clicks "OK". The RequestContext piece looks like this:
RequestContext context = RequestContext.getCurrentInstance();
context.execute("alert('Details are not Complete.')");
My problem is I am not seeing the alert() dialog and bean.save is being called regardless of the state of the checkDetails() method.
Am I going about this completely the wrong way? I have spent three hours on this so far and I am plain stuck. If I remove the action method, the alert() pops up just fine.
Please, any input would be greatly appreciated.
My checkDetails() method checks some fields on the page and if they are not filled in...
As BalusC said, this can very easily be solved by adding required="true" to those fields, no need to write Java for this.
If you want to mix this up with the 'old-scool' alert() you can use the validationFailed callback parameter:
<h:form>
<p:inputText required="true" />
<p:commandButton value="submit" oncomplete="handleValidation(xhr, status, args)" />
</h:form>
<script type="text/javascript">
function handleValidation(xhr, status, args)
{
if(args.validationFailed)
{
alert('Details are not Complete.');
}
}
</script>
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 have a command button that generates a confirm pop-up. The text of the confirm comes from a message bundle. Is it possible to pass parameters to the confirm?
This is what I am trying:
<h:commandButton value="#{tkmsg.addAccount}" action="#{ebfAccountControllerBean.specifyEbfAddAccount}"
onclick="return confirm('#{tkmsg.confirmAddAccount}');">
<f:param value="this account"/>
<f:param value="this email"/>
</h:commandButton>
But it doesn't work. I just get
Are you sure you want to add account {0} with email {1}?
Do parameters only work with OutputText or OutputFormat? Is there any other way to do this? My next step would be to replace "this account" with data from the form.
What you're doing indeed doesn't work that way. JSF has no way to relate the f:param tags to that EL expression. Just think about it, even a human would not be able to guess this ;)
You could render your message upfront into something accessible via EL, using e.g. Tomahawks buffer:
<t:buffer into="#{buffer['confirm']}">
<h:outputFormat value="#{tkmsg.confirmAddAccount}">
<f:param value="this account"/>
<f:param value="this email"/>
</h:outputFormat>
</t:buffer>
#{buffer} is simply a hasmap declared as managed bean with request scope. After this you can reference #{buffer['confirm']} in the javascript statement.
Arjan gave a good example. An alternative is to write a JS function for that yourself. Here's a basic kickoff example which extends the JS String prototype with a new format() function.
<script>
String.prototype.format = function() {
var args = arguments;
return this.replace(/\{(\d+)\}/g, function() {
return args[arguments[1]];
});
}
</script>
Use it as follows:
onclick="return confirm('#{tkmsg.confirmAddAccount}'.format('this account', 'this email'));"