Tyler Muth’s Blog

Technology with a focus on Oracle, Application Express and Linux

jApex – A jQuery Plugin for APEX

Posted by Tyler Muth on August 19, 2009

In a previous post I proclaimed that jQuery Selectors Will Change Your Life.  While working on an AJAX centric APEX project, I wanted to use jQuery selectors to post data from an APEX page to an application process so I wrote a jQuery plugin. Over the course of this project the plugin has grown into something that I think the community would find useful.  Essentially it serves the same purpose as Carl Backstrom’s htmldb_get() function, but adds the power of jQuery selectors.  Carl was actually the one that introduced me to jQuery, and I’m sure he would have written something similar, only much better and in half the time.

I think the best way to introduce it is with a few quick examples.  I have a full set of working examples on apex.oracle.com here, but lets start with some simple examples to give you an idea of how it works.

APEX Items

The following code sends every item on an APEX page to the application process “SOME_APP_PROCESS”. It will then popup an alert with the results from the application process. Note that we did not have to specify each item individually, the jQuery selector (documented here) grabs them all.

var options = {
 appProcess: 'SOME_APP_PROCESS',
 pageItems: $(':input'),
 success:
   function(data){
     alert(data);
 }
};

$.jApex.ajax(options);

If we want to send all items inside a div with ID “employeeDiv” and send the results to the Firebug console:

var options = {
 appProcess: 'SOME_APP_PROCESS',
 pageItems: $('#employeeDiv :input'),
 success:
   function(data){
     console.log(data);
 }
};

$.jApex.ajax(options);

Want to send the items P1_NAME, P1_EMAIL, P1_PHONE?

var options = {
 appProcess: 'SOME_APP_PROCESS',
 pageItems: $('#P1_NAME, #P1_EMAIL, #P1_PHONE'),
 success:
   function(data){
   console.log(data);
 }
};

$.jApex.ajax(options);

Other Features

  • You can also send data to the x01-x10 parameters.  There are several examples of this in my sample app.
  • I had already written code to support sending arrays to the f01-f50 parameters used by Tabular Forms.  I really don’t like Tabular Forms and rarely, if ever use them.  However, I figured someone would want / request this functionality so I enhanced it a bit to better support Tabular Forms.  Keep in mind this functionality has not been tested much, so use at your own risk.

Tips

  • $ is the alias for jQuery
  • jQuery plugins almost always have 1 parameter that is object.  Each property of the object is analogous to a traditional JavaScript (or for that matter PL/SQL) parameter.
  • Parameters  can be objects, arrays, scalars or even functions.  Most people are used to scalars, so passing a function in as parameter / property can really be confusing at first.

Download

You can download the jQuery plugin here and the example APEX application here.

Update: I hosted the files in a more permanent location.

About these ads

