Jquery Selector in Apex 4.1

Hi everybody,
I've just upgraded to apex 4.1 from 4.0.1 and my dynamic actions selecting jquery class selector type (.my_class) now just selects the first element of that class instead of all the elements of class, my_class.
It was working smoothly in 4.0. Do you have any idea how to resolve this?
I've already tried instructions in documentation section "About jQuery and jQuery UI Support" http://download.oracle.com/docs/cd/E23903_01/doc/doc.41/e21674/app_comp001.htm#BABHCBJI
reverted my page back to include jQuery 1.4.2 but did no help.
PS: I use Firefox 3.6.
The most important Info that I forgot to include*: The selection fails in set value action's affected element selector. When selector seems ok.
Edited by: oeren on Oct 4, 2011 12:29 AM

4.1 Release Notes wrote:
4.13 Dynamic Action Set Value with Multiple Affected Elements
With the introduction of some built-in options to retrieve multiple values, Application Express no longer supports the ability to retrieve 1 value that could then be used to set multiple page items. This was done for simplicity and usability. If you had defined a 'Set >Value' dynamic action that set multiple Affected Elements to the same value, here is how you can fix this, according to the 'Set Value' dynamic action's 'Set Type':
*Static Assignment - Define additional 'Actions' for each Affected Element, setting them all to the same value.
....Is this the reason?? Should I have to define set values for every single item?

Similar Messages

Dymanic action with jQuery selector not working in version 4.2.2

Hi,
We’re in the process upgrading to APEX version 4.2.2. We have an issue is with a report with a link that’s firing a dynamic action with a jQuery selector.
The first sequence in the dynamic action is Confirm. When we click the link in the report it’s supposed to popup a confirm “Are you sure you want to save?"
When we click the link nothing happens. This works in our current version 4.0.1, but not in 4.2.2. Do you have any ideas?
Thanks,
Joe

change the
in the url to
javascript:void(0);
The reason for your issue is that the default action of the anchor tag is not prevented and thus navigation occurs. A confirm action will return true or false, and execution of further true actions will stop when selecting cancel but this will still not prevent the default action from occuring. Similarly a cancel event true action is not adequete as this has to be run after the confirm so not accounting for the execution-stopping cancel of the confirm.
That javascript in the url is some good ol' "hack". It'll run that javascript instead of performing a navigation and void(0) just does nothing, and the click dynamic action will be unaffected.

Dynamic action on checkbox using jQuery selectors

Aim: Have a classic report with a checkbox for each record that fires a dynamic action. I'd like to source the relevant ID/value within Javascript (ultimately PL/SQL)
Consider a classic report using the following query
SELECT label
,apex_item.checkbox
(p_idx => 15 -- f42
,p_value => id
,p_attributes => 'id="f15_'||id||'" class="xyz"'
) chk
FROM my_tableDefine a dynamic action with
Event: Click
Selection type: jQuery selector
jQuery selector: .xyz
No condition
Scope:Bind
I have an action executing javascript
var me = this.triggeringElement;
console.log('me:'||me);
console.log('name:'||me.attr('name') );
console.log('id:'||me.attr('id') );
console.log('value:'||me.prop('val'));Affected elements Selection type: Triggering element
When I run the page and check a box, the DA fires, but all output shown in the console log is blank.
I've tried copious variations to get this right, such as using $(this.triggeringElement)
These pages make me feel confident I have the syntax right
http://stackoverflow.com/questions/12038392/oracle-apex-checkbox-to-manipulate-other-values-when-checked-unchecked
http://iadviseblog.wordpress.com/2011/08/24/get-triggering-element-in-da/
But my values are still null?! Anyone know what I've missed?
Apex 4.1.1
Scott

var me = this.triggeringElement;
console.log('me:'||me);
console.log('name:'||me.attr('name') );
console.log('id:'||me.attr('id') );
console.log('value:'||me.prop('val'));<ul>
<li>Concatenation in javascript is with +* and not *||* (which means OR)</li>
<li>Also, this.triggeringElement is a reference to the DOM element, it is not a jQuery object. So wrapping it in $() is required when you wish to access properties through jQuery.</li>
<li>.prop('val') won't work. You need to check for the existence of a property-line attribute, which in case of a checkbox could be "checked".</li>
<li>dynamic action on a report: use scope Live to prevent functionality from working when the report is refreshed/paginated</li>
</ul>
var me = $(this.triggeringElement);
console.log('me:'+me);
console.log('name:'+me.attr('name') );
console.log('id:'+me.attr('id') );
console.log('value:'+me.prop('checked'));

Bug? chained jQuery Selector in Dynamic Action doesn't work

