First Demo - Basic Commands

-- Open tab -> 'First Demo'

-- Try the following commands in the javascript console
$('body h1').hide()
-- selectors
$('#communicators li:first').text()
-- chain
$('#communicators li:eq(1)').addClass('coolCat').text('Neil Tyson')
-- traverse
$('.coolCat').closest('ul')

Second Demo - Edit Employee Form

-- To make datepicker widget appear larger
-- add this to Page Attributes - Inline CSS
div.ui-datepicker {
font-size: 200%;
}
table.ui-datepicker-calendar>tbody>tr > td >a{
padding:10px;
}
-- Create display item Pn_SLIDER
-- add this to Pre-Element-Text

-- Add this to Page Attributes - Fire on load

$(function() {
$( "#slider" ).slider({
range: false
,min: 100
,max: 200
,step:2
,values: 100
,slide: function( event, ui ) {
console.log('slide');
console.log(event);
console.log(ui);
$s('P3_SLIDER',ui.value);
}
,create: function( event, ui ) {
}
});
});
-- Include the following JavaScript URL
/i/libraries/jquery-ui/1.8/ui/minified/jquery.ui.slider.min.js
-- Attempt to slide using touch device

-- then include this file and try again

wwv_flow_file_mgr.get_file?p_security_group_id=18136419587952283&p_fname=jquery.
ui.touch-punch.min.js

Third demo - Track down cell attributes

-- Add static region ID to employee report region
p2_emp
-- Try the following commands in the javascript console
$('#report_p2_emp table tbody tr');
$('#report_p2_emp table tbody tr:first td[headers="ENAME"]').text();

Fourth Demo - Event Data

-- Create on-click event classic report row
$('#report_p2_emp table tbody tr').on('click', function() {
console.log(this);
console.log($(this).find('td[headers="ENAME"]').text());
});
-- now click anywhere on one of the rows, check javascript console
-- increase the line height of each td within the report using the browser style
-- Edit page attributes -> Inline CSS
tbody > tr > td {
line-height:35px;
}
-- open the computed styles tab to determine which styling took precedence for l
ine-height
-- try using important
tbody > tr > td {
line-height:35px !important;
}
-- try including region ID
#report_p2_emp tbody > tr > td {
line-height:35px;
}

Fifth Demo - AJAX Calls

-- Here we are going to add two links to each report
-- Each link will insert a record in a table and refresh a report region showing
table contents
-- Edit
Display
Element
Element

report column SAL

As: Text Field
Width: 3
Attributes: style="text-align:right;"

-- Edit EMPNO column, modify Link Attributes

data-empno="#EMPNO#"
-- Edit Report Attributes -> Tasks -> Add (two) Column Links
Link text: DA
Link attributes: class="da_link"
Link url (not page): javascript:void(0);
Link text: jQuery
Link attributes: class="jquery_link"
Link url (not page): javascript:void(0);
-- Create four text items in employees region:
P2_INDEX
P2_VALUE
P2_DESC
P2_OUTPUT
-- The following table should already exist in the schema
create table emp_demo (
empno number
,sal number
,updated_by varchar2(30)
,updated_date date
);
-- Add classic report region to page:
Region Title: History
SQL:
select * from emp_demo
where updated_by = :APP_USER
order by updated_date desc
-- Edit new region
Start new grid row: No
-- Edit Updated_Date column, set format mask to include date/time format includi
ng seconds
Number / Date Format: DD-MON-YYYY HH24:MI:SS
-- Create Dynamic Action for click of 'DA' link
Name: Click DA
Event: Click
jQuery Selector: .da_link
Execute JS (not on load):
console.log(this.triggeringElement);
$s('P2_INDEX', $(this.triggeringElement).closest('tr').find('td[headers="EMPNO"]
a').data('empno'));
$s('P2_VALUE', $(this.triggeringElement).closest('tr').find('td[headers="SAL"] i
nput').val());
$s('P2_DESC' , $(this.triggeringElement).closest('tr').find('td[headers="ENAME"]
').text());
-- Try click link, observe javascript console and values in page items
-- Add PL/SQL action to your Dynamic Action
insert into emp_demo (empno, sal, updated_by, updated_date)
values (:P2_INDEX, :P2_VALUE, :APP_USER, SYSDATE)
returning updated_date
into :P2_OUTPUT;

:P2_INDEX := null;
Page Items to Submit: P2_INDEX,P2_DESC,P2_VALUE
Page Items to Return: P2_OUTPUT,P2_INDEX
-- Add third action to refresh history region
Action: Refresh
Selection Type: Region
Affected Elements: History region
-----

Try clicking link again

- history region should refresh
- p2_index cleared out
- output shows timestamp

-- Edit page properties -> Execute when Page Loads

$('#p2_emp a.jquery_link').on('click', function(evt) {
console.log('Click row event');
console.log(evt);
console.log($(this));
$theRow = $(this).closest('tr');
apex.server.process("EMP_DEMO",{
x01:$theRow.find('td[headers="EMPNO"] a').data('empno')
,x02:$theRow.find('td[headers="SAL"] input').val()
},{
dataType:"text"
//,async: false
,success:function(pData){
console.log('return:'+pData);
$('#p2_history').trigger('apexrefresh');
}
});
console.log('event finished');
});
-- Try click on the jQuery link
-- - page items do not change / aren't needed
-- - record still inserted and history refreshed