Hi All,
I am trying to work out a multiple selection dropdown in Cognos 10 report studio.
I have added an HTML item in a blank report and inserted the following code in it:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<script>
function goToNewPage(dropdownlist)
{
var url = dropdownlist.options(dropdownlist.selectedIndex).value;
if (url != "")
{ window.open(url); }
}
</script>
</head>
<body>
<form name="dropdown">
<label>Search Engines</label>
<select name="list" accesskey="E">
<option selected>Please select one</option>
<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.google.com/">Google</option>
<select>
<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
</form>
</body>
</html>
I am able to get the dropdown, BUT when I click on Go, nothing happens. I have checked the above in OBIEE11g and it works and it also works in my local browser. Its not working in Cognos 10 Report Studio!
Any ideas/suggestions will be highly appreciated.
Thanks n Regards
Dev
It's probably an issue with the way you're referencing the element. Using the name like that won't reliably return the element. It's better to use the function getElementsByName, or use an ID and getElementByID. Also, you're putting more work than necessary in the function. Just pass the value of the select instead of passing the element reference.
<script>
function goToNewPage(url)
{
if (url != "") window.open(url);
}
</script>
</head>
<body>
<form name="dropdown">
<label>Search Engines</label>
<select name="list" id="list" accesskey="E">
<option selected>Please select one</option>
<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.google.com/">Google</option>
</select>
<input type=button value="Go" onclick="goToNewPage(document.getElementsByName('list')[0].value)">
<input type=button value="Go" onclick="goToNewPage(document.getElementsById('list').value)">
</form>
In that example the function expecting to receive the URL directly, while the two buttons provide different ways of referencing the element.
Hi Paul,
Thanks for the reply. Actually, I have the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<script type="text/javascript">
function golocation() {
var dim1 = new Array('U1','U2');
var dim2 = new Array('L1','L2');
var gotoloc = new Array();
for (d1 = 0; d1 < dim1.length; d1++) {
gotoloc[dim1[d1]] = new Array();
for (d2 = 0; d2 < dim2.length; d2++) {
gotoloc[dim1[d1]][dim2[d2]] = new Array();
}
}
gotoloc['U1']['L1'] = 'http://www.google.com';
gotoloc['U1']['L2'] = 'Cognos Report URL2';
gotoloc['U2']['L1'] = 'Cognos Report URL6';
gotoloc['U2']['L2'] = 'Cognos Report URL7';
var role = document.goloc.role.value;
var lob = document.goloc.lob.value;
window.location = gotoloc[role][lob];
}
</script>
</head>
<body>
<form name="goloc" class="inputtext" method="POST" ACTION=URI>
<select name="role">
<option value="U1">CEO</option>
<option value="U2">Product Head</option>
</select>
<select name="lob">
<option value="L1">Credit Cards</option>
<option value="L2">Auto Loan</option>
</select>
<input type="button" onClick="golocation();" value="Go">
</form>
</body>
</html>
The above code is what I was supposed to post at the first place. Apologies for not posting it initially. Well, the above is working in OBIEE11g and also in my local IE and Firefox but NOT in Cognos 10.
I also read what you have written. Could you please comment on this code instead as to why it may not be working just in Cognos 10 ?
Thanks n Regards
Dev
The reason it's not working is because Cognos reports are already sitting inside of a form. So you're nesting the goloc form inside of the formWarpRequest form. See here: http://www.w3.org/TR/xhtml1/#prohibitions
Easiest way is to get rid of the form, and reference the selects via the id.
Hi Paul,
Thanks for your reply.
I just added another form tag just above my original form tag and its working now. You were correct. It has something to do with nesting of forms tags.
So now my new code becomes:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<script type="text/javascript">
function golocation() {
var dim1 = new Array('U1','U2');
var dim2 = new Array('L1','L2');
var gotoloc = new Array();
for (d1 = 0; d1 < dim1.length; d1++) {
gotoloc[dim1[d1]] = new Array();
for (d2 = 0; d2 < dim2.length; d2++) {
gotoloc[dim1[d1]][dim2[d2]] = new Array();
}
}
gotoloc['U1']['L1'] = 'http://www.google.com';
gotoloc['U1']['L2'] = 'Cognos Report URL2';
gotoloc['U2']['L1'] = 'Cognos Report URL6';
gotoloc['U2']['L2'] = 'Cognos Report URL7';
var role = document.goloc.role.value;
var lob = document.goloc.lob.value;
window.location = gotoloc[role][lob];
}
</script>
</head>
<body>
<form method="post" action="#" id="the_form">
</form>
<form name="goloc" class="inputtext" method="POST" ACTION=URI>
<select name="role">
<option value="U1">CEO</option>
<option value="U2">Product Head</option>
</select>
<select name="lob">
<option value="L1">Credit Cards</option>
<option value="L2">Auto Loan</option>
</select>
<input type="button" onClick="golocation();" value="Go">
</form>
</body>
</html>
I have to figure out as to how to get my drop down on the top of the page.
Thanks n Regards
Dev