Scribd
Upload
487 views

J Query

The document provides instructions for several jQuery and JavaScript demos within an Oracle APEX application: 1. The first demo covers basic jQuery commands like hiding elements, getting text values, and traversing/manipulating the DOM. 2. The second demo edits an employee form, making the datepicker larger and creating a slider element. 3. The third demo finds attributes of cells in a report using selectors. 4. The fourth demo adds click events to report rows to output data to the console. It also styles report line heights. 5. The final demo adds links to a report to insert demo records via AJAX calls, PL/SQL, and refreshing a region. Click events

Uploaded by

s_abro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
487 views

J Query

The document provides instructions for several jQuery and JavaScript demos within an Oracle APEX application: 1. The first demo covers basic jQuery commands like hiding elements, getting text values, and traversing/manipulating the DOM. 2. The second demo edits an employee form, making the datepicker larger and creating a slider element. 3. The third demo finds attributes of cells in a report using selectors. 4. The fourth demo adds click events to report rows to output data to the console. It also styles report line heights. 5. The final demo adds links to a report to insert demo records via AJAX calls, PL/SQL, and refreshing a region. Click events

Uploaded by

s_abro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like