Disable HTMLB dropdown with JavaScript

[Former Member]

Hi All,

I ran into the following issue:

I have a BSP page that used HTMLB dropdowns and some custom javascript that disabled those dropdowns interactively when a user clicked on a checkbox.

Example: tempDropdown.disabled = true;

Unfortunately, as soon as I changed the control rendering attribute to "SAP", the look&feel of dropdowns changed and they no longer appear to be based on "select-one" HTML object. Therefore, my custom JavaScript no longer works.

Do you know how I could visually (interactively) disable the "SAP" rendered HTMLB dropdown with a custom javascript?

Thanks!

Roman

[Former Member]

Hi,

Change the control rendering attribute to "abap" rather than "sap".

Azaz.

[Former Member]

Hi Azaz,

Unfortunately, I must have "SAP" as the control rendering value.

Thanks,

Roman

[athavanraja]

check out this code. this works when controlrendering is set to SAP or set to BROWSER or controlrendering is not specified at all with htmlb:content.

<script language="javascript">

  function SetDisabled(elem,disable)
  {
  var ip = document.getElementById(elem);

  ip.disabled = disable ;
  }

</script>

<htmlb:button id ="b1' text          = "disable"
                    onClientClick = "javascript:SetDisabled('DDLB2', 'true');" />
]<htmlb:button id = "B2" text          = "enable"
                    onClientClick = "javascript:SetDisabled('DDLB2', 'false');" />

DDLB2 is the ID of <htmlb:dropdownListBox

Regards

Raja

[athavanraja]

Hi Roman Dubov

Did you try my code.

Regards

Raja

[Former Member]

Hi Raja,

Yes, I did. Unfortunately, the dropdown state was not altered by this.

I think the issue is that when control-rendering is set to 'SAP', the dropdown is actually an <input type="text"> instead of <select>.

Still working on how to resolve this...

Thanks for your help!

Roman

[athavanraja]

as i mentioned before

"this works when controlrendering is set to SAP or set to BROWSER or controlrendering is not specified at all with htmlb:content"

dropdown is rendered as input field not as text (and it cannot be as you have to select values in that)

we are on WAS6.40 SP14. ( ihave tested the code for all the scenarios before posting).

may be check the html source of the page to see what gets rendred.

when the control rendergin is SAP the following is what gets generated in my system.

Regards

Raja

Message was edited by: Durairaj Athavan Raja

[athavanraja]

here is the complete code of my sample.

<b><u>page attribute</u></b>

tab1 TYPE TIHTTPNVP

tab1_wa TYPE IHTTPNVP

tab2 TYPE TIHTTPNVP

tab2_wa TYPE IHTTPNVP

<b><u>layout</u></b>

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2003"  controlRendering="SAP" >
  <htmlb:page title=" " >
    <htmlb:form>
      <%
  clear tab1_wa .
  refresh tab1 .
  move: 'PRI' to tab1_wa-name ,
  'Printer' to tab1_wa-value .
  append tab1_wa to tab1 .
  move: 'FAX' to tab1_wa-name ,
  'Fax' to tab1_wa-value .
  append tab1_wa to tab1 .
  move: 'EMA' to tab1_wa-name ,
  'Email' to tab1_wa-value .
  append tab1_wa to tab1 .
      %>
      <%
  clear tab2_wa .
  refresh tab2 .
  move: 'someone@yahoo.com' to tab2_wa-name ,
  'Some One' to tab2_wa-value .
  append tab2_wa to tab2 .
  move: 'MrX@yahoo.com' to tab2_wa-name ,
  'Mr X' to tab2_wa-value .
  append tab2_wa to tab2 .
  move: 'MrY@yahoo.com' to tab2_wa-name ,
  'Mr Y' to tab2_wa-value .
  append tab2_wa to tab2 .
      %>
<script language="javascript">

  function SetDisabled(elem,disable)
  {
  var ip = document.getElementById(elem);

  ip.disabled = disable ;
  }

</script>
      <htmlb:label for  = "DDLB1"
                   text = "Carrier" />
      <htmlb:dropdownListBox id                = "DDLB1"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"
                             table             = "<%= tab1 %>"
                             onClientSelect    = "javascript:dd = document.forms[0].DDLB1; alert(dd.options[dd.selectedIndex].value);"
                             width             = "150" />
      <htmlb:dropdownListBox id                = "DDLB2"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"
                             table             = "<%= tab2 %>"
                             width             = "150" />
      
      <htmlb:button text          = "Press Me"
                    onClientClick = "javascript:SetDisabled('DDLB2', 'true');" />

    </htmlb:form>
  </htmlb:page>
</htmlb:content>

try this in your system and let me know whether it works or not

Regards

Raja

[Former Member]

I think I found the solution to this.

By disabling the <span> </span> tag that encapsulates the dropdown, I was able to meet the requirement.

The <span> has a '-r' at the end, i.e.

concatenate tableViewId '_' row_number '_' column_number '-r'