Skip to main content

f:ajax and javascript events in JSF 2.0

7 replies [Last post]
broeks
Offline
Joined: 2010-03-01
Points: 0

I'm attempting to integrate some JQuery UI features with JSF.

My layout is such that each tab contains a form that is posting to a session managed bean. I've been using f:event to validate each page, and f:ajax to submit each form. The problem I am having is that upon the result of the f:ajax call I want the javascript environment to have some information about the result of the f:ajax call.

I tried using onEvent, but the data in there is not helpful for what I want to do. Is there anyway for me to add data on the server side to the event that is passed to the "onevent" method (handleTabChangeEvent)?

 
<h:commandButton id="buttonId" actionListener="#{sessionBean.doSomeStuff}">
            <f:ajax execute="@form"
                    onevent="handleOutcome"
                    render="@form"/>
        </h:commandButton>

javascript

function handleOutcome(event){
//event.status
//event.source
//event.type

event.myCustomDataHereThatICanManipulateTheDOMWith
}

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
tacitust
Offline
Joined: 2010-02-24
Points: 0

Even though it's not quite as clean as being able to access the data via the returned ajax event object, there should be no reason why you can't embed the extra data in a hidden field passed back from the server. It would then be trivial for your jQuery code to locate and parse the contents of the hidden field. In fact, it seems like a pretty standard thing for JSF to do anyway, given the number of hidden input fields passed on any JSF page.

Alternatively you could always use the jQuery ajax calls (though obviously you lose the JSF functionality you might want) or perhaps you might be able to write your own custom action, or extend the existing f:ajax action, although that might be overkill for what you need.

broeks
Offline
Joined: 2010-03-01
Points: 0

The hidden field thing might work. I can bind Jquery to listen to changes on them and respond accordingly. I'll give that a shot and see how it goes.

tacitust
Offline
Joined: 2010-02-24
Points: 0

Not sure you can bind events to newly added fields (jQuery doesn't have any DOM tree event handlers that I know of) but the jQuery code you trigger from the f:ajax event attribute could certainly access any new named (e.g. $("#param")) hidden field that is passed from the server and added to the document. You could also specify the id in the function call associated with the specific instance of the ajax tag in the document.

vesuvius
Offline
Joined: 2007-06-02
Points: 0

Ok, I toyed with it for a couple of minutes. The following works, if you need it:

[b]page.xhtml:[/b]

[code]



[/code]

[b]Bean.java[/b]

[code]
@RequestScoped
@Named
public class Bean {
public String getScriptSnippet() {
FacesContext ctx = FacesContext.getCurrentInstance();
return ctx.getPartialViewContext().isAjaxRequest() ?
"alert('script in ajax response')" :
"alert('script snippet')";
}
}
[/code]

So, essentially, you can dynamically generate a script and send it to the client. It will be executed there.

Probably, there's a better way, but, until somebody answers and gives us the better way, this should do.

Here's the Ajax response I got from the server:

[code]

]]> [/code]

Hope this helps.

broeks
Offline
Joined: 2010-03-01
Points: 0

I had thought of doing it this way, but like you say, its not quite ideal.

Unless you are running the same static script each time, you would have to dynamically build up the javascript you want to run in the backing bean.

Like for instance, if I want to fade out a div, switch to a different Jquery UI tab, or do anything 'fancy' JS wise in response to a server side operation, I would have to dynamically generate this javascript on the server side. Would probably get messy manipulating the string data to accomplish this.

Basically, I am wondering if JSF 2.0 is looking to embrace/leverage the existing js libraries out there. I'm not looking for tight / seamless integration, but even a primitive way would suffice for me in this situation.

Thanks for the reply, I'll be taking some more time to think about it, and will post what I find here.

vesuvius
Offline
Joined: 2007-06-02
Points: 0

I'm not quite sure what exactly you need but it seems to me that the scripts themselves would be static .js files -- they would be supplied either by jQuery, or by you.

What you would need to [i]generate[/i] is some statement that calls the jQuery API, or some utility function(s) that you wrote. It would be a very short dynamic script.

But, of course, it's always easier said than done. I really haven't thought much about this anyway. There might be some serious complications along the way.

vesuvius
Offline
Joined: 2007-06-02
Points: 0

Well, I can't give you a good answer and I would love to see some of the Wise Men comment on your question, but I thought I'd give you a hint that [i]might[/i] work.

It seems that you can include your own scripts into the ajax reply and they will be executed on the client. (http://weblogs.java.net/blog/driscoll/archive/2009/09/02/inline-scripts-...)

Perhaps you can use this feature to send to the client some script which will do the job you need. I haven't even tried this myself short of re-rendering a fragment of the page that contained a script. It worked. But I haven't experimented more.