Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

calling javascript function after execution of actionListener method  RSS feed

 
Ravi Mirani
Greenhorn
Posts: 19
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

I'm calling method on actionListener of a button which changes the UI by hiding / unhiding some components.

I want to call a javascript method immediately after the output is rendered (i.e. after completion of method specified in actionListener).

Please suggest, if there any way to achieve above mentioned requirement.
 
Tim Holloway
Bartender
Posts: 18704
71
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Just to be annoying, I'm going to note that actionListeners are over-used. They have a specific benefit, but in most cases, a straight action method is simpler and makes for better code reusability. I'm convinced that there's a whole raft of obsolete documentation out on the Internet that keeps people doing this.

You cannot call an javaScript function after invoking an actionListener - or for that matter, an action. That's because to fire an action, the client must do an HTTP form submit, and that means that the current page is going to immediately be discarded - javascript and all - and replaced by a new page. Even if that new page looks like the same page, it's a new page, so the opportunity is lost. This is true in raw HTML pages, and under the covers, JSF is still rendered on the client as raw HTML.

The exception to this condition is when you are making an AJAX request. AJAX does an independent submit that doesn't replace the current page. Instead, the response comes back to the logic rather than to the page manager. Therefore, the javascript isn't (usually!) nuked and you can invoke it.

AJAX support is not part of JSF version 1, so to do AJAX you either need JSF2 or one of the extension tagsets that supports AJAX under JSF1, such as RichFaces or PrimeFaces. RichFaces implements an "oncomplete" attribute for its AJAX submit functions, and that's where you'd call your post-action javascript. Expect to find similar options under JSF2 and the other AJAX extension tagsets.
 
Ravi Mirani
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Tim for your reply.

My project contains 2 xhtml files mypage.xhtml and userDetails.xhtml.

I have a backing bean method getUpdateUserPage() which returns a navigation string for navigating to userDetails.xhtml.

I have used same template in both mypage.xhml and userDetails.xhtml, and trying to update a head tag of the template with a javascript file which is required for userDetails.xhtml.

On mypage.xhtml I m calling getUpdateUserPage from action attribute of a command button.

Clicking on button, userDetails.xhtml is getting called successfully, but URL of the browser is not changed and also head tag is not getting updated as per the userDetails.xhtml.

Content of page is getting included in the body part of template, but content of head tag is not getting updated.

Please help.





 
Tim Holloway
Bartender
Posts: 18704
71
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
On the whole, you'll do better updating a backing bean property for your head element than in trying to use JavaScript. I saw your other posting on this problem, and my best guess is that you don't have the head embedded under the f:view tag as it must be for JSF to process it properly.

The URL for JSF isn't so much an actual resource locator as it is a "session handle", which is why it doesn't always reflect the actual page that's currently displayed. You can force it to track by including the "redirect" option on the navigation. However, there is a performance penalty for its use.
 
Ravi Mirani
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for you reply.

I tried using f:view in the template file, but same result .

Below is another issue which I think is due to similar reason.

I'm trying to use ace:tooltip component of ICEFaces which adds some js file in the head tag.

If I access this page by typing the URL of the page in the browser, component work's as expected, but if the page is called from some other page, I get js error (as required js files are not getting added in the head tag of the template).

Please help.

 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!