[SOLVED] Keep a custom radio button selected after page refresh

[atamkaan]

I have prompts on report page. One of the prompts lets user select MSA, division, district or store using check boxes ( they have separate queries). I created a radio button to show one of these check boxes, without page refresh. In other words, user see 4 radio buttons and at each click they see either MSA list, division list, district list or store list without the whole page gets refresh. I created this using HTML code with javascript.

My question is after the user makes the selections and hit Finish button, this radio button always go to the first state, which is MSA. However, I would like to keep the last radio button selected after finish. For instance, user click division and makes selections and hit Finish. I would like the Division box appear, instead of MSA.

Attached is a view of the page for your visualization.

[CognosPaul]

Create a report expression:

'<input id="p_RadioPos" type="hidden" name="p_RadioPos" value="' + case when paramValue('RadioPos') is null then 'Division' else paramValue('RadioPos') end + '"/>'

Attach an onclick event to your radio buttons to set the value of the input to whatever you've selected. Now when the page is submitted, RadioPos will contain the selected value.

The radios should have an ID that corresponds to the values.

Then you can do something like:
document.getElementById('MyRadios'+document.getelementById('p_RadioPos').value).checked=true;

[atamkaan]

Thanks a lot, this gave me a head start, but I am struggling in attaching the onclick event to assign parameter value. Do you have a sample code for this?

[CognosPaul]

If you're building the radio button with HTML items, you can just include it in there:

<input type="radio" name="group" value="whatever" onclick="document.getElementById('andsoon')"/>

[atamkaan]

Thanks Paul, after long hours of trial and error, I couldn't get it done due to my limited skills in javascripting.

Attached is a sample xml using go sales ( query) package of what I am trying to do. Maybe you can help me here.

[CognosPaul]

Unfortunately at this client I can't upload any files, so the report is sitting inside a code quote:

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/8.0/" expressionLocale="en-us" interactivePageBreakByFrame="true" useStyleVersion="10">
<modelPath>/content/folder[@name='Samples']/folder[@name='Models']/package[@name='GO Sales (query)']/model[@name='model']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>

<layouts>
<layout>
<reportPages>
<page name="Page1"><style><defaultStyles><defaultStyle refStyle="pg"/></defaultStyles></style>
<pageBody><style><defaultStyles><defaultStyle refStyle="pb"/></defaultStyles><CSS value="text-align:center"/></style>
<contents>

<table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse;width:100%"/></style><tableRows><tableRow><tableCells><tableCell><contents><textBox parameter="selectedRadio" name="_selectedRadio" required="false"/><HTMLItem>
<dataSource>
<staticValue>&lt;script&gt;

var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined)
   { fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
 

function getSelected(){
  var parm =   fW._textEditBox_selectedRadio.value;
  if(!parm) return false;

  document.getElementById('List1').style.display="none";
  document.getElementById('List2').style.display="none";
  document.getElementById('List3').style.display="none";
  document.getElementById('List4').style.display="none";
  document.getElementById(parm).style.display="block";

  document.getElementById('r1' + parm).checked=true;
}

getSelected();

function showElm(a){
  document.getElementById('List1').style.display="none";
  document.getElementById('List2').style.display="none";
  document.getElementById('List3').style.display="none";
  document.getElementById('List4').style.display="none";
  document.getElementById(a).style.display="block";
  fW._textEditBox_selectedRadio.value=a;
}


function clearAll()
{
// For each prompt, use a different span and execute similar code...
var theSpan = document.getElementById("A1");
var a = theSpan.getElementsByTagName("A");
for( var i = a.length-1; i &gt;= 0; i-- )
{
var link = a[i];
//for deselect all, use 1, for select all, use 0
if(i==1) link.click();
}
theSpan = document.getElementById("A2");
a = theSpan.getElementsByTagName("A");
for( var i = a.length-1; i &gt;= 0; i-- )
{
var link = a[i];
//for deselect all, use 1, for select all, use 0
if(i==1) link.click();
}
theSpan = document.getElementById("A3");
a = theSpan.getElementsByTagName("A");
for( var i = a.length-1; i &gt;= 0; i-- )
{
var link = a[i];
//for deselect all, use 1, for select all, use 0
if(i==1) link.click();
}
theSpan = document.getElementById("A4");
a = theSpan.getElementsByTagName("A");
for( var i = a.length-1; i &gt;= 0; i-- )
{
var link = a[i];
//for deselect all, use 1, for select all, use 0
if(i==1) link.click();
}

}

&lt;/script&gt;

&lt;span style="font-size:11px;"&gt;

&lt;input type=radio id="r1List1" name="r1" value ="ShowList1" onclick="showElm('List1');clearAll()" checked&gt;&lt;b&gt;State&lt;/b&gt;
&lt;input type=radio id="r1List2" name="r1" value ="ShowList2" onclick="showElm('List2');clearAll()"&gt;&lt;b&gt;Region&lt;/b&gt;
&lt;input type=radio id="r1List3" name="r1" value ="ShowList3" onclick="showElm('List3');clearAll()"&gt;&lt;b&gt;Country&lt;/b&gt;
&lt;input type=radio id="r1List4" name="r1" value ="ShowList4" onclick="showElm('List4');clearAll()"&gt;&lt;b&gt;Store&lt;/b&gt;
</staticValue>
</dataSource>
</HTMLItem></contents></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents><HTMLItem>
<dataSource>
<staticValue>&lt;div id="List1" style="display:block;"&gt;

&lt;span id = "A1"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue multiSelect="true" required="false" selectValueUI="checkboxGroup" parameter="State"><style><CSS value="height:150px"/></style><selectOptions><selectOption useValue="d"/><selectOption useValue="e"/><selectOption useValue="f"/></selectOptions></selectValue><HTMLItem>
<dataSource>
<staticValue>&lt;/span&gt;
&lt;/div&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem>
<dataSource>
<staticValue>&lt;div id="List2" style="display:none;"&gt;


&lt;span id = "A2"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue multiSelect="true" required="false" selectValueUI="checkboxGroup" parameter="Region"><style><CSS value="height:150px"/></style><selectOptions><selectOption useValue="c"/><selectOption useValue="d"/><selectOption useValue="e"/></selectOptions></selectValue><HTMLItem>
<dataSource>
<staticValue>&lt;/span&gt;
&lt;/div&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem>
<dataSource>
<staticValue>&lt;div id="List3" style="display:none;"&gt;


&lt;span id = "A3"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue multiSelect="true" required="false" selectValueUI="checkboxGroup" parameter="Country"><style><CSS value="height:150px"/></style><selectOptions><selectOption useValue="b"/><selectOption useValue="c"/><selectOption useValue="d"/></selectOptions></selectValue><HTMLItem>
<dataSource>
<staticValue>&lt;/span&gt;
&lt;/div&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem>
<dataSource>
<staticValue>&lt;div id="List4" style="display:none;"&gt;

&lt;span id = "A4"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue multiSelect="true" parameter="Store" required="false" selectValueUI="checkboxGroup"><style><CSS value="height:150px"/></style><selectOptions><selectOption useValue="a"/><selectOption useValue="b"/><selectOption useValue="c"/></selectOptions></selectValue><HTMLItem>
<dataSource>
<staticValue>&lt;/span&gt;
&lt;/div&gt;</staticValue>
</dataSource>
</HTMLItem></contents><style><CSS value="padding:5px;text-align:center"/></style></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents><promptButton type="finish">
<contents><textItem><dataSource><staticValue>Finish</staticValue></dataSource><style><CSS value="font-weight:bold"/></style></textItem></contents>
<style>
<defaultStyles>
<defaultStyle refStyle="bp"/>
</defaultStyles>
<CSS value="background-color:silver;font-weight:bold"/></style>
</promptButton></contents><style><CSS value="font-weight:bold;text-align:center;padding-top:5px"/></style></tableCell></tableCells></tableRow></tableRows></table></contents>
</pageBody>


</page>
</reportPages>
<pageSetup orientation="landscape"/></layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" output="no" value="true"/><XMLAttribute name="listSeparator" output="no" value=","/><XMLAttribute name="RS_modelModificationTime" output="no" value="2010-06-22T19:30:18.260Z"/></XMLAttributes><reportName>ElancerCaseReport</reportName></report>

So the changes I made were fairly minor. First, I dragged in a textbox prompt to the left of the HTML item. That will store the parameter of the currently selected list. Second, I gave each of the radio buttons an ID r1List1, r1List2, etc. so they are easy to select with JS.  When clicking on a radio, it will pass the param to the text box. When the report reloads, a function will trigger that will get the value from the textbox, and set the page accordingly.

[atamkaan]

Paul, thanks a lot. This is a brilliant technique that I wasn't aware. I hope this helps others as well. Really appreciate it.