asked on

Add ID or class to jQuery Button

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

leakim971

what do you call a << jQuery Button >>

This pages may help :
http://api.jquery.com/button-selector/
http://api.jquery.com/class-selector/
http://api.jquery.com/id-selector/

http://api.jquery.com/category/selectors/

skahlert2010

ASKER

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!

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

skahlert2010

ASKER

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!