27 Responses to “jApex – A jQuery Plugin for APEX”

  1. John Scott said

    Tyler,

    You’ve been reading my mind, I’ve been thinking about doing something similar for a while (actually it was while I was explaining the htmldb_Get to someone else, when I thought that it would make sense to make a jQuery plugin to remove some of the APEX-specificness of it).

    Fantastic job!

    John.

  2. Hi Tyler,

    Mind if I put the plugin on apexquebec.com in the jquery plugins section ?

    I’ll translate the website in a few weeks.

    Have a nice day,
    Louis-Guillaume

  3. Mark Lancaster said

    Hi Tyler

    I’ve deliberately restricted myself to just using the p_widget* and x01 – x10 variables for AJAX.
    Carl had indicated it was safe to use these without fear of side effects.

    Are you saying it’s equally safe to the other parameters in the wwv_flow.show procedure?

    The web-sheets demo I saw at OpenWorld last year was using cell based AJAX processing.
    Your implying it’s fine to do table-based AJAX processing.

    Very interested to hear your response on this.

  4. Hi Tyler,

    this looks very promising, looking forward to actual give it a try.

    Peter

  5. Justin Patterson said

    Tyler,

    Thanks for this great example, I first started using JQuery after your initial posting pointed me to it. I’ve learned to try and leverage as much as I can on JQuery rather than rewriting what has already been developed. This is just another example of why you should use it.

    Thanks again,
    Justin

  6. Hi Tyler,

    really cool! I’m sure we will grab some code and ideas from your plug-in for enhanced AJAX support in 4.0.

    Regards
    Patrick

  7. […] Link to the original site Tags: Ajax, Apex, Apex Project, Application Process, ORACLE BLOGS, Selectors […]

  8. […] jApex – A jQuery Plugin for APEX « Tyler Muth's Blog […]

  9. […] jApex – A jQuery Plugin for APEX « Tyler Muth's Blog […]

  10. […] jApex – A jQuery Plugin for APEX « Tyler Muth's Blog […]

  11. Dean Attewell said

    Tyler

    have you progressed this code at all?

    Tx
    Dean

  12. Bhavin said

    Hi Tyler,

    I can’t download the jApex file or jApex Application from the above link.

    Can you please send me one?

    Thanks,
    Bhavin

  13. Omar said

    Hi Tyler,

    I am also I can’t download the jApex file or jApex Application from the above link.

    Can you please send me one?

  14. Justin Patterson said

    Hi Tyler,

    Any chance you can save a copy of your example app onto apex.oracle.com or another host? I’m trying to replicate something in your example I cannot get it to work locally.

    I’m trying to make the div region appear with the returned values. The process runs fine and I can see the post contains the proper values but the region never appears on the screen.

    Thanks,
    Justin

  15. Hernandez said

    Where did you grow up?

  16. Tyler Muth said

    I just posted the files to a new, more permanent service. Sorry about that.

    Thanks,
    Tyler

  17. Hi Tyler,

    I wondered if you tried japex with JQuery 1.4.
    I seem to have problems with it. With JQuery 1.3 it works just fine, with 1.4 it seems to break.
    I need to do some more testing and isolate the problem, but thought to already ask.

    Thanks,
    Dimitri

  18. Alistair said

    Does this work with 3.0?

  19. Earl said

    Tyler,

    Your example application on apex.oracle.com isn’t working for me right now. Seems to most likely be related to the posts here by Dimitri and Gabs relating to jquery 1.3 vs. jquery 1.4.

    Do you have any plans to update this so your examples will work?

    Earl

  20. Earl said

    Tyler,

    After several hours of debugging and fiddling around with your jApex library I’ve found out why your example page on apex.oracle.com isn’t working.

    First, you have two references to the jquery library loading in your pages, because jquery 1.4.2 is loading automatically and you had previously coded the 1.3.2 library from Google into your apex page template. This is causing heartburn for jquery when you try to reference things via the “$” shortcut.

    Next, assuming you remove the old jquery reference (1.3.2) the reference to your jApex library is going to try to load before jquery 1.4.2 so it’s going to complain that it jQuery is undefined.

    Fix:
    1) remove the reference to jquery 1.3.2 from your page template.
    2) put the reference to the jApex library below the #HEAD# tag in your page template to ensure it loads after jquery 1.4.2.

    Hope this helps you or others that are trying to make use of the jApex library.

    Earl

    • Amis Calian said

      Thank for providing inputs on how to make it work….
      But still can not do that.
      Any other ideas to fix it?
      Thanks,
      Amis

  21. Jacques said

    Hi there,

    Here is some examplse on what we can do with Apex 4 + jquery + SlickGrid.

    http://jkolicorne.fr:7001/apex/f?p=222

    And my blog (in construction :-) ) http://jkolicorne.fr/apex/

    Sorry to tell that the example is in french.

  22. Tony MIller said

    Tyler,
    The dropbox version of this file for download is now dead. Can you supply an alternative means to download?

  23. Brian Heitner said

    Hey Tyler,

    Long time since we have seen you at the senate. We wanted to get your plugin but the dropbox version of this file for download has been dead. Could you provide us with a link to the permanent location?

    Thanks Tyler,
    Hope everything is going well.

  24. wehostia.com…

    […]jApex – A jQuery Plugin for APEX « Tyler Muth’s Blog[…]…

  25. Amis Calian said

    Does your app work with APEX 4.1.1, that I installed it into.
    I have trouble run any page. All of them are dead, same as on your demo.
    Thanks,,
    Amis

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 93 other followers

%d bloggers like this: