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

skahlert2010Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
0
skahlert2010Author Commented:
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
leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
skahlert2010Author Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.