Just found out, that this jQuery Selector jQuery("#ABOTYPE_REPORT").find("#f01_0001") doesn't work as triggering Element of type "jQuery Selector" in a Dynamic Action.
But this one jQuery("#ABOTYPE_REPORT").find("#f01_0001")[0] worked with type "DOM Element" as triggering Element in a Dynamic Action.
To my knowledge even the first one is a real and valid jQuery Selector and should work.
brgds,
Peter
Blog: http://www.oracle-and-apex.com
ApexLib: http://apexlib.oracleapex.info
BuilderPlugin: http://builderplugin.oracleapex.info
Work: http://www.click-click.at

Hi Patrick,
It would be really nice if you could support a less strict definition of the jQuery Selector (as i understand DOM Object and jQuery Selector to be the advanced and more powerful options).
In my example i could directly use #f01_0001 if my page wouldn't have more than one TabForm on it (and therefore multiple elements with id f01_0001) ;-)
brgds,
Peter
Blog: http://www.oracle-and-apex.com
ApexLib: http://apexlib.oracleapex.info
BuilderPlugin: http://builderplugin.oracleapex.info
Work: http://www.click-click.at

Jquery selector question..

Hi all...
Please help me with this jquery question.
In the Interactive reports,I would like to hide the option
"Row"(filter) (radio button option) under the "Actions-->Filter"
This is the code i was using,but it is not working.
I am very new to jquery, please help me with the jquery syntax.
$(function(){
$("ul li:contains('Filter')").live('click',function(){
$("#APEXIR_FILTER_TYPE_1").hide(); -- i need to hide that ""complete option""
});APEX: 4.1
Database: 11g
Browser: IE7

Hi,
There us 2 options. Default is columns. Why you like show this if you hide Row option?
What I did test filter works ok when both options are hidden.
I did not test your jQuery selector, but problem is that region where radio buttons exists are append using Ajax call.
When your onclick event fires, element are not in HTML document, and that is main reason why your jQuery solution do not work
Regards,
Jari
http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0

Creating simple jquery TABS in apex

All,
I am creating basic jquery TABS in apex but i realized its just not working as i thought... i really need help on this please?
what i did created in my region i added below code
<div id="tabs">
<ul>
<li><a href="#">Nunc tincidunt</a></li>
<li><a href="#">Proin dolor</a></li>
<li><a href="#">Aenean lacinia</a></li>
</ul>
</div>
then at page header i made references,
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="#WORKSPACES_IMAGES#style.css" />than i added child region to the above.
but all isn't working ....your help is appreciated regards

First off, why are you referencing a newer version of jquery than what is bundled with APEX? Here is a simple solution for your problem: http://www.warp11.nl/2011/04/tabs-within-apex-using-jquery/
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA

What are the steps to convert any jQuery Plugin to Apex Plugin?

Dear Apex Experts,
What are the steps to convert any jQuery Plugin to Apex Plugin?
Best Regards

you might also want to have a look at the documentation at http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/advnc_plugins.htm#HTMDB27009
Missed this Patrick
We (Oracle) also provide some plug-in examples at http://apex.oracle.com/plugins which you can use as a blueprint. The "Masked Text" would be a good example for you on how to wrap a jQuery plug-in as APEX plug-in.
Never used that, So don't know that it was a jquery
Thanks

JQUERY integration within APEX

Hi everybody and merry chrismas...
I have a problem with jquery within apex. I looked for in previous posts but I can not achieve to make it works...
I am running apex 3.2.1 on linux with apex listener.
I want to refresh a report and I found that it was possible to do so using jQuery(...).trigger('apexrefresh'). So I tried to declare jquery...
I downloaded jquery-1.8.3.js from http://jquery.com and uploaded both as static files in shared components with apex.
Now I try to define the file in my javascript section like this :
<script src="#APP_IMAGES#jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
     // refresh of regions impacted by the change of PXX_ID_OPERATION item
     alert("#APP_IMAGES#jquery-1.8.3.min.js");
     alert(apex.jQuery().jquery);
</script>
But the javscript failed on the apex.jQuery().jquery instruction.
What is my mistake ? I am certainly completely wrong but I did not find a clear tutorial on internet. Thank you in advance for help.
Regards...

>
Please update your forum profile with a real handle instead of "975489".
I have a problem with jquery within apex. I looked for in previous posts but I can not achieve to make it works...
I am running apex 3.2.1 on linux with apex listener.
I want to refresh a report and I found that it was possible to do so using jQuery(...).trigger('apexrefresh').Where did you find this?
So I tried to declare jquery...
I downloaded jquery-1.8.3.js from http://jquery.com and uploaded both as static files in shared components with apex.
Now I try to define the file in my javascript section like this :
<script src="#APP_IMAGES#jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
     // refresh of regions impacted by the change of PXX_ID_OPERATION item
     alert("#APP_IMAGES#jquery-1.8.3.min.js");
     alert(apex.jQuery().jquery);
</script>
Always post code wrapped in tags<tt>\...\</tt> tags to preserve formatting and prevent it being mangled by the forum software.
But the javscript failed on the apex.jQuery().jquery instruction.
What is my mistake ? I am certainly completely wrong but I did not find a clear tutorial on internet. Thank you in advance for help.The <tt>apexrefresh</tt> event and <tt>apex</tt> namespaced jQuery are APEX 4.x features that are not available in 3.2—even if you add jQuery yourself.
APEX 3.2 support expired in February 2012, so the first recommendation is to upgrade to the latest version (4.2) where reports can be refreshed declaratively using Dynamic Actions.

Using jquery FullCalendar in APEX with dynamic query

Hi,
I am trying to implement jquery FullCalendar in APEX and came across thie following post but I am unable to get the events to work. I would really like to see it working with an Application_Process:
How we can highlight events in Calendar
Currently I created an Application Process that simply calls a DB table and convert it into json format.
DECLARE
v_sql varchar2(400);
BEGIN
v_sql := 'SELECT * FROM CAL_FEED';
apex_util.json_from_sql(v_sql);
END;
But I am unsure how to add the events via an Application_Process.
I have tried the following in numerious ways (events:function, url feed, etc). It does work if I just do an array but would like it as a dynamic query.
$('#calendar').fullCalendar({
events: "http://server:8080/apex/f?p=101:53:4352610578859707:APPLICATION_PROCESS=IAT_TEST_CAL_FEED"
Thank you in advance,
Jimmy

Hi,
I was able to get the events into Fullcalendar with an Application Process but not sure if this would scale well with alot of events.
Would someone be able to tell me if there is a better way?
I am currently using an On Demand Application Process called IAT_TEST_FEED:_
DECLARE
lv_cal_list VARCHAR2(16000);
lv_return_str VARCHAR2(32000);
BEGIN
FOR i IN (SELECT "CAL_FEED"."ID" as ID,
"CAL_FEED"."title" as caltitle,
"CAL_FEED"."start" as calstart,
"CAL_FEED"."end" as calend
FROM "CAL_FEED")
LOOP
lv_cal_list := lv_cal_list || '{"id":' || CHR(39) || i.ID || CHR(39) || ',' ||
' "title":' || CHR(39) || i.caltitle || CHR(39) || ',' ||
' "start":' || CHR(39) || i.calstart || CHR(39) || ',' ||
' "end":' || CHR(39) || i.calend || CHR(39) || '},';
END LOOP;
lv_return_str := '[' || RTRIM(lv_cal_list,',') || ']';
htp.prn(lv_return_str);
EXCEPTION WHEN OTHERS THEN
htp.prn('error');
END;
In a HTML Region on a page within the Region Header:_
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#fullcalendar.css" />
<script type="text/javascript" src="#WORKSPACE_IMAGES#ui.core.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#ui.draggable.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#ui.resizable.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#fullcalendar.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#fullcalendar.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: function(start, end, callback) {
$.ajax({
type: "POST",
url: "wwv_flow.show",
dataType: "json",
data: {
p_flow_id:$('#pFlowId').val(),
p_flow_step_id:$('#pFlowStepId').val(),
p_instance:$('#pInstance').val(),
p_request:"APPLICATION_PROCESS=IAT_TEST_FEED"
success:function(calevents){
$.each(calevents, function(i, calevent){
$('#calendar').fullCalendar('renderEvent', calevent, true);
</script>
The line within the ajax call is basically where my concern would be
$('#calendar').fullCalendar('renderEvent', calevent, true);
Thank you,
Jimmy

Blog Post: jApex, A jQuery Plugin for APEX

http://tylermuth.wordpress.com/2009/08/19/japex-a-jquery-plugin-for-apex/
Tyler Muth
http://tylermuth.wordpress.com

Tyler,
This is really nice! I am also working on jquery plugins for APEX. We should talk to see if we can combine all plugins in one big APEX plugin.
You can try [jquery.apex-session-0.0.1.js|http://apex.oracle.com/pls/otn/f?p=987654321:54:0:::54] and [jquery.apexpage-0.0.2.js|http://apex.oracle.com/pls/otn/f?p=987654321:52:0:::RP,52] .
Louis-Guillaume
[My Blog|http://lgcarrier.blogspot.com]
[APEX and jQuery demos|http://www.insum.ca/jquery]
Edited by: lgcarrier on Mar 11, 2009 7:15 PM

JQuery ids in Apex dialog region plug-in

Hi,
Apex 4.0
I have a plug in (here ) that opens a dialogue region when someone clicks on a button. I'm calling a dynamic action to process a PL/SQL procedure but it takes a while to process the procedure. I have another plug-in which disables the screen and uses a pop-up until its finished processing, but to use the 'processing' pop-up I need to link it to my other plug-in.
I can access apex buttons on the pop-up but it has its own jQuery 'OK' button, But I cant seem to find its id anywhere... I tried modifying the code, but Im not sure if I'm correct in assuming that the id is "" in the first place(used firebugs DOM feature to find it). I have a little experience with jQuery but not so with jQuery in apex...
Is there anyway I can assign it one? Or does it already have one?
This is the code I've modified from the plug-in:
l_onload := 'apex.jQuery("#' ||
    p_region.static_id ||
    '").dialog({' ||
    apex_javascript.add_attribute('autoOpen', (l_auto_open = 'Y')) ||
    apex_javascript.add_attribute('modal', true) ||
    apex_javascript.add_attribute('title', l_title) ||
    apex_javascript.add_attribute('width', to_number(l_width)) ||
    'buttons:{' || '"' || l_ok_label || '":function(){apex.jQuery(this).trigger("dialogregion.ok");
$(this).attr("","NEWID");
    $(this).dialog("close");}';

Turns out this was a stupid question, the plug-in had an dynamic action triggering event.

Region Selector in Apex 4

Has anyone had any luck getting this feature to work. I created a page in the early adopters and used the new Region Seletor functionality to create a Region of type Region Selector and then created some regions and which I set to selectable (see link below). All looks ok when I view the region names and the JS calls, but alas "It Don't Work". Am I missing something or is it Work in Progress.
http://tryapexnow.com/apex/f?p=2971:4
Shunt

Hey Shunt,
It works now, have a look at the next blog for instructions how to use it:
http://iadviseblog.wordpress.com/2010/06/24/apex-4-0-region-selector/
Kind regards,
Oli

JQuery Selector

Hi guys,
I work on apex 4.1.1. Theme : 21 . Template: Navigation region. Latest version of Google Chrome.
I am trying to trigger Skillbuilder Modal page by clicking on a list entry.
in the URL of that entry i Put:
Javascript: retrun false;This list entry contains this text Create Reminder and is the first li on a list region by the ID of tasks
I tried the following:
$("li:contains('Create Reminder')")
$("#tasks > li")
$("#tasks li:first")But none of which triggered the plugin..
Regards,
Fateh

Hi,
You should not write to Region Attributes
id="tasks"You should use Static ID and place there
tasksYou should not place list URL target
javascript: return false;You place there
javascript:void(0);or
#I propose you read about these topics from documentation
http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/toc.htm
And you take Firefox browser and Firebug addon. With Firebug you see e.g. JavaScript errors and when you explore HTML you could see that you was missing dom with id tasks.
Regards,
Jari
My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
Twitter: http://www.twitter.com/jariolai

Generic jQuery selector

Hi,
Does anyone know how to make a generic function so that the #your_dialog can be any ID passed from a wrapper function? For example, I can pass the DIV with ID=MODALDIALOG_INDEX in a call to the following function. Then, I can simply write the following function once and use it for different pages many times. I want to make the #your_dialog dynamic instead of hardcoded.
Thanks.
Andy
<pre>
$(document).ready(function(){
$("#your_dialog").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
modal: true,
buttons: {
'Cancel': function() {
null; //your work
'Ok': function() {
null; //your work
</pre>

<script>
function open_dialog(RegionJquerySelector) {
      $(RegionJquerySelector).dialog({
         autoOpen: false,
         bgiframe: true,
         resizable: false,
         modal: true,
         buttons: {
            'Cancel': function() {
               null; //your work
            'Ok': function() {
               null; //your work
</script>Add the code to page header
Then in execute when page loads section ( otherwise wraps in in the $.ready() code block)
open_dialog('#yourRegionID');If you want to reuse this, add the function definition as an external JS file(remove the script tags for a file). Load it in your page(s) and use the open_dialog function with the region se;lector.

Roll Your Own - APEX 4.0 and JQuery-UI Application

For those with a apex.oracle.com account and want to see jQeury tabs running via 4.0 in your own Workspace, use following this script to create your own version of Shijesh's (Apex_Noob) application.
Credit also goes out to Alistair Laing for his hard work in investigating why 4.0 is requiring the use of the googleapis jquery.js... libraries.
Application Builder - Create
Application Type - Database
Create Application - From Scratch
Name - jQuery Application
Add Page - keep default and Click Add Page
Click CreateMy application defaulted to Theme 2, you will need to switch the theme to one of the following: If you don't the tabs will not render properly.
8 Orange
10 Sand
13 Classic Blue
14 Simple Green
15 Light Blue
16 Dark Blue
18 Simple Gray
19 Red Gray
Message - Application created successfully.
Click Shared ComponentsUnder User Interface Click - ThemesIf you don't see one of the above Themes, you will need to Create and switch your Theme.
Click - CreateFrom the Repository selected Click - Next and select one of the above Themes
Click - Switch ThemeSelect one of the above Themes and Click - Next
Click -NextClick - Switch ThemeReturn to your newly created Application by Clicking on Application xxxxxxx Breadcrumb
Click - Create PageSelect - Blank PageClick - NextAssign the page a name
Click - NextAccept defaults and Click - NextClick - FinishClick - Edit PageI still work in Component View, to toggle to this View, click on the control adjacent to Page number and Go button. Hover over the ones on the far right and you will see both Component View and Tree View
From Component View
Click on the Page Edit Control
In the Text Area labeled Javascript/Execute when Page Loads - paste in the following code:
$x("tabs").appendChild( $x("tabs-1"));
$x("tabs").appendChild( $x("tabs-2"));
jQuery("#tabs").tabs();In the Text Area labeled HTML Header and Body Attribute/HTML Header - paste in the following code:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css" type="text/css" />
<script src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"> </script>Click - Apply ChangesRequired use of the Google jqueryui libraries is being questioned by recent threads created by Alistair Laing since it appears that 4.0 does not currently support jQeury tabs
{thread:id=1083507}
{thread:id=1083540}
Create a Region
Type HTML Text - accept defaults
Provide a Title like "Tabs" and accept defaults
Template - Reports Region
Sequence 10
Click - NextIn the Enter HTML Text Region Source: Text Area - paste in the following code:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Employees</a></li>
<li><a href="#tabs-2">Departments</a></li>
</ul>
</div>Click - Create RegionCreate a second Region
Type Report/Sql Report
Provide a Title like "Employees" and accept defaults
Template Reports Region
Sequence 20
Click - NextIn the Enter SQL Query or PL/SQL function returning a SQL Query: Text Area - paste in the following code:
SELECT empno,
       ename,
       job,
       mgr,
       hiredate,
       sal,
       comm,
       deptno
FROM   empClick - Create RegionEdit the newly created Report Region
Under Attributes/Static ID - paste in the following code:
tabs-1Click - Apply ChangesCreate a third Region
Type Report/Sql Report
Provide a Title like "Departments" and accept defaults
Template Reports Region
Sequence 30
Click - NextIn the Enter SQL Query or PL/SQL function returning a SQL Query: Text Area - paste in the following code:
SELECT deptno,
       dname,
       loc
FROM   deptClick - Create RegionEdit the newly created Report Region
Under Attributes/Static ID - paste in the following code:
tabs-2Click - Apply ChangesRun you page and you should see you tabs.
Jeff

Great post Jeff,
With regard to Jquery UI and tabs I've contacted the Apex dev team and received a reply from them.
All the jQueryUI files are included in the APEX 4.0 distribution, but not all jQueryUI components
are loaded by default to avoid a huge initial download. It's not necessary to load your own version of jQueryUI, just load the missing component.
For the "Tabs" you have to add
<link href="IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>
to your page template or the header attribute of your page where you want to use it.They did not mention which other Jquery UI widgets were not included so people need to check to see if they get any JS errors Like "$('#tabs').tabs() is not a function" this would suggest that tabs is not being loaded. To included it in you page header directly after #HEAD# you need to place the css and js as stated above.
If you need jquery help just post you queries here or the is some other jquery links that maybe of some use
jQuery
http://jquery.com/ - Official jQuery Website
http://api.jquery.com/ - jQuery API Library
http://plugins.jquery.com/ - jQuery Plugins (Not APEX related)|
http://yayquery.com/ - yayQuery - jQuery Podcast
http://jqueryui.com/ - Official jQuery UI Website
http://jqueryui.com/demos/ - jQuery UI Demos
Edited by: Alistair Laing on Jun 9, 2010 4:04 PM
Add more links
Edited by: Alistair Laing on Jun 9, 2010 4:09 PM

Jquery Selector in Apex 4.1

Similar Messages

Maybe you are looking for