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?

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

Executing jQuery

jQuery()

$()

$("selector").method()

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

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");