Executing Javascript AFTER the action in Backing Bean
I have a commandButton on my JSP which is bound to a method in my backing bean by the action attribute. However, I also have a Javascript function call in onClick. But, the Javascript function call is always executed first and then my action method is executed. Is there a way to execute the action method first and THEN the Javascript call? I simply just want to popup a message that says 'Save successful' or something to that effect.
[445 byte] By [
smayea] at [2007-10-2 16:57:32]
Hi,You can use AJAX for this. For more info abt AJAX go through the following article : http://java.sun.com/developer/technicalArticles/J2EE/AJAX/Cheers,~Gaurav Daga
Is there a simpler way just sticking with JSF? I am a newbie at this and AJAX seems to complicate matters a little.
smayea at 2007-7-13 18:10:29 >
Hello,
The javascript lifecycle is tied to the page/document lifecycle. Javascript will not continue to execute after the page/document is finished. It is a bit like wanting to run the javascript after someone has shut down there computer.
You may want to look at creating a new small page that is created when the form sumbit is handled. The new page can then run some js code.
The best solution is to look at AJAX.
Cheers,
Godfrey
http://blogs.ebusiness-apps.com/godfrey/
Well....You can do the action and then return to the page, and read a page attribute that indicates the successfull save. On load verify this attribute and if it's true show the alert.
I see what you're saying, but the problem is the page doesn't reload until AFTER my call to display an alert. I have a two Javascript calls in a command button. The first one updates the value in the backing bean and the second displays the alert. My app is working like this:
1. First Javascript call, goes to backing bean and updates value which is bound to a hidden field on my JSP
2. Second Javascript call, displays alert based on value of hidden field
3. Page reloads
Can I switch 2 and 3 around?
smayea at 2007-7-13 18:10:29 >
Yes.But you have to have a condition that tells the alert when to act.For example you can add a message (an info message) to The FacesConfig Messages to tell the user that the submit went well.
OK, I'm following so far. Can you provide an example of code? Basically I have 2 Javascript calls in the onClick attribute of a button on my page.
Call 1: performValueChange()
Call 2: displayValueChange
Like I said, the first one changes the bean value and I want the 2nd one to display what the new value is so I have to refresh the page in between somehow.
smayea at 2007-7-13 18:10:29 >
put a onload on your body.
The javascript function reads a form value and if a certain condition is true you show the alert.
For example, i've this to clean up error messages. (JavaScript)
// Cleans the application error messages if there are jsf errors
function cleanErrorMessages(){
if(document.getElementById('form1:jsfErrorMessages') != null){
document.getElementById('form1:applicationErrorMessages').innerText='';
}
}
OK, I am combining my two posts here. First, I actually am saving the value from the backing bean in a hidden field. But, like I said, that value isn't reflected in my JSP until the page refreshes/resubmits, which is done AFTER I'm trying to display the message. I'm following this post so far about displaying messages, but can you show me the faces config example you mentioned and what exactly you have in onLoad?
smayea at 2007-7-13 18:10:29 >
on the body i've
<body .... onLoad="cleanErrorMessages()">
....
If you want to show a message on h:messages to say save something:
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
errorMessage,
errorMessage));
Ok, great. One question, what is the difference in your example to jsfErrorMessages and applicationErrorMessages?
smayea at 2007-7-13 18:10:29 >
Both are fields in the form.If jsfErrorMessages is not null, then i 've to clean the other one.
ok, I've implemented your suggestion, but my problem is that in my function that is called from onLoad, the line
if (document.getElementById('this.form:hid') != null
always resolves to null no matter what happens. Am I missing something? How could I check whether there is text in the field?
smayea at 2007-7-13 18:10:29 >
Are you sure the id's are correct?
I believe so. Here is the relevant code:
function checkMessages() {
if (document.getElementById('this.form:hid') != null) {
alert("yes!");
} else {
alert("no");
}
}
In the JSP...
<BODY onLoad="checkMessages()">
Here is my field:
<h:inputText id="hid" value="#{myBB.errMessageVal}"/>
The alert('no') line is always executed no matter what.
smayea at 2007-7-20 23:07:32 >
Change the function to thisfunction checkMessages() {if (document.getElementById('hid') != null) {alert("yes!");} else {alert("no");}}
Nope, still nothing. I get the No alert window every single time the page loads.
smayea at 2007-7-20 23:07:32 >
Ups. I'm made a mistake...if (document.getElementById('XXXXX') != null) {please replace XXXXX by the id of the component on the web page, ie, the page that you see on the browser.This must be because, JSF generates id's for you.
I'm not quite sure what you mean by id of the component on the page. I am using getElementById with other ID attributes on my JSF JSP and they are working fine. However, they are being done when a button is clicked. Is it possible that JSF has not rendered this field yet by the time onLoad is called, therefore it is always null?
smayea at 2007-7-20 23:07:32 >
No.
I tested the solution before i told you.
Here is the example.
Try it.
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<jsp:text>
<![CDATA[ ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ]]>
</jsp:text>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<html>
<head>
<script type="text/javascript">function checkMessages() {
if (document.getElementById('_id1:b') != null) {
alert("yes!");
}
else {
alert("no");
}
}
</script>
</head>
<body class="page-background" onload="checkMessages()">
<h:messages showDetail="true"/>
<h:form>
<h:outputText value="txt" id="b"/>
</h:form>
</body>
</html>
</f:view>
</jsp:root>
OK, I will try it, but how do I know what the ID attribute is? You mentioned it is the component ID on the page, but how do I find that? Not sure what you mean there.
smayea at 2007-7-20 23:07:32 >
You have to see the source code page that is in your browser, because JSF generates id's for your automatically. he starts on _id0 then _id1, etc.
Since i don't know the structure of your page you have to check it on the source page that goes to your browser.
You run the code on the server, then see the page on a browser, then check the source code of the generated html on the browser. Serach for the component, and in the id you will have the string that you need to put on the javascript function.
Thank you very much for your help and patience. I have it working (pretty much). I appreciate it!
smayea at 2007-7-20 23:07:32 >
