Databases Reference
In-Depth Information
6.
The last true action that is required is to fade in the employee name and then unbold
it. The jQuery fadeIn function will be used to do this. Create a true action as follows:
•
Identification
•
Sequence:
30
•
Action:
Execute JavaScript Code
•
Execution Options
•
Fire When Event Result:
True
•
Fire On Page Load:
uncheck
•
Settings
•
Code:
$(this.affectedElements).fadeIn(2000, function(){
//The second parameter in the fadeIn function allows you to define a
//function to be run once the fadeIn is completed.
//This function will be used to remove the bold style
$(this).css('font-weight','');
});
•
Affected Elements
•
Selection Type: Triggering Element
Refresh Page 1 and click on an employee in the Department Employees
report; the employee name
should appear in the Employee area. Once the name appears nothing happens to it. This is due to how
the change event is triggered when called from JavaScript.
The change event is triggered when a user modifies a value from the browser. If the value is
modified by JavaScript the change event is not fired. To resolve this issue you'll need to manually trigger
a change event when P1_EMP_DISPLAY is modified. An event can easily be triggered using the jQuery
trigger()
function.
To trigger the change event on P1_EMP_DISPLAY modify the Row Click Dynamic Action and edit
the Execute JavaScript true action. Change the last line in the code area from this:
$('#P1 EMPNO DISPLAY').html(dataSpan.attr('data-ename'));
to this:
$('#P1 EMPNO DISPLAY').html(dataSpan.attr('data-ename')).
trigger('change');
Apply the changes and refresh the run page. The employee name should be bolded and fade in for 2
seconds after a row is clicked. Once the fade in finishes the employee name is no longer bolded.
Note
The only modification that was made to the last line of code was to add
.trigger('change')
One of the
great things about jQuery is its ability to “chain” functions. Each function in jQuery returns itself so you can easily
append another function to it. To learn more about jQuery chaining search online for “jquery chaining”.
