Solved

Add ID or class to jQuery Button

Posted on 2011-09-29
4
811 Views
Last Modified: 2012-05-12
Dear experts, as a novice to jQuery I'd like to add an ID or better a class to a jQuery button.
I need this element as a selector to trigger an action in Oracle Apex.

Could you please show me in my provided code how to add an ID?

Specifically I need to add this information to the element denoted in "l_1st_ok_button"!

My attempt (still present in the attached script) is not working. The site doesn't build up completely due to script errors.

Many thanks for your help!

Seb
function render_dialog_region(p_region               in apex_plugin.t_region,
                              p_plugin               in apex_plugin.t_plugin,
                              p_is_printer_friendly  in boolean)
  return apex_plugin.t_region_render_result
is
l_cancel_label       apex_appl_plugins.attribute_02%type := nvl(p_plugin.attribute_02, 'Cancel');
l_title              apex_application_page_regions.attribute_01%type := nvl(p_region.attribute_01, p_region.name);
l_width              apex_application_page_regions.attribute_02%type := p_region.attribute_02;
l_auto_open          apex_application_page_regions.attribute_03%type := nvl(p_region.attribute_03, 'N');
l_show_cancel        apex_application_page_regions.attribute_04%type := nvl(p_region.attribute_04, 'Y');
l_trigger_elements   apex_application_page_regions.attribute_05%type := p_region.attribute_05;
l_2nd_ok_label        apex_application_page_regions.attribute_06%type := nvl(p_region.attribute_06, 'OK');
l_2nd_ok_button       apex_application_page_regions.attribute_07%type := nvl(p_region.attribute_07, 'Y');
l_1st_ok_label       apex_application_page_regions.attribute_09%type := nvl(p_region.attribute_09, 'Ok');
l_1st_ok_button      apex_application_page_regions.attribute_10%type := nvl(p_region.attribute_10, 'Y');

  l_onload           varchar2(4000);
begin
  --
  -- During plug-in development it's very helpful to have some debug information
  --
  if apex_application.g_debug
  then
    apex_plugin_util.
     debug_region(p_plugin               => p_plugin,
                  p_region               => p_region,
                  p_is_printer_friendly  => p_is_printer_friendly);
  end if;

  --
  -- Include the jQuery-UI Button Stylesheet as it is not included by APEX as a default.
  --
  apex_css.
   add_file(
    p_name       => 'jquery.ui.button',
    p_directory  => apex_application.g_image_prefix || 'libraries/jquery-ui/1.8/themes/base/',
    p_version    => null
  );
  --
  -- Include the jQuery-UI Button JavaScript as it is not included by APEX as a default.
  --
  apex_javascript.
   add_library(
    p_name       => 'jquery.ui.button.min',
    p_directory  => apex_application.g_image_prefix || 'libraries/jquery-ui/1.8/ui/minified/',
    p_version    => null
  );

  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:{';

if l_1st_ok_button = 'Y' then l_onload := l_onload || '"'  || nvl(l_1st_ok_label ,p_plugin.attribute_09) || '"id:"' || '"btn-accept"' || '":function(){apex.jQuery(this).trigger("dialogregion.ok");$(this).dialog("close");}';
end if;
  if l_show_cancel = 'Y'
  then
    l_onload := l_onload || ',"' || l_cancel_label || '":function(){$(this).dialog("close");}';
  ELSIF
l_2nd_ok_button = 'Y' and l_1st_ok_button ='Y'
  then
    l_onload := l_onload || ',"' || l_2nd_ok_label || '":function(){doSubmit("LaunchJasperReports2");$(this).dialog("close");}';
ELSIF
l_2nd_ok_button = 'Y' and l_1st_ok_button = 'N' then l_onload := l_onload || '"' || l_2nd_ok_label || '":function(){doSubmit("LaunchJasperReports2");$(this).dialog("close");}';
  end if;
  l_onload := l_onload || '}';
  l_onload := l_onload || ',open:function(){apex.jQuery(this).trigger("dialogregion.open");}';
  l_onload := l_onload || '}).closest("div.ui-dialog").appendTo("form#wwvFlowForm");';
  apex_javascript.add_onload_code(p_code => l_onload);
  if l_trigger_elements is not null
  then
    apex_javascript.
     add_onload_code(
      p_code => 'apex.jQuery("' ||
               l_trigger_elements ||
               '").click(function(event) {' ||
               'apex.jQuery("#' ||
               p_region.static_id ||
               '").dialog("open");' ||
               'event.preventDefault();' ||
               'return false;' ||
               '}); ');
  end if;

  return null;
end render_dialog_region;

Open in new window

0
Comment
Question by:skahlert2010
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36815155
0
 

Author Comment

by:skahlert2010
ID: 36815236
Hi leakim971,

I am refering to a button as it is contained in a jQuery modal dialog i.e. styled with jQuery-UI.
You probably know these dialogs well!

The script I posted creates such a modal dialog including an "OK" button. This button needs to have an ID though or even better a new class. I have tried a lot but simply cannot enforce a button ID.

The links you posted deal with using selectors to handle actions. This is exactly what I have in mind but first I need to assign a class to the OK-btn of my modal dialog!

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36815337
jQuery do this job for you :

for example check here : http://jqueryui.com/demos/dialog/#modal-message
for the modal message example (check the right side) :
the OK button is rendered like that :

you may use : $("span:contains('Ok')").parent("button")

to do something with the  button
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
  <span class="ui-button-text">Ok</span>
</button>

Open in new window

0
 

Author Closing Comment

by:skahlert2010
ID: 36908216
Thank you leakim971!

I was able to achieve what I wanted and learned from the links you posted!
Great job!

Many thanks and best regards!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Wordpress type image upload 10 31
Change properties of a dialog box 1 20
C3-->D3 Line Chart 4 19
Two RegEx conditions in one 3 17
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now