Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Using jQuery with Ajax  RSS feed

 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello,

This is my first posting in nearly a year. I have a JSF 2.0 application that I upgraded to JSF 2.2 and upgraded to PrimeFaces 4.0, although as yet I have not taken advantage of the extra capabilities these have over the previous versions, but so far most of my application works.

However, I'm having problems getting jQuery popups to works, as there appears to be a problem with Ajax. In the previous version of the code I had the following between the <h:head /> tags:



Then in the body I have the following code:

My custom JavaScript for the popups is in the file "popups.js" and the code works.

I want to replace my custom popups by jQuery. The JavaScript files are now included with:

where the first line includes jQuery from PrimeFaces, "utils.js" now contains jQuery code like:

and the file "popupWindow.js" contains code from http://swip.codylindley.com/jquery.popupWindow.js. This normally works after removing some IE dependent code that causes problems.

In the xhtml file I have replaced

by

which on clicking is supposed to open the popups. This part of the page is not displayed when the page is opened, but on clicking the checkbox with id="checkIrradiated", this part of the page with id="irradiated" is displayed. However, jQuery doesn't display the popup on clicking on the buttons with id="popupIrradiated" and id="popupAbundances1" unless I click the refresh button on the browser, then they work.

For components that don't use Ajax to determine their visibility the popups work. So somehow Ajax used by JSF is causing problems when I try to use jQuery. I would be grateful if someone could help sort this problem out.

Incidentally, rather than downloading a separate jQuery library, I'm using the one built into PrimeFaces.

csharp
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I can think of 2 things without actually straining my morning-bleared eyes and reading the details:

1. When you put a javascript action on the onclick/onsubmit attribute, you need to include a "return false;" statement at the end of the attribute text or it will attempt to submit the form after the javascript executes. That's probably not what you want.

2. Do make sure that the version of jQuery is using is up-to-date enough for your code. The internally-supplied jQuery versions are often pretty old. Fortunately, it's usually pretty easy to pull in a newer version.
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Tim,

Regarding your two points:

1) The jQuery actions replace my onclick actions, but be that as it may, the old version of my code worked, although perhaps I should have included a "return false;" statement.

2) I've just checked, and the newest version of jQuery is 1.10.2, which is the same as the version in my PrimeFaces 4.0 jar file, so that should be OK.

My jQuery popups work perfectly OK provided they are not included in a component whose visibility is determined by Ajax. In these cases the popups only work after I have manually refreshed the browser, so somehow Ajax in messing up the jQuey actions.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Christopher Sharp wrote:
My jQuery popups work perfectly OK provided they are not included in a component whose visibility is determined by Ajax. In these cases the popups only work after I have manually refreshed the browser, so somehow Ajax in messing up the jQuey actions.


Ding!

Ran into this the other day. What is happening is that the original components that jQuery was attached to have been destroyed and replaced by new components courtesy of the AJAX re-rendering operation. You have to attach the functions to the new versions of those components.

And, yes, do include the "return false" on the JSF commandButton tags. That is required for the underlying HTML to behave properly, regardless of what AJAX, jQuery or JavaScript are doing. Although if your function does a full-page submit, obviously the submit() javascript function puts an immediate halt to any subsequent script or HTML action on the original page.
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
OK, so the components that jQuery uses have been replaced by AJAX re-render operation. I suspected that something like that might be happening. How do I attached the jQuery functions to the re-rendered components so that it always works?

For the JSF commandButton tags I have to include an onclick="return false;" action when I don't want the full page submitted. I presume that is what you mean.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You have to schedule javascript to find the newly-rendered controls and attach the functions to those new controls.

With the old RichFaces, this could be done via an 'oncomplete' scriptlet on the a4j control. In JSF2 (including RichFaces 4), it's a bit messier, since you have to code an onevent handler, which is more complex. I can't seem to find the code I did this for, but basically, the onevent handler looks for a "success" event, which you can then have invoke jQuery locate-and-attach-functions on the updated controls.

You always should return true/false on an onclick. Just to be safe.
 
Christopher Sharp
Ranch Hand
Posts: 158
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Could you very kindly tell me how to find the newly-rendered controls, then attach functions to those controls.

It's enough dealing with PrimeFaces, and want to avoid RichFaces.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You have to use the jQuery document element location functions, using the JSF version of the control IDs. The control IDs haven't actually changed, it's just basically a reassignment has been performed and the functions were bound to the old control instances rather than to the IDs of the controls, so when the old instances are replaced with new instances, you have to do a new binding.

Should be the same essential code that you would have used to bind the functions to the controls originally.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!