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>
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 producing a list of radio buttons that's looking at a list of items containing individual countries and associated regions. Below is the XSL for my radio buttons
<xsl:template match="/">
<div id="filter">
<xsl:call-template name="container" />
</div>
</xsl:template>
<xsl:template name="container">
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<xsl:for-each select="$Rows">
<xsl:call-template name="group-items"/>
</xsl:for-each>
</xsl:template>
<xsl:template name="group-items">
<label class="region-filter-item" region="{#Region}">
<input type="radio" name="region" class="regionbox">
<xsl:value-of select="#Region"/>
</input>
</label>
This produces the correct data, but it also duplicates many of the regions because if there are 15 countries in one region, that one region will be displayed 15 times.
What's the best way to only show each region once?
I wrote a JavaScript function that pushes each unique item into an array, and then use the array to populate my container. All resolved. Thanks for all the help guys:)
function removeDuplicates(){
var Array = new Array();
$('#filter > .filter-item').each(function(){
var country = $(this).attr('country ');
if ( $.inArray(region, Array ) == -1 ) {
Array .push(region);
}
});
Array .sort();
var length = Array .length;
for (var i = 0; i < length; i++) {
$('#filter-container').find('.container').append('<label class="filter-item" country="' + Array [i] + '">'
+ '<input type="radio" name="country" class="checkbox">'
+ Array [i] +
'</input>' +
'</label> ');
}
}
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.