B
Brie
I'm trying to do a sort on our intranets portal. I'm not sure if
anyone has experience with this, but it uses javascript. I pulls a
selection list and has a sort menu on the left and then displays the
results on the left. I'm trying to sort through three selection lists.
Is there a way to set this up so it goes through all three selection
lists using javascript? I've put my code below.
Thanks,
Brie
<html>
<head>
<title><pcs:value expr="encode(folder.name)"></pcs:value></title>
<script>
function open_article<pcs:value expr="pcs_id"></pcs:value>(url) {
newWindow = window.open(url, 'article_pop_<pcs:value
expr="list.pcs_id"></pcs:value>',
'toolbar=no,location=no,scrollbars=yes,resizable=yes,width=500,height=350');
newWindow.focus();
}
var strOnColor = "#FFFFFF"; // menu hover color
var strOffColor = "#E9E9E9"; // menu default color
var strSelColor = "#9E9E9E"; // menu selected color
var strOnFontColor = "#000000"; // menu font hover color
var strOffFontColor = "#000000"; // menu font default color
var strSelFontColor = "#000000"; // menu font selected color
//PLEASE NOTE: YOU WILL HAVE TO SET THIS ACCORDING TO A <contentid>
(SEE BELOW)
var itmCurrent = "listall"; // default item selected
// highlights menu selections on left table
function menuHighlight(tdMenu, strColor, strFont) {
document.getElementById(tdMenu).bgColor = strColor;
document.getElementById(tdMenu).style.color = strFont;
}
// shows appropriate content on right div
function contentShow(divShow, divContent) {
document.getElementById(divShow).innerHTML =
document.getElementById(divContent).innerHTML;
}
// handles hovering based on if strOn is "on" or "off"
function menuHover(mnuObj, itmHover, strOn) {
if (strOn == "on") {
menuHighlight("td"+itmHover, strOnColor, strOnFontColor);
mnuObj.style.cursor='hand';
//contentShow("divShow", "div"+itmHover);
} else {
if (itmHover == itmCurrent) {
menuHighlight("td"+itmHover, strSelColor, strSelFontColor);
} else {
menuHighlight("td"+itmHover, strOffColor, strOffFontColor);
}
mnuObj.style.cursor='pointer';
//contentShow("divShow", "div"+itmCurrent);
}
}
// unselects old item and then selects new menu item
function menuSelect(itmSelect) {
menuHighlight("td"+itmCurrent, strOffColor, strOffFontColor);
itmCurrent = itmSelect;
menuHighlight("td"+itmSelect, strSelColor, strSelFontColor);
contentShow("divShow", "div"+itmSelect);
}
</script>
<pt:styleSheets xmlnst='http://www.plumtree.com/xmlschemas/ptui/'/>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="200px" valign="top">
<!-- left nav banner -->
<table width="125px" border="0" cellpadding="0" cellspacing="2"
bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td height="20" bgcolor="#BDDDFB"><strong>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"
color="#000000"> Sort by City:</font></strong></td>
</tr>
<!-- left nav menu -->
<tr>
<td id="tdlistall" height="18" bgcolor="#E9E9E9"" height="18"
bgcolor="#E9E9E9"
onClick="menuSelect('listall');"
onMouseOver="menuHover(this, 'listall', 'on');"
onMouseOut="menuHover(this, 'listall',
'off');"><strong>
Full Listing</strong></td>
</tr>
<pcs:foreach var="city" listexpr="CityList">
<tr>
<td id="td<pcs:value expr="city_position"></pcs:value>"
height="18" bgcolor="#E9E9E9"" height="18" bgcolor="#E9E9E9"
onClick="menuSelect('<pcs:value
expr="city_position"></pcs:value>');"
onMouseOver="menuHover(this, '<pcs:value
expr="city_position"></pcs:value>', 'on');"
onMouseOut="menuHover(this, '<pcs:value
expr="city_position"></pcs:value>', 'off');"><strong>
<pcs:value expr="city"></pcs:value></strong>
[<pcs:value expr=" filter(items, 'filtered.city==city
∧filtered.published ∧
!filtered.hidden').length"></pcs:value>]</td>
</tr>
</pcs:foreach>
</table>
</td>
<td width="100%" valign="top">
<!-- right content -->
<div id="divShow" style="margin: 2px"></div>
<!-- source code list -->
<!-- PLEASE NOTE: FIGURE OUT A WAY TO GIVE A UNIQUE ID NAME FOR THE DIV
HERE PER city
<contentid> SHOULD MATCH <menuid> (SEE BELOW)
YOU SHOULD HAVE 1 DIV HERE PER city -->
<div id="divlistall" style="margin:2px; visibility:hidden;
height:1px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="banHeaderBg">
<td height="20" bgcolor="#BDDDFB">
<div align="center"><strong> <font color="#000000"
size="2" face="Verdana, Arial, Helvetica, sans-serif">Training
Presentations </font></strong></div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="10"
bgcolor="#FFFFFF">
<!-- <tr bgcolor="#FFFFFF">
<td height="18" colspan="4" class="listSubtitle">
<div align="center"><font color="#000000"><strong>Full
Listing (in alphabetical order)</strong></font></div></td>
</tr>-->
<tr>
<td width="100%" valign="top">
<div style="margin:0px; height:100%; width:100%;
overflow:auto;">
<table width="100%" border="1" cellpadding="2"
cellspacing="0" bordercolor="#BDDDFB">
<tr bgcolor="#CCCCCC">
<td height="18">
<div align="center"><strong> <font size="1"
color="#000000" face="Verdana, Arial, Helvetica, sans-serif">Name
of Training</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Type</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Level</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Date</font></strong></div></td>
</tr>
<pcs:foreach var="item" expr="filter(sort(items, 'item.Name',true),
'filtered.published ∧ !filtered.hidden')">
<tr bgcolor="#FFFFFF">
<td width="25%" height="30" class="listSubtitle">
<a href="#" onClick="open_article<pcs:value
expr="pcs_id"></pcs:value>('<pcs:value
expr='item.location'></pcs:value>'); return false;"><pcs:value
expr="encode(item.Name)"></pcs:value></a><br>
<span class="listText"><pcs:value
expr="encode(item.abstract)"></pcs:value></span>
</td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.type)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.level)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value expr="item.date"
format="MMMM d, yyyy"></pcs:value></div></td>
</tr>
</pcs:foreach>
</table>
</div>
</td>
</tr>
</table>
</div>
<pcs:foreach var="city" listexpr="CityList">
<div id="div<pcs:value expr="city_position"></pcs:value>"
style="margin:2px; visibility:hidden; height:1px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="banHeaderBg">
<td height="20" bgcolor="#BDDDFB">
<div align="center"><strong> <font color="#000000"
size="2" face="Verdana, Arial, Helvetica, sans-serif">Training
Presentations</font></strong></div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="10"
bgcolor="#FFFFFF">
<!-- <tr bgcolor="#FFFFFF">
<td height="18" colspan="4" class="listSubtitle">
<div align="center"><font
color="#000000"><strong><pcs:value
expr="city"></pcs:value></strong></font></div></td>
</tr>-->
<tr>
<td width="100%" valign="top">
<div style="margin:0px; height:100%; width:100%;
overflow:auto;">
<table width="100%" border="1" cellpadding="2"
cellspacing="0" bordercolor="#BDDDFB">
<tr bgcolor="#CCCCCC">
<td height="18">
<div align="center"><strong> <font size="1"
color="#000000" face="Verdana, Arial, Helvetica, sans-serif">Name
of Training</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Type</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Level</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Date</font></strong></div></td>
</tr>
<pcs:foreach var="item" expr="filter(sort(items, 'item.Name',true),
'filtered.published ∧ !filtered.hidden')">
<pcs:if expr="item.city==city">
<tr bgcolor="#FFFFFF">
<td width="25%" height="30" class="listSubtitle">
<a href="#" onClick="open_article<pcs:value
expr="pcs_id"></pcs:value>('<pcs:value
expr='item.location'></pcs:value>'); return false;"><pcs:value
expr="encode(item.Name)"></pcs:value></a><br>
<span class="listText"><pcs:value
expr="encode(item.abstract)"></pcs:value></span>
</td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.type)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.level)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value expr="item.date"
format="MMMM d, yyyy"></pcs:value></div></td>
</tr>
</pcs:if>
</pcs:foreach>
</table>
</div>
</td>
</tr>
</table>
</div>
</pcs:foreach>
</td>
</tr>
</table>
<script>
menuSelect(itmCurrent);
</script>
</body>
</html>
anyone has experience with this, but it uses javascript. I pulls a
selection list and has a sort menu on the left and then displays the
results on the left. I'm trying to sort through three selection lists.
Is there a way to set this up so it goes through all three selection
lists using javascript? I've put my code below.
Thanks,
Brie
<html>
<head>
<title><pcs:value expr="encode(folder.name)"></pcs:value></title>
<script>
function open_article<pcs:value expr="pcs_id"></pcs:value>(url) {
newWindow = window.open(url, 'article_pop_<pcs:value
expr="list.pcs_id"></pcs:value>',
'toolbar=no,location=no,scrollbars=yes,resizable=yes,width=500,height=350');
newWindow.focus();
}
var strOnColor = "#FFFFFF"; // menu hover color
var strOffColor = "#E9E9E9"; // menu default color
var strSelColor = "#9E9E9E"; // menu selected color
var strOnFontColor = "#000000"; // menu font hover color
var strOffFontColor = "#000000"; // menu font default color
var strSelFontColor = "#000000"; // menu font selected color
//PLEASE NOTE: YOU WILL HAVE TO SET THIS ACCORDING TO A <contentid>
(SEE BELOW)
var itmCurrent = "listall"; // default item selected
// highlights menu selections on left table
function menuHighlight(tdMenu, strColor, strFont) {
document.getElementById(tdMenu).bgColor = strColor;
document.getElementById(tdMenu).style.color = strFont;
}
// shows appropriate content on right div
function contentShow(divShow, divContent) {
document.getElementById(divShow).innerHTML =
document.getElementById(divContent).innerHTML;
}
// handles hovering based on if strOn is "on" or "off"
function menuHover(mnuObj, itmHover, strOn) {
if (strOn == "on") {
menuHighlight("td"+itmHover, strOnColor, strOnFontColor);
mnuObj.style.cursor='hand';
//contentShow("divShow", "div"+itmHover);
} else {
if (itmHover == itmCurrent) {
menuHighlight("td"+itmHover, strSelColor, strSelFontColor);
} else {
menuHighlight("td"+itmHover, strOffColor, strOffFontColor);
}
mnuObj.style.cursor='pointer';
//contentShow("divShow", "div"+itmCurrent);
}
}
// unselects old item and then selects new menu item
function menuSelect(itmSelect) {
menuHighlight("td"+itmCurrent, strOffColor, strOffFontColor);
itmCurrent = itmSelect;
menuHighlight("td"+itmSelect, strSelColor, strSelFontColor);
contentShow("divShow", "div"+itmSelect);
}
</script>
<pt:styleSheets xmlnst='http://www.plumtree.com/xmlschemas/ptui/'/>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="200px" valign="top">
<!-- left nav banner -->
<table width="125px" border="0" cellpadding="0" cellspacing="2"
bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td height="20" bgcolor="#BDDDFB"><strong>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"
color="#000000"> Sort by City:</font></strong></td>
</tr>
<!-- left nav menu -->
<tr>
<td id="tdlistall" height="18" bgcolor="#E9E9E9"" height="18"
bgcolor="#E9E9E9"
onClick="menuSelect('listall');"
onMouseOver="menuHover(this, 'listall', 'on');"
onMouseOut="menuHover(this, 'listall',
'off');"><strong>
Full Listing</strong></td>
</tr>
<pcs:foreach var="city" listexpr="CityList">
<tr>
<td id="td<pcs:value expr="city_position"></pcs:value>"
height="18" bgcolor="#E9E9E9"" height="18" bgcolor="#E9E9E9"
onClick="menuSelect('<pcs:value
expr="city_position"></pcs:value>');"
onMouseOver="menuHover(this, '<pcs:value
expr="city_position"></pcs:value>', 'on');"
onMouseOut="menuHover(this, '<pcs:value
expr="city_position"></pcs:value>', 'off');"><strong>
<pcs:value expr="city"></pcs:value></strong>
[<pcs:value expr=" filter(items, 'filtered.city==city
∧filtered.published ∧
!filtered.hidden').length"></pcs:value>]</td>
</tr>
</pcs:foreach>
</table>
</td>
<td width="100%" valign="top">
<!-- right content -->
<div id="divShow" style="margin: 2px"></div>
<!-- source code list -->
<!-- PLEASE NOTE: FIGURE OUT A WAY TO GIVE A UNIQUE ID NAME FOR THE DIV
HERE PER city
<contentid> SHOULD MATCH <menuid> (SEE BELOW)
YOU SHOULD HAVE 1 DIV HERE PER city -->
<div id="divlistall" style="margin:2px; visibility:hidden;
height:1px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="banHeaderBg">
<td height="20" bgcolor="#BDDDFB">
<div align="center"><strong> <font color="#000000"
size="2" face="Verdana, Arial, Helvetica, sans-serif">Training
Presentations </font></strong></div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="10"
bgcolor="#FFFFFF">
<!-- <tr bgcolor="#FFFFFF">
<td height="18" colspan="4" class="listSubtitle">
<div align="center"><font color="#000000"><strong>Full
Listing (in alphabetical order)</strong></font></div></td>
</tr>-->
<tr>
<td width="100%" valign="top">
<div style="margin:0px; height:100%; width:100%;
overflow:auto;">
<table width="100%" border="1" cellpadding="2"
cellspacing="0" bordercolor="#BDDDFB">
<tr bgcolor="#CCCCCC">
<td height="18">
<div align="center"><strong> <font size="1"
color="#000000" face="Verdana, Arial, Helvetica, sans-serif">Name
of Training</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Type</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Level</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Date</font></strong></div></td>
</tr>
<pcs:foreach var="item" expr="filter(sort(items, 'item.Name',true),
'filtered.published ∧ !filtered.hidden')">
<tr bgcolor="#FFFFFF">
<td width="25%" height="30" class="listSubtitle">
<a href="#" onClick="open_article<pcs:value
expr="pcs_id"></pcs:value>('<pcs:value
expr='item.location'></pcs:value>'); return false;"><pcs:value
expr="encode(item.Name)"></pcs:value></a><br>
<span class="listText"><pcs:value
expr="encode(item.abstract)"></pcs:value></span>
</td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.type)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.level)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value expr="item.date"
format="MMMM d, yyyy"></pcs:value></div></td>
</tr>
</pcs:foreach>
</table>
</div>
</td>
</tr>
</table>
</div>
<pcs:foreach var="city" listexpr="CityList">
<div id="div<pcs:value expr="city_position"></pcs:value>"
style="margin:2px; visibility:hidden; height:1px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="banHeaderBg">
<td height="20" bgcolor="#BDDDFB">
<div align="center"><strong> <font color="#000000"
size="2" face="Verdana, Arial, Helvetica, sans-serif">Training
Presentations</font></strong></div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="10"
bgcolor="#FFFFFF">
<!-- <tr bgcolor="#FFFFFF">
<td height="18" colspan="4" class="listSubtitle">
<div align="center"><font
color="#000000"><strong><pcs:value
expr="city"></pcs:value></strong></font></div></td>
</tr>-->
<tr>
<td width="100%" valign="top">
<div style="margin:0px; height:100%; width:100%;
overflow:auto;">
<table width="100%" border="1" cellpadding="2"
cellspacing="0" bordercolor="#BDDDFB">
<tr bgcolor="#CCCCCC">
<td height="18">
<div align="center"><strong> <font size="1"
color="#000000" face="Verdana, Arial, Helvetica, sans-serif">Name
of Training</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Type</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Level</font></strong></div></td>
<td class="listSubtitle">
<div align="center"><strong>
<font size="1" color="#000000" face="Verdana,
Arial, Helvetica, sans-serif">Date</font></strong></div></td>
</tr>
<pcs:foreach var="item" expr="filter(sort(items, 'item.Name',true),
'filtered.published ∧ !filtered.hidden')">
<pcs:if expr="item.city==city">
<tr bgcolor="#FFFFFF">
<td width="25%" height="30" class="listSubtitle">
<a href="#" onClick="open_article<pcs:value
expr="pcs_id"></pcs:value>('<pcs:value
expr='item.location'></pcs:value>'); return false;"><pcs:value
expr="encode(item.Name)"></pcs:value></a><br>
<span class="listText"><pcs:value
expr="encode(item.abstract)"></pcs:value></span>
</td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.type)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value
expr="encode(item.level)"></pcs:value></div></td>
<td width="25%">
<div align="center"><pcs:value expr="item.date"
format="MMMM d, yyyy"></pcs:value></div></td>
</tr>
</pcs:if>
</pcs:foreach>
</table>
</div>
</td>
</tr>
</table>
</div>
</pcs:foreach>
</td>
</tr>
</table>
<script>
menuSelect(itmCurrent);
</script>
</body>
</html>