I've set up a radio broadcast server using xml and xslt.
I display the current song playing, but of course, that changed every minute, so I'd like that the <div> refreshes every second to make sure the displayed data is up-to-date.
I've written a JQuery function, but that does not work.
Also, i've written following test function to test if jquery works, and it doesn't.
Could it be that jquery does not work in an XST page??
Test function:
$(document).ready(function () {
$("a").click(function () {
alert("test");
});
});
The alert is not displayed when I click on a hyperlink...
This is my current code:
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" >
<xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" />
<xsl:template match = "/icestats" >
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
$(document).ready(function () {
setInterval(function () {
$(".newscontent").load("status.xsl");
}, 1000);
});
</script>
<script type="text/JavaScript">
window.onload = startTime;
function startTime()
{
var date = new Date();
var uur = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9)
{
min = "0" + min;
}
if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9)
{
sec = "0" + sec;
}
var movingtime = uur + ":" + min + ":" + sec;
document.getElementById('clock').innerHTML = movingtime;
setTimeout('startTime()',500);
}
</script>
<title>Muziekserver</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<h2>Overzicht</h2>
<br />
<!--index header menu -->
<div class="roundcont">
<div class="roundtop">
<img src="/corner_topleft.jpg" class="corner" style="display: none" />
</div>
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4">
<tr>
<td bgcolor="#656565">
<a class="nav" href="admin/">Administratie</a>
<a class="nav" href="status.xsl">Overzicht van muziek</a></td>
</tr>
</table>
<div class="roundbottom">
<img src="/corner_bottomleft.jpg" class="corner" style="display: none" />
</div>
</div>
<br />
<br />
<!--end index header menu -->
<!--mount point stats-->
<xsl:for-each select="source">
<xsl:choose>
<xsl:when test="listeners">
<div class="roundcont">
<div class="roundtop">
<img src="/corner_topleft.jpg" class="corner" style="display: none" />
</div>
<div class="newscontent">
<div class="streamheader">
<table cellspacing="0" cellpadding="0">
<colgroup align="left" />
<colgroup align="right" width="300" />
<tr>
<td><h3>Naam: <xsl:value-of select="#mount" /></h3></td>
<xsl:choose>
<xsl:when test="authenticator">
<td align="right"><a class="auth" href="/auth.xsl">Login</a></td>
</xsl:when>
<xsl:otherwise>
<td align="right"> Speel af als M3U of als XSPF</td>
</xsl:otherwise>
</xsl:choose>
</tr></table>
</div>
<table border="0" cellpadding="4" id="info">
<xsl:if test="server_name">
<tr><td>Naam</td><td class="streamdata"> <xsl:value-of select="server_name" /></td></tr>
</xsl:if>
<xsl:if test="server_description">
<tr><td>Beschrijving</td><td class="streamdata"> <xsl:value-of select="server_description" /></td></tr>
</xsl:if>
<xsl:if test="genre">
<tr><td>Genre</td><td class="streamdata"> <xsl:value-of select="genre" /></td></tr>
</xsl:if>
<xsl:if test="bitrate">
<tr><td>Bitrate</td><td class="streamdata"> <xsl:value-of select="bitrate" /> kbps</td></tr>
</xsl:if>
<xsl:if test="quality">
<tr><td>Quality:</td><td class="streamdata"> <xsl:value-of select="quality" /></td></tr>
</xsl:if>
<xsl:if test="video_quality">
<tr><td>Video Quality:</td><td class="streamdata"> <xsl:value-of select="video_quality" /></td></tr>
</xsl:if>
<xsl:if test="frame_size">
<tr><td>Framesize:</td><td class="streamdata"> <xsl:value-of select="frame_size" /></td></tr>
</xsl:if>
<xsl:if test="frame_rate">
<tr><td>Framerate:</td><td class="streamdata"> <xsl:value-of select="frame_rate" /></td></tr>
</xsl:if>
<xsl:if test="server_url">
<tr><td>URL</td><td class="streamdata"> <a target="_blank" href="{server_url}"><xsl:value-of select="server_url" /></a></td></tr>
</xsl:if>
<tr><td>Nu bezig</td><td class="streamdataArtist">
<xsl:if test="artist"><xsl:value-of select="artist" /> - </xsl:if><xsl:value-of select="title" /></td></tr>
</table>
</div>
<div class="roundbottom">
<img src="/corner_bottomleft.jpg" class="corner" style="display: none" />
</div>
</div>
<br />
<br />
</xsl:when>
<xsl:otherwise>
<h3><xsl:value-of select="#mount" /> - Not Connected</h3>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:text disable-output-escaping="yes">&</xsl:text>nbsp;
</body>
</html>
</xsl:template>
</xsl:stylesheet>
You need to include a reference to the jQuery library in the <head> of the document.
Example:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" />
...
</head>
While troubleshooting Javascript issues, it may be useful to install Firebug (for Firefox) or use the Developer Tools for Chrome. Each contains a console that will report Javascript errors. In your case, you will see an error like:
'$ is not defined'
which means that jQuery is not working.
UPDATE
In response to your updated code, please note that the following is incorrect:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
$(document).ready(function () {
setInterval(function () {
$(".newscontent").load("status.xsl");
}, 1000);
});
</script>
It should be:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" />
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
$(".newscontent").load("status.xsl");
}, 1000);
});
</script>
The first <script> element gets its body from the URL in the src attribute. A second <script> element must be created the Javascript specific to your page.
It looks like you forgot to include the jQuery library.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
setInterval() is what you need.
Also, think about using the jQuery ready method instead of onLoad as well as put a reference to the jQuery tag about the script tag you have the code in.
Related
I had finished filtering Series dropdown with the application dropdown. What I want now is to filter the results of the first filtering using the case size dropdown.
Here is the code of the dropdown:
<select name="series" onchange="changeCalc()" id="idCalcSelect" class="CalcSelect">
<option selected="1" style="display:none;">Series</option>
<xsl:for-each select="//calc">
<xsl:sort select="#series" order="ascending" data-type="text"/>
<option>
<xsl:choose>
<xsl:when test="#series[contains(substring(.,13,2),'A')]">
<xsl:attribute name="app">Automotive</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="app">Commercial</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:attribute name="style">display: normal;</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="#calc-id"/></xsl:attribute>
<xsl:attribute name="caseSize"><xsl:value-of select="substring(#series,1,9)"/></xsl:attribute>
<xsl:variable name="series" select="#series"/>
<xsl:value-of select="substring($series,10,5)"/>
</option>
</xsl:for-each>
<option id="noSeries" style="display: none;">NO SERIES AVAILABLE</option>
</select>
What should I add with my script, see my code below:
var selectedApp = "Automotive";
jq("#selectApp").on("change", function() {
selectedApp = jq(this).find('option:selected').text();
jq("select[name='series'] > option").each(function() {
var attrApp = jq(this).attr("app");
if (selectedApp == attrApp) {
this.show();
} else {
this.hide();
}
});
});
var selectedCS;
jq("#selectCaseSize").on("change", function() {
selectedCS = jq(this).find('option:selected').text();
jq("select[name='series'] > option").each(function() {
var attrCS = jq(this).attr("caseSize");
if (selectedCS == attrCS) {
this.show();
} else {
this.hide();
}
});
});
So what I want here is to filter the results of the first filtering. Whether if you use the case size dropdown first or the application dropdown first.
EDIT: I need to filter them using the attributes.
Hello the below code is making my page loading speed very slow. Can you help please!
<xsl:template match="Category" mode="CategorySelectorScript">
<xsl:variable name="ThisCategoryID" select="CategoryID"/>
<xsl:variable name="HasChildren"><xsl:choose>
<xsl:when test="../Category[ParentCategoryID=$ThisCategoryID]">
true
</xsl:when>
<xsl:otherwise>
false
</xsl:otherwise></xsl:choose>
</xsl:variable>
arrCategory=new Array(<xsl:value-of select="CategoryID"/>, <xsl:value-of select="ParentCategoryID"/>, '<xsl:value-of select="Name"/>', <xsl:value-of select="$HasChildren"/>);
arrCategories.push(arrCategory);
</xsl:template>
The problem is with this line <xsl:when test="../Category[ParentCategoryID=$ThisCategoryID]"> When i remove ../ from the XPath it loads fast but then i didn't get the working feature. So is there any alternative of ../ which works ?
Full Code
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="xsl">
<xsl:output method="xml"
omit-xml-declaration="yes"
indent="yes"
encoding="utf-8"/>
<xsl:template match="Location">
<xsl:call-template name="CategorySelectorScript"/>
<form id="frmLocationCategoryAdd" action="locationcategoriesadd.php" method="post">
<div>
<input type="hidden" id="inpAction" name="inpAction" value="SAVE"/>
<input type="hidden" id="inpLocationID" name="inpLocationID" value="{LocationID}"/>
<input type="hidden" name="inpCategoryIDs" id="inpCategoryIDs" value=""/>
</div>
<div id="categoryselects"><xsl:text> </xsl:text></div>
<div><a id="categoryselected" href="#" class="actionlink addcategory">Add this category</a></div>
<div id="categoryalreadyselected">This category has already been selected</div>
<h3 id="categoriestoadd">Categories to add</h3>
<div id="categoriesselected"><p id="nocategoriesmessage">No categories</p></div>
<div class="formcontrols">
<a class="savelink" href="#" id="savelink">
<span>Add Categories</span>
</a>
<a class="cancellink" href="#" id="cancellink">
<span>Cancel</span>
</a>
</div>
</form>
</xsl:template>
<xsl:template name="CategorySelectorScript">
<script type="text/javascript">
<xsl:value-of select="$start_html_comment" disable-output-escaping="yes"/>
$(document).ready(
function()
{
$('#cancellink').click( function() {
$('#inpAction').val('CANCEL');
$('#frmLocationCategoryAdd').submit();
}
);
$('#savelink').click( function() {
ProcessCategoryIDs();
<!-- alert($('#inpCategoryIDs').val()); -->
$('#frmLocationCategoryAdd').submit();
}
);
$('#categoryselects').append(CreateCategorySelectBox(<xsl:value-of select="/XML/RootCategoryID"/>));
$('#categoryselected').hide();
$('#categoryalreadyselected').hide();
$('#categoryselected').click( function() {
$('#categoryselected').hide();
$('#nocategoriesmessage').hide();
intThisCategoryID=0;
strCategoryHierarchy='';
$('#categoryselects').children().each( function(i) {
if (!isNaN(parseInt(this.value, 10)))
{
intThisCategoryID=parseInt(this.value, 10);
strCategoryHierarchy+=GetCategoryName(intThisCategoryID)+' <xsl:value-of select="'>'" disable-output-escaping="yes"/> ';
}
}
);
<!-- alert(intThisCategoryID); -->
<!-- remove last > -->
strCategoryHierarchy=strCategoryHierarchy.replace(/ <xsl:value-of select="'>'" disable-output-escaping="yes"/> $/i, '');
strCategoryToAdd='<xsl:value-of select="'<'" disable-output-escaping="yes"/>div id="AddedCategory_'+intThisCategoryID+'" class="addedcategory"<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
strCategoryToAdd+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>span class="addedcategoryhierarchy"<xsl:value-of select="'>'" disable-output-escaping="yes"/>'+strCategoryHierarchy+'<xsl:value-of select="'<'" disable-output-escaping="yes"/>/span<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
strCategoryToAdd+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>a id="DeleteCategory_'+intThisCategoryID+'" class="actionlink deletecategory" onclick="DeleteCategory(this)"<xsl:value-of select="'>'" disable-output-escaping="yes"/>Delete this category<xsl:value-of select="'<'" disable-output-escaping="yes"/>/a<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
strCategoryToAdd+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>/div<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
$('#categoriesselected').append(strCategoryToAdd);
return false;
}
);
}
)
function DeleteCategory(oDeleteClicked)
{
$('#AddedCategory_'+getID(oDeleteClicked.id)).remove();
if (0==$('.addedcategory').length)
$('#nocategoriesmessage').show();
}
function GetCategoryName(intCategoryID)
{
for (i=0; i<xsl:value-of select="'<'" disable-output-escaping="yes"/>arrCategories.length; i++)
{
if (arrCategories[i][0]==intCategoryID)
return arrCategories[i][2];
}
return '';
}
function SelectClicked(oSelect)
{
intCategoryID=$('#'+oSelect.id).val();
intParentCategoryID=getID(oSelect.id);
strCategoryText=$('#CategoryID_'+intParentCategoryID+'_'+intCategoryID).html();
CategoryClicked(intCategoryID, intParentCategoryID, strCategoryText);
}
function CategoryClicked(intCategoryID, intParentCategoryID, strCategoryText)
{
<!--
alert('intCategoryID: '+intCategoryID);
alert('intParentCategoryID: '+intParentCategoryID);
-->
$('#categoryselected').hide();
$('#categoryalreadyselected').hide();
<!-- some pretty gnarly stuff to get all sibling select boxes after the current one -->
var allSelects = $('#categoryselects select');
var currentIndex = allSelects.index($('#CategorySelect_'+intParentCategoryID)[0]);
var nextSiblings = allSelects.gt(currentIndex);
nextSiblings.remove();
<!-- if this isn't a leaf category, populate the next select box with its children -->
if (-1!=strCategoryText.search('>') || -1!=strCategoryText.search('<xsl:value-of select="'>'" disable-output-escaping="yes"/>')) <!-- for some reason safari sees the non-escaped > in the string -->
{
$('#categoryselects').append(CreateCategorySelectBox(intCategoryID));
$('#CategorySelect_'+intCategoryID).focus();
/* force scrolling div over to the right */
oCategorySelects=document.getElementById('categoryselects');
oCategorySelects.scrollLeft=oCategorySelects.scrollWidth-680;
}
else
{
/* check that this category isn't already in the selected categories */
var bFound=false;
$('#categoriesselected').children().each( function() {
if (getID(this.id)==intCategoryID)
bFound=true;
}
);
if (bFound)
$('#categoryalreadyselected').show();
else
$('#categoryselected').show();
}
}
function ProcessCategoryIDs()
{
arrCategoryIDs=new Array();
$('#categoriesselected').children().each( function() {
if (!isNaN(parseInt(getID(this.id), 10)))
arrCategoryIDs.push(getID(this.id));
}
);
$('#inpCategoryIDs').val(arrCategoryIDs.join());
}
<!-- generate javascript array from the categories XML: -->
var arrCategories=new Array();
<xsl:apply-templates select="/XML/Categories/Category" mode="CategorySelectorScript"/>
<!-- alert(dump(arrCategories)); -->
<!-- category select box writing stuff -->
function CreateCategorySelectBox(intCategoryID)
{
strSelectBox='<xsl:value-of select="'<'" disable-output-escaping="yes"/>select id="CategorySelect_'+intCategoryID+'" size="10" onclick="SelectClicked(this)"<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
arrCategoriesInThisCategory=GetCategoriesWithParentID(intCategoryID);
for (i=0; i<xsl:value-of select="'<'" disable-output-escaping="yes"/>arrCategoriesInThisCategory.length; i++)
{
if (true==arrCategoriesInThisCategory[i][3])
strChildMarker=' <xsl:value-of select="'>'" disable-output-escaping="yes"/>';
else
strChildMarker='';
strSelectBox+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>option id="CategoryID_'+intCategoryID+'_'+arrCategoriesInThisCategory[i][0]+'" value="'+arrCategoriesInThisCategory[i][0]+'"<xsl:value-of select="'>'" disable-output-escaping="yes"/>'+arrCategoriesInThisCategory[i][2]+strChildMarker+'<xsl:value-of select="'<'" disable-output-escaping="yes"/>/option<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
}
strSelectBox+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>/select<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
return strSelectBox;
}
function GetCategoriesWithParentID(intParentCategoryID)
{
arrResult=new Array();
for (i=0; i<xsl:value-of select="'<'" disable-output-escaping="yes"/>arrCategories.length; i++)
{
if (arrCategories[i][1]==intParentCategoryID)
arrResult.push(arrCategories[i]);
}
return arrResult;
}
// <xsl:value-of select="$end_html_comment" disable-output-escaping="yes"/>
</script>
</xsl:template>
<xsl:template match="Category" mode="CategorySelectorScript">
<xsl:variable name="ThisCategoryID" select="CategoryID"/>
<xsl:variable name="HasChildren"><xsl:choose>
<xsl:when test="../Category[ParentCategoryID=$ThisCategoryID]">
true
</xsl:when>
<xsl:otherwise>
false
</xsl:otherwise></xsl:choose>
</xsl:variable>
arrCategory=new Array(<xsl:value-of select="CategoryID"/>, <xsl:value-of select="ParentCategoryID"/>, '<xsl:value-of select="Name"/>', <xsl:value-of select="$HasChildren"/>);
arrCategories.push(arrCategory);
</xsl:template>
<!-- category filter for location searches (front and back end ) -->
<xsl:template name="CategoryFilter">
<xsl:param name="FiltersOpen">0</xsl:param>
<input type="hidden" name="inpCategoryIDs" id="inpCategoryIDs" value="0"/>
<xsl:choose>
<xsl:when test="0 = $FiltersOpen">
Filter by location categories
Remove location category filters
</xsl:when>
<xsl:otherwise>
Filter by location categories
Remove location category filters
</xsl:otherwise>
</xsl:choose>
<div id="categoryfilters">
<xsl:if test="0 = $FiltersOpen">
<xsl:attribute name="style">display:none;</xsl:attribute>
</xsl:if>
<div id="categoryselects"><xsl:text> </xsl:text></div>
<a id="categoryselected" href="#" class="actionlink addcategory">Add this category</a>
<div id="categoryalreadyselected">This category has already been selected</div>
<h3 id="categoriestoadd">Categories to filter by</h3>
<div id="categoriesselected"><p id="nocategoriesmessage">No categories</p></div>
</div> <!-- #categoryfilters -->
<script type="text/javascript">
<xsl:value-of select="$start_html_comment" disable-output-escaping="yes"/>
$(document).ready(
function()
{
$('#filterlink').click( function () {
$('#categoryfilters').slideDown();
$(this).hide();
$('#cancelfilterlink').show();
return false;
}
);
$('#cancelfilterlink').click( function() {
$('#categoryfilters').slideUp();
$('#categoryfilters select:gt(0)').remove();
$('#categoryfilters select:first option[#selected]').removeAttr('selected');
$('#categoriesselected').children().remove();
$('#categoriesselected').append('<xsl:value-of select="'<'" disable-output-escaping="yes"/>p id="nocategoriesmessage"<xsl:value-of select="'>'" disable-output-escaping="yes"/>No categories<xsl:value-of select="'<'" disable-output-escaping="yes"/>/p<xsl:value-of select="'>'" disable-output-escaping="yes"/>')
$(this).hide();
$('#filterlink').show();
return false;
}
);
if (0!=arrSelectedCategoryIDs.length)
{
$('#nocategoriesmessage').hide();
$('#categoryfilters').show();
$('#filterlink').hide();
$('#cancelfilterlink').show();
for (i=0; i<xsl:value-of select="'<'" disable-output-escaping="yes"/>arrSelectedCategoryIDs.length; i++)
{
SelectCategory(arrSelectedCategoryIDs[i]);
}
}
}
);
function SelectCategory(intCategoryID)
{
strCategoryToAdd='<xsl:value-of select="'<'" disable-output-escaping="yes"/>div id="AddedCategory_'+intCategoryID+'" class="addedcategory"<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
strCategoryToAdd+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>span class="addedcategoryhierarchy"<xsl:value-of select="'>'" disable-output-escaping="yes"/>'+CategoryHierarchyString(intCategoryID)+'<xsl:value-of select="'<'" disable-output-escaping="yes"/>/span<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
strCategoryToAdd+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>a id="DeleteCategory_'+intCategoryID+'" class="actionlink deletecategory" onclick="DeleteCategory(this)"<xsl:value-of select="'>'" disable-output-escaping="yes"/>Delete this category<xsl:value-of select="'<'" disable-output-escaping="yes"/>/a<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
strCategoryToAdd+='<xsl:value-of select="'<'" disable-output-escaping="yes"/>/div<xsl:value-of select="'>'" disable-output-escaping="yes"/>';
$('#categoriesselected').append(strCategoryToAdd);
}
function CategoryHierarchyString(intCategoryID)
{
var strTemp='';
var i=0;
for (i=0; i<xsl:value-of select="'<'" disable-output-escaping="yes"/>arrCategories.length; i++)
{
if (arrCategories[i][0]==intCategoryID)
{
if (<xsl:value-of select="/XML/RootCategoryID"/>==arrCategories[i][1])
{
return arrCategories[i][2];
}
else
{
strTemp=arrCategories[i][2];
return CategoryHierarchyString(arrCategories[i][1])+' <xsl:value-of select="'>'" disable-output-escaping="yes"/> '+strTemp;
}
}
}
}
// <xsl:value-of select="$end_html_comment" disable-output-escaping="yes"/>
</script>
</xsl:template>
</xsl:stylesheet>
PS: If anything else is need please comment i will share the requirements with you.
Thanks
You haven't shown the source XML.
If the number of Category elements is large and if they are all at the same level in the document, then you should get an improvement by defining a key:
<xsl:key name="CategoryByParentCategory" match="Category"
use="ParentCategoryID"/>
and then change your test from test="../Category[ParentCategoryID=$ThisCategoryID]" to test="key('CategoryByParentCategory', $ThisCategoryID)"
(This change isn't safe if the Category elements are nested or if you aren't searching all of them: that's why we need to see the XML)
A point about your logic: you are setting the value of the variable $HasChildren to a text node containing the string "true" or "false" surrounded by a load of whitespace, which you are then inserting into some generated Javascript. You could achieve the effect more conveniently by changing the variable declaration to
<xsl:variable name="HasChildren"
select="boolean(key('CategoryByParentCategory', $ThisCategoryID))"/>
I am trying to get a language dropdown in HTML which calls JavaScript which uses XMLT which reads an XML to have a default value of English when the page loads, can someone help?\
Please note this only runs on Internet Explorer 9 and above
The required HTML Is:
<body onload="Start();">
<h3 id="selectalanguage"></h3>
<h3 id="LanguageComboHere"></h3>
</body>
My JavaScript is
function Start()
{
LoadLanguageCombo();
LoadCustomerCombo();
GetLanguage();
}
function nvl(value1,value2)
{
if (value1 == null)
return value2;
return value1;
}
function LoadLanguageCombo()
{
var xmldoc=new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async=false;
xmldoc.load("Language.xml");
var xsldoc=new ActiveXObject("Microsoft.XMLDOM");
xsldoc.async=false;
xsldoc.load("LanguageCombo.xsl");
alert (xmldoc.transformNod(exsldoc));
LanguageComboHere.innerHTML=xmldoc.transformNode(xsldoc);
}
function GetLanguage(language)
{
alert("here");
alert(language);
var xmldoc=new ActiveXObject("Msxml2.DOMDocument.3.0");
var xsldoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
var xslt = new ActiveXObject("MSXML2.XSLTemplate");
var xslproc;
var defaultlanguage = "English";
language = nvl(language, defaultlanguage);
alert(language);
xmldoc.load("Language.xml")
xsldoc.load("getLanguage.xsl");
xslt.stylesheet = xsldoc;
xslproc = xslt.createProcessor();
xslproc.input = xmldoc;
xslproc.addParameter("elementname", "selectalanguage");
xslproc.addParameter("languagetype", language);
xslproc.transform();
selectalanguage.innerHTML = xslproc.output;
}
My XSLT is:
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
<xsl:output method="html" />
<xsl:template match="/">
<select id="selectlanguage" value="Italian" onchange="GetLanguage(selectlanguage.value);">
<xsl:for-each select="//language">
<xsl:sort select="englishtype"/>
<xsl:sort select="englishtype" />
<xsl:variable name="language" select="englishtype" />
<xsl:element name="option">
<xsl:attribute name="value">
<xsl:value-of select="$language" />
</xsl:attribute>
<xsl:value-of select="englishtype" />
</xsl:element>
</xsl:for-each>
</select>
</xsl:template>
</xsl:stylesheet>
My XML is:
<language>
<englishtype>Ukrainian</englishtype>
</language>
<language>
<englishtype>Italian</englishtype>
</language>
<language>
<englishtype>English</englishtype>
</language>
<language>
<englishtype>Arabic</englishtype>
</language>
Your XML document is missing a root element.
The following XSL will do the job.
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
<xsl:output method="html" />
<xsl:template match="/">
<select>
<xsl:for-each select="//language">
<xsl:choose>
<xsl:when test="englishtype='English'">
<option selected='true'><xsl:value-of select="englishtype"/></option>
</xsl:when>
<xsl:otherwise>
<option><xsl:value-of select="englishtype"/></option>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</select>
</xsl:template>
</xsl:stylesheet>
I'm trying to use a template that appends white space to a string.
<xsl:call-template name="append-pad">
<xsl:with-param name="padChar" select="' '" />
<xsl:with-param name="padVar" select="$value" />
<xsl:with-param name="length" select="15" />
</xsl:call-template>
<xsl:template name="append-pad">
<!-- recursive template to left justify and append -->
<!-- the value with whatever padChar is passed in -->
<xsl:param name="padChar" />
<xsl:param name="padVar" />
<xsl:param name="length" />
<xsl:choose>
<xsl:when test="string-length($padVar) < $length">
<xsl:call-template name="append-pad">
<xsl:with-param name="padChar" select="$padChar" />
<xsl:with-param name="padVar" select="concat($padVar,$padChar)" />
<xsl:with-param name="length" select="$length" />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="substring($padVar,1,$length)" />
</xsl:otherwise>
</xsl:choose>
</xsl:template>
But the length of the with space is dynamic. This is what I tried in javascript but I get an error saying 'NAME cannot begin with '' when trying to debug the xslt.
function firstName(name) {
try {
var n = name.toString;
var target = name.length - 20;
var whiteString = "";
for ( i = 0; i < target; i++) {
whiteString.concat(" ");
}
n = n + whiteString;
return n;
} catch(err) {
return " ";
}
}
How can I do this logic in xslt?
<xsl:value-of select="concat(substring(' ', string-length() +1), $firstName)"/>
If, from your JavaScript example, you always want to pad the string up to a maximum of 20 characters, then you can simply use:
<xsl:value-of select="concat(substring(' ', string-length($firstName) +1), $firstName)" />
How does this work?
First take the expression: substring(' ', string-length($firstName) +1)
This will take the string of 20 spaces, and return a string of spaces that is 20 - length of $firstName as we are using substring to only extract a portion of the string.
We then use the concat function to join the two together. We put the substring of spaces first to pad left (although we could always put them second if you wanted to pad right).
In select you have to use an expression.
To set constant values in your param do this
<xsl:with-param name="padChar"> </xsl:with-param>
<xsl:with-param name="length">15</xsl:with-param>
Got the following chunk of Html...
<div style="visibility:visible" id="stateProvinceDiv">
<div id="stateUSALabelDiv"><label for="stateUSAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSAIdSelect" name="stateUSAId">
<option>Loading...</option>
</select>
</div>
The page/content for the select is generated by javascript functions/calls...
I can fetch the page, so I get a HtmlPage instance.
I can't figure out how to fetch the select/options, given that I don't
have a "form" element in the DOM. Pointers to chnuks of code that
handle this would be appreciated.
The actual Html is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>College Textbooks: College Apparel, College Gifts & Used College Books: eFollett.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="From used college books to up-to-date college textbooks and great college gifts like your school?s latest college apparel and more, visit efollett.com."/>
<meta name="keywords" content="college textbooks, used college books, college apparel, college gifts"/>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/prototype-1.5.0.js"></script>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/Util.js"></script>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/flPrototypeHelper.js"></script>
<link rel="stylesheet" href="/wcsstore/HostedStoreFrontAssetStore/css/style1.css" type="text/css" />
</head>
<body onload="accessibleSelect();" id="global">
<!-- BEGIN COREMETRICS SUPPORT -->
<script language="javascript1.2" src="/wcsstore/HostedStoreFrontAssetStore/javascript/eluminate.js" type="text/javascript"></script>
<script language="javascript1.2" src="/wcsstore/HostedStoreFrontAssetStore/javascript/cmdatatagutils_WC.js" type="text/javascript"></script>
<script language="javascript1.2" type="text/javascript">
//<![CDATA[
cmSetProduction();
var cm_ClientID="90227440";
cmCreatePageviewTag("efollett Home Page","10051_HOME",null,null,"10051");
//]]>
</script>
<!-- END COREMETRICS -->
<div id="wrap">
<!-- start header -->
<table width="900" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="skip_to_content" align="left" valign="top">
<ul>
<li>Skip to Content</li>
</ul>
</td>
<td align="right" valign="top" id="your_account">
<ul>
<li> <strong>Serving Colleges and Universities</strong> | Online and On Campus</li>
<li> | Your Account</li>
<li> | Shopping Cart<span class="cart_total">: 0</span> | </li>
<li>Subtotal:<span class="subtotal"> $0.00</span> </li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://images.efollett.com/htmlroot/images/templates/storeLogos/411.gif" alt="efollett.com. Online. On Campus." width="272" height="168" border="0" />
<img src="http://images.efollett.com/htmlroot/images/templates/storeBanners/411.jpg" alt="" width="624" height="168" border="0" /></td>
</tr>
<tr>
<td id="top_nav">
<h2 class="invisible">Site Menu</h2>
<ul>
<li>Home</li>
<li>
| Special Offers
</li>
<li> | Contact Us</li>
<li> |Cash For Books</li>
</ul></td>
<tr>
</table>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- START CONTENT -->
<td align="left" valign="top"><!--intro table-->
<table border="0" cellspacing="5" cellpadding="0" width="899">
<tr>
<td align="left" valign="top" width="203"><img src="http://images.efollett.com/htmlroot/images/templates/endeca/global/global_merch.jpg" alt="" width="203" height="140" /></td>
<td align="left" valign="top"><h1 class="secondaryPageHeaderHomepage"><a name="content" id="thecontent"></a>
Welcome to the efollett.com network of online bookstores!</h1>
<p> efollett.com provides you with access to over 1,200 online bookstores across the United States and Canada so you can quickly locate your campus store. </p><p> Order your college textbooks, used college books and merchandise by shopping your bookstore's online website. Each bookstore selects the college apparel and other products from their store inventory and fulfills the order, so you are actually shopping at your local bookstore. We do it this way because your campus bookstore is the best source for textbooks, college gifts and merchandise specific to your campus. </p><p><strong>Please locate your college, university or school from our drop down menus below</strong></p></td>
</tr>
</table>
<div id="storefinder">
<table cellpadding="0" cellspacing="6">
<tr style="border: none;">
<td style="border: none;">
<div id="errorDiv" style="display:none;visibility:hidden;color:red;" class="text"> </div>
</td>
</tr>
<tr>
<td align="left" valign="top">
<!-- <img src="http://images.efollett.com/htmlroot/images/templates/storeLogos/us_university." width="290" border="0" /> -->
<h2 class="us">U.S. College and Universities</h2>
<br />
<div style="visibility:visible" id="stateProvinceDiv">
<div id="stateUSALabelDiv"><label for="stateUSAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSAIdSelect" name="stateUSAId">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionUSADiv">
<div id="institutionUSALabelDiv"><label for="institutionUSAIdSelect">Select Your Institution</label></div>
<select size="1" id="institutionUSAIdSelect" name="institutionUSAId">
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusUSADiv">
<div id="campusUSALabelDiv"><label for="campusUSAIdSelect">Select Your Campus</label></div>
<select size="1" id="campusUSAIdSelect" name="campusUSAId">
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programUSADiv">
<div id="programUSALabelDiv"><label for="programUSAIdSelect">Select Your Program</label></div>
<select size="1" id="programUSAIdSelect" name="programUSAId"></select>
</div>
<div id="buttonDivUS"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
<td align="left" valign="top">
<h2 class="canada">Canada Colleges and Universities </h2>
<br />
<div style="visibility:visible" id='stateProvince2Div'>
<div id='stateCALabelDiv'><label for="stateCAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateCAIdSelect" name="stateCAId">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionCADiv">
<div id="institutionCALabelDiv"><label for="institutionCAIdSelect">Select Your Institution</label></div>
<select size="1" id="institutionCAIdSelect" name="institutionCAId"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusCADiv">
<div id="campusCALabelDiv"><label for="campusCAIdSelect">Select Your Campus</label></div>
<select size="1" id="campusCAIdSelect" name="campusCAId"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programCADiv">
<div id="programCALabelDiv"><label for="programCAIdSelect">Select Your Program</label></div>
<select size="1" id="programCAIdSelect" name="programCAId"></select>
</div>
<div id="buttonDivCA"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
<td align="left" valign="top">
<h2 class="us">U.S Schools K-12 </h2>
<br />
<div style="visibility:visible" id="stateProvince3Div">
<div id="stateUSK12LabelDiv"><label for="stateUSK12IdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSK12IdSelect" name="stateUSK12Id">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionUSK12Div">
<div id="institutionUSK12LabelDiv"><label for="institutionUSK12IdSelect">Select Your Institution</div>
<select size="1" id="institutionUSK12IdSelect" name="institutionUSK12Id"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusUSK12Div">
<div id="campusUSK12LabelDiv"><label for="campusUSK12IdSelect">Select Your Campus</label></div>
<select size="1" id="campusUSK12IdSelect" name="campusUSK12Id"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programUSK12Div">
<div id="programUSK12LabelDiv"><label for="programUSK12IdSelect">Select Your Program</label></div>
<select size="1" id="programUSK12IdSelect" name="programUSK12Id"></select>
</div>
<div id="buttonDivK12"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
String.prototype.startsWith = function(s) { return this.indexOf(s)==0; }
var uri = '/webapp/wcs/stores/servlet/StoreFinderAJAX';
var servletPath = '/webapp/wcs/stores/servlet/';
var pageType = 'FLGStoreCatalogDisplay';
var catalogId = '10001';
var categoryId = 'null';
var langId = '-1';
var demoKey = 'null';
var extraParams = 'null'; // only used for User Registration page
var multiSelect = false;
var forwardURLLocation = '';
// This map is used to determine the URI used for forwarding the user
var forwardPage = Object;
forwardPage['FLGStoreCatalogDisplay'] = 'StoreCatalogDisplay';
forwardPage['FLUserSelectSchool'] = 'UserAccountUpdateDemographicsForm';
forwardPage['FLGBuybackInfoPage'] = 'AboutBuybackView';
forwardPage['FLEdoptionsDisplayGlobal'] = 'EdoptionSearchView';
forwardPage['CGSelectStoreDisplay'] = 'CustomtsSelectedStore';
forwardPage['FLLocateStoreCourseMaterials'] = 'LocateCourseMaterialsView';
forwardPage['FLGGenMerchDisplay'] = 'CategoryDisplay';
function onPageLoad() {
AjaxQueue.setBatchSize(1);
getData(buildParms('STATESUS', 'US', 'stateUSAIdSelect'));
getData(buildParms('STATESCA','CA', 'stateCAIdSelect'));
getData(buildParms('STATESK12','K12', 'stateUSK12IdSelect'));
}
accessibleSelect=function(){
var selectedStateUSIndex;
var selectedInstUSIndex;
var selectedCampusUSIndex;
var selectedProgramUSIndex;
var selectedStateCAIndex;
var selectedInstCAIndex;
var selectedCampusCAIndex;
var selectedProgramCAIndex;
var selectedStateK12Index;
var selectedInstK12Index;
var selectedCampusK12Index;
var selectedProgramK12Index;
var stateUSAIdSelectBox = document.getElementById("stateUSAIdSelect");
stateUSAIdSelectBox.onchange=function(){
callUSStateAjax();
};
stateUSAIdSelectBox.onkeyup=function(e){
callUSStateAjax();
};
function callUSStateAjax() {
if(selectedStateUSIndex != stateUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onStateUSASelect()");
selectedStateUSIndex = stateUSAIdSelectBox.selectedIndex;
selectedInstUSIndex = '';
selectedCampusUSIndex = '';
selectedProgramUSIndex = '';
}
}
var institutionUSAIdSelectBox = document.getElementById("institutionUSAIdSelect");
institutionUSAIdSelectBox.onchange=function(){
callInstUSAjax();
};
institutionUSAIdSelectBox.onkeyup=function(e){
callInstUSAjax();
};
function callInstUSAjax() {
if(selectedInstUSIndex != institutionUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteUSASelect()");
selectedInstUSIndex = institutionUSAIdSelectBox.selectedIndex;
selectedCampusUSIndex = null;
selectedProgramUSIndex = null;
}
}
var campusUSAIdSelectBox = document.getElementById("campusUSAIdSelect");
campusUSAIdSelectBox.onchange=function(){
callCampusUSAjax();
};
campusUSAIdSelectBox.onkeyup=function(e){
callCampusUSAjax();
};
function callCampusUSAjax() {
if(selectedCampusUSIndex != campusUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_USA()");
selectedCampusUSIndex == campusUSAIdSelectBox.selectedIndex;
selectedProgramUSIndex = null;
}
}
var programUSAIdSelectBox = document.getElementById("programUSAIdSelect");
programUSAIdSelectBox.onchange=function(){
callProgramUSAjax();
};
programUSAIdSelectBox.onkeyup=function(e){
callProgramUSAjax();
};
function callProgramUSAjax() {
if(selectedProgramUSIndex != programUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_USA()");
selectedProgramUSIndex = programUSAIdSelectBox.selectedIndex;
}
}
var stateCAIdSelectBox = document.getElementById("stateCAIdSelect");
stateCAIdSelectBox.onchange=function(){
callStateCAAjax();
};
stateCAIdSelectBox.onkeyup=function(e){
callStateCAAjax();
};
function callStateCAAjax() {
if(selectedStateCAIndex != stateCAIdSelectBox.selectedIndex) {
doAJAXSelect("onStateCASelect()");
selectedStateCAIndex = stateCAIdSelectBox.selectedIndex;
selectedInstCAIndex = null;
selectedCampusCAIndex = null;
selectedProgramCAIndex =null;
}
}
var institutionCAIdSelectBox = document.getElementById("institutionCAIdSelect");
institutionCAIdSelectBox.onchange=function(){
callInstCAAjax();
};
institutionCAIdSelectBox.onkeyup=function(e){
callInstCAAjax();
};
function callInstCAAjax() {
if(selectedInstCAIndex != institutionCAIdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteCASelect()");
selectedInstCAIndex = institutionCAIdSelectBox.selectedIndex;
selectedCampusCAIndex = null;
selectedProgramCAIndex = null;
}
}
var campusCAIdSelectBox = document.getElementById("campusCAIdSelect");
campusCAIdSelectBox.onchange=function(){
callCampusCAAjax();
};
campusCAIdSelectBox.onkeyup=function(e){
callCampusCAAjax();
};
function callCampusCAAjax() {
if(campusCAIdSelectBox != campusCAIdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_CA()");
selectedCampusCAIndex == campusCAIdSelectBox.selectedIndex;
selectedProgramCAIndex = null;
}
}
var programCAIdSelectBox = document.getElementById("programCAIdSelect");
programCAIdSelectBox.onchange=function(){
callProgramCAAjax();
};
programCAIdSelectBox.onkeyup=function(e){
callProgramCAAjax();
};
function callProgramCAAjax() {
if(selectedProgramCAIndex != programCAIdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_CA()");
selectedProgramCAIndex = programCAIdSelectBox.selectedIndex;
}
}
var stateUSK12IdSelectBox = document.getElementById("stateUSK12IdSelect");
stateUSK12IdSelectBox.onchange=function(){
callStateK12Ajax();
};
stateUSK12IdSelectBox.onkeyup=function(e){
callStateK12Ajax();
};
function callStateK12Ajax() {
if(selectedStateK12Index != stateUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onStateUSK12Select()");
selectedStateK12Index = stateUSK12IdSelectBox.selectedIndex;
selectedInstK12Index = null;
selectedCampusK12Index = null;
selectedProgramK12Index = null;
}
}
var institutionUSK12IdSelectBox = document.getElementById("institutionUSK12IdSelect");
institutionUSK12IdSelectBox.onchange=function(){
callInstK12Ajax();
};
institutionUSK12IdSelectBox.onkeyup=function(e){
callInstK12Ajax();
};
function callInstK12Ajax() {
if(selectedInstK12Index != institutionUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteUSK12Select()");
selectedInstK12Index = institutionUSK12IdSelectBox.selectedIndex;
selectedCampusK12Index = null;
selectedProgramK12Index = null;
}
}
var campusUSK12IdSelectBox = document.getElementById("campusUSK12IdSelect");
campusUSK12IdSelectBox.onchange=function(){
callCampusK12Ajax();
};
campusUSK12IdSelectBox.onkeyup=function(e){
callCampusK12Ajax();
};
function callCampusK12Ajax() {
if(selectedCampusK12Index != campusUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_USK12()");
selectedCampusK12Index == campusUSK12IdSelectBox.selectedIndex;
selectedProgramK12Index = null;
}
}
var programUSK12IdSelectBox = document.getElementById("programUSK12IdSelect");
programUSK12IdSelectBox.onchange=function(){
callProgramK12Ajax();
};
programUSK12IdSelectBox.onkeyup=function(e){
callProgramK12Ajax();
};
function callProgramK12Ajax() {
if(selectedProgramK12Index != programUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_USK12()");
selectedProgramK12Index = programUSK12IdSelectBox.selectedIndex;
}
}
}
// Start state
function onStateUSASelect() {
hideLayer("errorDiv");hideLayer("programUSADiv");hideLayer("campusUSADiv");showLayer("institutionUSADiv");addLoadingOption("institutionUSA");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateCAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('stateUSAIdSelect').value == '') {clearAJAXTimer();hideLayer("institutionUSADiv"); return; }
getData(buildParms('INSTITUTESUS', 'US', 'stateProvinceId='+$('stateUSAIdSelect').value)) ;
}
function onStateCASelect() {
hideLayer("errorDiv");hideLayer("programCADiv");hideLayer("campusCADiv");showLayer("institutionCADiv");addLoadingOption("institutionCA");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateUSAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('stateCAIdSelect').value == '') {clearAJAXTimer();hideLayer("institutionCADiv"); return; }
getData(buildParms('INSTITUTESCA', 'CA', 'stateProvinceId='+$('stateCAIdSelect').value)) ;
}
function onStateUSK12Select() {
hideLayer("errorDiv");hideLayer("programUSK12Div");hideLayer("campusUSK12Div");showLayer("institutionUSK12Div");addLoadingOption("institutionUSK12");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateUSAIdSelect");
selectFirst("stateCAIdSelect");
if($('stateUSK12IdSelect').value == '') {clearAJAXTimer();hideLayer("institutionUSK12Div"); return; }
getData(buildParms('INSTITUTESK12', 'K12', 'stateProvinceId='+$('stateUSK12IdSelect').value)) ;
}
//End State
//Start Institute
function onInstituteUSASelect() {
hideLayer("errorDiv"); hideLayer("programUSADiv");hideLayer('campusUSADiv');hideLayer('buttonDivUS');
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
selectFirst("stateCAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('institutionUSAIdSelect').value == '') {clearAJAXTimer();hideLayer("campusUSADiv"); return; }
getData(buildParms('CAMPUSUS','US', 'institutionId='+$('institutionUSAIdSelect').value));
}
function onInstituteCASelect() {
hideLayer("errorDiv");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
selectFirst("stateUSAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('institutionCAIdSelect').value == '') {clearAJAXTimer();hideLayer("campusCADiv"); return; }
getData(buildParms('CAMPUSCA','CA','institutionId='+$('institutionCAIdSelect').value));
}
function onInstituteUSK12Select() {
hideLayer("errorDiv");hideLayer("programUSADiv");hideLayer('campusK12Div');hideLayer('buttonDivK12');
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
selectFirst("stateUSAIdSelect");
selectFirst("stateCAIdSelect");
if($('institutionUSK12IdSelect').value == '') {clearAJAXTimer();hideLayer("campusUSK12Div"); return; }
getData(buildParms('CAMPUSK12','K12','institutionId='+$('institutionUSK12IdSelect').value));
}
// End of Institutions
// Start Campus
function onCampusSelect_USA() {
if($('campusUSAIdSelect').value == ''){clearAJAXTimer();hideLayer("programUSADiv"); hideLayer("errorDiv"); hideLayer("buttonDivUS"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSUS','US','campusId='+$('campusUSAIdSelect').value + "&institutionId=" + $('institutionUSAIdSelect').value));
}
function onCampusSelect_CA() {
if($('campusCAIdSelect').value == ''){clearAJAXTimer();hideLayer("programCADiv"); hideLayer("errorDiv"); hideLayer("buttonDivCA"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSCA','CA', 'campusId='+$('campusCAIdSelect').value + "&institutionId=" + $('institutionCAIdSelect').value));
}
function onCampusSelect_USK12() {
if($('campusUSK12IdSelect').value == ''){clearAJAXTimer();hideLayer("programUSK12Div"); hideLayer("errorDiv"); hideLayer("buttonDivK12"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSK12','K12', 'campusId='+$('campusUSK12IdSelect').value + "&institutionId=" + $('institutionUSK12IdSelect').value));
}
// End of Campus
// Program Select
function onProgramSelect_USA() {
if($('programUSAIdSelect').value == ''){clearAJAXTimer();hideLayer("buttonDivUS"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programUSAIdSelect").value, null, 'buttonDivUS');
}
function onProgramSelect_CA() {
if($('programCAIdSelect').value == ''){clearAJAXTimer(); hideLayer("buttonDivCA"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programCAIdSelect").value, null,'buttonDivCA');
}
function onProgramSelect_USK12() {
if($('programUSK12IdSelect').value == ''){clearAJAXTimer();hideLayer("buttonDivK12"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programUSK12IdSelect").value, null, 'buttonDivK12');
}
// End of Program Select.
// Loading Drop downs starts
function loadSTATESUS(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateUSA", data, meta, "stateUSAIdSelect");
}
function loadSTATESCA(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateCA", data, meta, "stateCAIdSelect");
}
function loadSTATESK12(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateUSK12", data, meta, "stateUSK12IdSelect");
}
function loadINSTITUTESUS(data, meta) {
You can grab the select with prototype and the id of the select.
$('stateUSAIdSelect');
Or the options with a css rule
$$('#stateUSAIdSelect option');
What are you actually trying to do with them?
UPDATE:
Sorry, I misunderstood the question I think. You're trying to figure out how to test those elements with htmlunit?
To get the select you can use getHtmlElementById
page.getHtmlElementById("stateUSAIdSelect");
From there you can call getChildNodes to grab all the options from the select.
The javadoc for htmlunit outlines a whole bunch of other methods you should be able to use as well http://htmlunit.sourceforge.net/apidocs/index.html.
Hope that helps.