Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Add ID or class to jQuery Button

Posted on 2011-09-29
4
Medium Priority
?
858 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 83

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 83

Accepted Solution

by:
leakim971 earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
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…
Suggested Courses

885 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