APEX - jQuery Basics


Jeff Eberhard

About Me


Jeff Eberhard


  • West Jordan, Utah
  • Oracle APEX Consultant
  • Utah Department of Transportation
  • Website: www.eberapp.com
  • Blog: blog.eberapp.com
  • Email: jeff@eberapp.com
  • Twitter: @eberhje


What is jQuery?
Why use jQuery?


  • JavaScript Library 
    (write less, do more)
  • Included with APEX
  • Cross-Browser

What is jQuery?




  • Find Element(s)
  • Do something with/to it.

The Basics - HTML 

<!DOCTYPE html>
<h1>This is heading 1</h1>
<div id="div1">
  <p>This is a paragraph. </p>
  <p>This is another paragrah</p>
<div id="div2">
   <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
   <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td><td>Row 1 Col 3</td></tr>
   <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td></tr>
   <tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td><td>Row 3 Col 3</td></tr>



This is a paragraph.

This is another paragrah

Column 1 Column 2 Column 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Col 1 Row 3 Col 2 Row 3 Col 3


The Basics - CSS

<!DOCTYPE html>
    body {color:red;}
    h1 {color:#00ff00;}
    p.ex {color:rgb(0,0,255);}
<h1>This is heading 1</h1>
<p>This is a paragraph. </p>
<p class="ex">This is another paragraph</p>


Heading 1

This is a paragraph.

This is another paragraph

Executing jQuery







Developer Tools

"F12" in Windows

Cmd" ⌘, "Option" ⌥ and "I" on the Mac

Right-click on page and select "Inspect Element"

  • I.E.
  • Chrome
  • Safari - Enable in Preferences > Advanced > Show Develop
  • Firefox - Firebug addon from http://getfirebug.com



Selecting Elements


by Element
$( "div" );

by ID
$( "#myId" );

by Class
$( ".Class" );

by Element Attribute
$( "input[name='P10_EMPNO']" );

Psuedo Selectors




$( "td :odd" );






$( "table.uReport tr").first();

Traversing (filtering)





















  • Most jQuery methods return another jQuery
    object - usually one representing the same
    collection.  This means you can chain
    methods together:





The APEX Connection
(Where to use?)


Page Definition

  • Function and Global Variable Declaration
  • Execute when Page Loads


Dynamic Actions

  • Selection Type: jQuery Selector
  • Action: Execute JavaScript Code

APEX JavaScript APIs


http://api.oracleapex.com i
(links to current Oracle API Reference)


  • $x(pNd) - The Element
  • $v(pNd) - The Element Value
  • $v2(pNd) - The Element Array (multiple values)
  • $s(pNd, pValue, pDisplayValue, pSuppressChangeEvent)

APEX JavaScript APIs

  • apex.submit(pRequest)
  • apex.confirm(pMessage, pRequest)
  • apex.item( pNd )
  • apex.item( pNd ).getValue()
  • apex.item( pNd ).setValue(   pValue,pDisplayValue,pSuppressChangeEvent)
  • apex.item( pNd ).addValue( pValue )
  • apex.item( pNd ).disable()
  • apex.item( pNd ).enable()
  • apex.item( pNd ).hide( pHideRow )

APEX Example

  • Add to a page load dynamic action jQuery script
    to change "mailto" links to link to a popup email page.


$('a[href^="mailto:"]').each(function() {  
  var mailaddr = $(this).attr("href").replace("mailto:","");


APEX Example 2

  • Beautify a classic report with subtotals.  
  • Color columns.  
  • Change group summary labels and color summary rows.
$("td.data[headers='CATEGORY'] b:contains('Prod # Total:')")
                  + " subtotal:" ); 
$("td.data[headers='CATEGORY'] b:contains('Category Total:')")
          + " overall:" );
        } )










Thank You!

Jeff Eberhard
Email: jeff@eberapp.com
Website: www.eberapp.com
Twitter: @eberhje