APEX - jQuery Basics

Jeff Eberhard

About Me

Oracle APEX Consultant
Smith Johnson Group
Utah Department of Transportation
Website: www.eberapp.com
Blog: blog.eberapp.com
Email: jeff@eberapp.com
Twitter: @eberhje

SMITH JOHNSON

IT Solutions
Staffing & Recruiting

Your source for IT Consulting, Contractors, & Direct-Hire Recruiting Services since 1993

Oracle Specialists
IT Leadership and Project Management
Software and Solutions Development
Database Solutions: Administration & Development
ERP / CRM

Contact: Mike Madsen - National Account Manager

mmadsen@smithjohnson.com

800-416-6989

What is jQuery?
Why use jQuery?

JavaScript Library
(write less, do more)

Included with APEX
Cross-Browser

What is jQuery?

Basically.....

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

The Basics - HTML

		<!DOCTYPE html>

		<html>

			<body>

			<h1>This is heading 1</h1>

			<div id="div1">

			  <p>This is a paragraph. </p>

			  <p>This is another paragrah</p>

			</div>

			<div id="div2">

			  <table>

			   <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>

			  </table>

			</div>

			</body>

		

		</html>

demo

HEADING 1

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>

		<html>

		<head>

		  <style>

		    body {color:red;}

		    h1 {color:#00ff00;}

		    p.ex {color:rgb(0,0,255);}

		  </style>

		</head>

		<body>

		<h1>This is heading 1</h1>

		<p>This is a paragraph. </p>

		<p class="ex">This is another paragraph</p>

		</body>

		</html>

demo

Heading 1

This is a paragraph.

This is another paragraph

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

http://devtoolsecrets.com

Executing jQuery

jQuery()

$()

$("selector").method()

Selecting Elements

$("selector")

by Element
$( "div" );

by ID
$( "#myId" );

by Class
$( ".Class" );

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

Psuedo Selectors

:checkbox
:checked

:first
:last

:odd
:even

$( "td :odd" );

Traversing

.first()
.last()

.parent()
.siblings()
.children()

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

Traversing (filtering)

.first()
.last()

.eq()

.filter()
.find()

.not()

Effects

.hide()
.show()
.toggle()

.fadeIn()
.fadeOut()
.fadeToggle()

.slideDown()
.slideUp()
.slideToggle()

Manipulations

.val()
.html()
.attr()

.text()

Manipulations

.addClass()
.removeClass()
.toggleClass()

.height()
.width()

.css()

.attr()
.prop()

Chaining

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

$("div.myClass").fadeOut(); $("div.myClass").fadeIn();

$("div.myClass").fadeOut().fadeIn();

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 ⁱ
(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:",""); 

	  $(this).attr("href", 

	    "javascript:popUp2('f?p=&APP_ID.:5585:&SESSION.:::5585:P5585_TO:"

	                        +mailaddr+"',550,400);");   

	  $(this).text(mailaddr); 

});

APEX Example 2

Beautify a classic report with subtotals.
Color columns.
Change group summary labels and color summary rows.

				$("td.data[headers='QUANTITY']").css("background-color","#EAEAEA");

				$("td.data[headers='TOTAL_PRICE']").css("background-color","#D4FFBF")

				$("td.data[headers='CATEGORY'] b:contains('Prod # Total:')")

				   .text("")

				   .closest("tr").find("td").css("background-color","#FFFFA3")

				   .parent().find("td:nth-child(2)")

				   .text(function(){

				           return( 

				             $(this).parent()

				                    .prev()

				                    .find("input.product_name").val()

				                  + " subtotal:" ); 

				         }

				    )

				   .css("font-weight","bold");

		$("td.data[headers='CATEGORY'] b:contains('Category Total:')")

		  .closest("tr").find("td").css("background-color","#7BC5EA").css("border-bottom-width","10px").css("border-bottom-color","#000033")

		  .parent().find("td:first")

		  .text(function(){

		          return(

		            $(this).parent()

		            .prev()

		            .prev()

		            .find("input.category").val()

		          + " overall:" );

		        } )

		  .css("font-weight","bold");