We Keep Coding

How to filter the filtered option tags

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.

Cross browser javascript based XSLT

I'm trying to create a cross browser XSLT code that will work with all version of IE/Edge, FireFox and Chrome.
the following code works with IE but not with firefox and chrome.
can anyone please give me a clue about what I'm doing wrong?
var XML_DOC = "../../xmlfiles/sample.xml";
var XSL_DOC = "../../xslfiles/sample.xsl";
function loadXMLDoc(){
var xmlObject;
var xmlDoc;
var xslDoc;
try //Internet Explorer
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async = false;
xmlDoc.load(XML_DOC);
xslDoc.load(XSL_DOC);
xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.async = false;
xslDoc = document.implementation.createDocument("","",null);
xslDoc.async = false;
xmlDoc.load(XML_DOC);
xslDoc.load(XSL_DOC);
xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
}
catch(e)
{
try //Google Chrome
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
}
};
xhttp.open("GET", XML_DOC, true);
xhttp.send();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xslDoc = this.responseXML;
}
};
xhttp.open("GET", XSL_DOC, true);
xhttp.send();
xmlObject = xmlDoc.transformNode(xslDoc);
}
catch(e)
{
error=e.message;
}
}
}
return xmlObject;
}
here is the sample.xml file:
<?xml version="1.0" encoding="windows-1255"?>
<menu>
<entity id="02_01_00_00_00">
<description>chapter a</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_00_00">
<description>chapter a1</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_01_00">
<description>chapter a11</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_01_01">
<description>blue</description>
<image>../images/empty.gif</image>
<imageOpen>../images/empty.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_01_0010</ref>
</entity>
</contents>
</entity>
</contents>
</entity>
</contents>
</entity>
</menu>
here is the sample.xsl file:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">
<xsl:template match="menu">
<xsl:apply-templates select="entity"/>
</xsl:template>
<xsl:template match="entity">
<div onclick="window.event.cancelBubble = true;clickedMenuEntry(this);" onselectstart="return false" ondragstart="return false">
<xsl:attribute name="id">div<xsl:value-of select="#id"/></xsl:attribute>
<xsl:attribute name="image"><xsl:value-of select="image"/></xsl:attribute>
<xsl:attribute name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:attribute>
<xsl:attribute name="ref"><xsl:value-of select="ref"/></xsl:attribute>
<xsl:attribute name="open">false</xsl:attribute>
<xsl:attribute name="selected">true</xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="description"/></xsl:attribute>
<xsl:attribute name="STYLE">
padding-right: 7px;
cursor: hand;
<xsl:if expr="depth(this) > 2">
display: none;
</xsl:if></xsl:attribute>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" >
<img border="0">
<xsl:attribute name="id">img<xsl:value-of select="#id"/></xsl:attribute>
<xsl:attribute name="SRC"><xsl:value-of select="image"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="description"/></xsl:attribute>
</img>
</td>
<td valign="middle" nowrap="true" onmouseover="this.style.fontWeight='bold';" onmouseout="this.style.fontWeight='normal';">
<xsl:attribute name="STYLE">
padding-right: 7px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #0B467A;
</xsl:attribute>
<span onclick="clickedText();">
<xsl:value-of select="description"/>
</span>
</td>
</tr>
</table>
<xsl:apply-templates select="contents/entity"/>
</div>
</xsl:template>
</xsl:stylesheet>
the is suppose to create an index menu in which the user can navigate in some kind of e-book.

Setting default value on ComboBox on HTML using JavaScript ,XSLT and XML

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>

Get length in xslt

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>

JQuery: change content of <div> every 5 seconds

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.