Cognos 11.0.11 - Javascript show/hide date prompt

Question

I obtained the below javascript from a website a while back which shows and hides a date prompt based on the selections from a radio button value prompt.

<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
var list_box = new Array();

/****Identify Radio Buttons and load them into an array****/
var radio_buttons = new Array();
j=0;

for(i=0;i<inputs.length;i++)
{
if(inputs[i].type=='radio')
  {
    radio_buttons[j] = inputs[i];
    j++;
  }   
}

/****Set the onclick event of each radio button option to trigger our custom function****/
radio_buttons[0].setAttribute("onclick",function(){ToggleDate();});
radio_buttons[1].setAttribute("onclick",function(){ToggleDate();});
radio_buttons[2].setAttribute("onclick",function(){ToggleDate();});


/****Create a handle for date prompt****/
var prompt = document.getElementById("date_prompts").childNodes[0];

function ToggleDate()
{
if(radio_buttons[0].checked)
  {
  /**** First options (in our case "Custom") is selected.**** 
   **** Date Prompt will be Shown or Enabled.            ****/

  document.getElementById("date_prompts").style.display = '';  //show
  // prompt.disabled = '';   //enable

  canSubmitPrompt();
  }
else
  {
  /**** Second options (in our case "Yesterday") is selected.****
   **** Date Prompt will be Hidden or Disabled.              ****/

  document.getElementById("date_prompts").style.display = 'none';   //hide
  //prompt.disabled = 'true';   //disable

  canSubmitPrompt();
  }
}
</script>

Whilst we have been using Cognos 10.2.2 this code worked fine (in conjunction with a couple of other html items spanning the date prompt). We're now in the process of upgrading to Cognos 11.0.11, whilst I've been testing the reports in the new environment I've found that this code no longer works and the date prompt is shown irrespective of what choices are selected with the radio buttons.

Please can someone give me some pointers as to what might be going on here or better yet tell me how to resolve the issue.

When creating a new report in Cognos 11 and adding the elements individually the following error message occurs...

HTML report output is not well formed. If your report uses "HTML Item" elements ensure that they result in well-formed HTML.

Reason: A name contained an invalid character.

URL: Line:274 Character:24 Source: for(i=0;i

Johnsonium Johnsonium · Accepted Answer · 2018-06-07T17:37:57

Cognos released a JavaScript API with Cognos 10.2 that vastly simplifies what you are doing here. Additionally, it's guaranteed to be supported between versions.

Here's the same functionality written against the Cognos JavaScript API:

Assumptions:

There is a single Cognos Select prompt configured as a radio button group that has the Name property 'radio_buttons' giving a choice of three separate values (1, 2, and 3)
There is a date prompt wrapped in a span with id attribute 'date_prompts' that should be shown when the first radio button is selected but not shown if the other two are selected

Code

var report = cognos.Report.getReport('_THIS_'); //Get report reference
var radioprompt = report.prompt.getControlByName('radio_buttons'); //Get prompt reference
var datespan = document.getElementById('date_prompts'); //Get span to hide/unhide

radioprompt.setValidator(validateRadio); //Assign a validation function

function validateRadio(values) {
     var result = true;
     if (values && values.length > 0) { //Make sure prompt has value
          if (values[0].use == '1') {  //Check if first radio button selected
               datespan.style.display = ''; //Show
          } else {
               datespan.style.display = 'none'; //Hide
          }
     }    
     return result; //Return result to Cognos. Always true in this case.
}

You can find more information on the Cognos JavaScript API here: Cognos 11 JavaScript API Documentation

Cognos 11.0.11 - Javascript show/hide date prompt

2 Answers