Tuesday, September 07, 2010

Upgrading to APEX 4.0: jQuery

In a lot of my APEX 3.x projects I used jQuery to extend the standard functionalities of APEX with some more interactive (client-side) components.

In jQuery there are very nice plug-ins, like a modal window, a grid, tooltips etc.

If you try to run your APEX 3.x application in APEX 4.0 you might find these jQuery components/plug-ins are not working anymore. The cause can be multiple:
  • You might have used an older version of jQuery and the plug-ins you used with that, which are not compatible with the jQuery version in APEX (1.4)
  • You load jQuery, but APEX loads their build-in jQuery too and things get mixed up
During the migration of my APEX 3.x application to APEX 4.0 I just take off all references to jQuery I made myself. Just make sure that in your template the #HEAD# is before any other jQuery plug-ins you try to run. Also make sure the jQuery plug-ins you use are compatible with jQuery 1.4.2. APEX ships with a lot of extra jQuery plug-ins like jQuery UI, js-tree etc so if you used that it's not necessary anymore to include them. (to see a complete list of files that ship with APEX, look into /images/libraries/)

Before I loaded my files as part of my Page Template, but I'm not sure I would still do that.
If you switch from template you lose the references. It might be better for maintainability point of view to include it in a region on Page 0. It will have a small performance hit, as APEX will have to look for it on Page 0, but it makes maintainability easier.
But going forward I'm converting all my custom javascript and jQuery plug-ins to APEX plug-ins and the files get loaded as part of the plug-ins. A lot of the javascript can disappear as it can be replaced by the build-in Dynamic Actions of APEX 4.0.

Hope it can help some of you when you see javascript errors when you try to run your APEX 3.x app in APEX 4.0. But don't panic to fast, it's probably just the way jQuery gets loaded.
at

3 comments:

  1. Rene Westenberg9/08/2010 8:24 AM

    Do you have some examples of how JQuery can enhance the standard Apex pages?

    ReplyDelete
  2. Dimitri Gielis9/10/2010 9:34 AM

    Hi Rene,

    There are many... if you look at apexblogs.info there I used for ex. the jQuery datepicker, if you click on blog selection it also slides down, there is the star rating etc.

    You have other things which are in the admin section, like cascading lov's etc

    A lot of these things are now standard in APEX 4.0, but at the time I developed APEXBlogs that wasn't the case.

    Hope these examples are what you were searching for,
    Dimitri

    ReplyDelete
  3. Andrew Woodward4/10/2012 12:59 PM

    Hi Dmitri

    This posting was very useful - we were using jQuery floatingmessage in Apex 3.0, which worked fine. On upgrading to 4.1, it stopped working, and showed an error message on every page load.

    The fix turned out to be moving the script link to the jQuery libraries out of the page template, where I'd put them originally, and into a page zero after header region. After doing this, the floating message started working again.

    many thanks!
    Andrew

    ReplyDelete