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.
Related
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))"/>
my XHR object isn't hitting the 'loading' state, 3. I can't figure out what the problem is, as I can't find any syntax issues. It seems to be some kind of code/syntax error, because the error that I'm getting in the console is "Failed to load resource: the server responded with a status of 500 (Internal Server Error)"
Anyway, here's what I have. The above error triggers on the line 'xhr.send(requestBody);' in 'lecturers.js'.
UPDATE
The original code for "lecturers.js" was this:
function getResults(){
xhr.open("GET", "lecturers.php?id=" + Number(new Date), true);
xhr.onreadystatechange = getData;
xhr.send(null);
}
What I want to do is change the above code to use the POST protocol.
lecturers.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Course Lecturers</title>
<script type="text/javascript" src="lecturers.js"></script>
</head>
<body>
<form>
<input type = "button" id="butt1" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
var btnResults = document.getElementById("butt1");
btnResults.onclick = getResults();
</script>
<span id="results" /></span>
</body>
</html>
lecturers.js
var xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
function getResults(){
if(xhr){
var dataSource = "lecturers.php";
var requestBody = "lecturers.php?id=" + Number(new Date);
xhr.open("POST", dataSource, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = getData;
xhr.send(requestBody);
}
}
function getData ()
{
alert(xhr.readyState);
if ((xhr.readyState == 4) &&(xhr.status == 200))
{
var object = document.getElementById("results");
object.innerHTML = xhr.responseText;
}
}
lecturers.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<Courses>
<Course>
<title>Web Development</title>
<lecturer>Jian Yu</lecturer>
<moderator>Gary Snail</moderator>
<points>25</points>
<group>SCCRL</group>
<Faculty>DCT</Faculty>
</Course>
<Course>
<title>Software Development in Java</title>
<lecturer>SpongeBob SquarePants</lecturer>
<moderator>Patrick Star</moderator>
<points>25</points>
<group>SCCRL</group>
<Faculty>DCT</Faculty>
</Course>
<Course>
<title>Financial Accounting</title>
<lecturer>Squidward Tentacles</lecturer>
<moderator>Mr Crab</moderator>
<points>10</points>
<group>KEDRI</group>
<Faculty>DCT</Faculty>
<Course>
<title>IS Project</title>
<lecturer>Plankton</lecturer>
<moderator>Sandy Cheeks</moderator>
<points>30</points>
<group>IS</group>
<Faculty>DCT</Faculty>
</Course>
</Course>
</Courses>
lecturers.xsl
<?xml version="1.0"?><!-- DWXMLSource="results.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE> Courses</TITLE>
</HEAD>
<BODY>
Courses with More than 15 Credit Points : <BR/>
<table border="1">
<tr>
<th>Title</th>
<th>Group</th>
<th>Faculty</th>
</tr>
<xsl:for-each select="Course">
<tr>
<td><xsl:value-of select="title"></xsl:value-of></td>
<td><xsl:value-of select="group"></xsl:value-of></td>
<td><xsl:value-of select="Faculty"></xsl:value-of></td>
</tr>
</xsl:for-each>
</table>
----------
<BR/>
Number of Courses Offered by CSSE :
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
lecturers.php
<?php
$xmlDoc = new DomDocument;
$xmlDoc->load("lecturers.xml");
$xslDoc = new DomDocument;
$xslDoc->load("lecturers.xsl");
$proc = new XSLTProcessor;
$proc->importStyleSheet($xslDoc);
echo $proc->transformToXML($xmlDoc);
?>
We are trying this in ie11 and we are getting syntax error .
function transformToHtmlText(xmlFormId, xsltFormId) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(document.getElementById(xmlFormId).innerHTML, "application/xml");
//Below line throwing Syntax Error
var xsltDoc = parser.parseFromString(document.getElementById(xsltFormId).innerHTML, "application/xml");
//var htmlContent = xmlDoc.transformNode(xsltDoc);
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
xslDoc.loadXML((new XMLSerializer()).serializeToString(xsltDoc));
xslt.stylesheet = xslDoc;
var xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;
xslProc.transform();
return xslProc.output;
//return htmlContent;
}
XML is :
<form FormID="63" FormTableName="xx_resolution" IssueName="XX Resolution">
<is_trainable required="Y" state="Req"></is_trainable>
<Follow_Up_Req required="Y" state="Req"></Follow_Up_Req>
<Follow_Up_Date></Follow_Up_Date>
<Refer_Out_Req required="Y" state="Req"></Refer_Out_Req>
<Refer_To></Refer_To>
<Refer_To_Name></Refer_To_Name>
<Refer_To_TN TNType="xxx-xxx-xxxx"></Refer_To_TN>
<Action_history_list NameList="Y" style="Section"></Action_history_list>
<Action_Date></Action_Date>
<Action_User></Action_User>
<Action_summary></Action_summary>
<Call_Category></Call_Category>
<Call_Category_1_></Call_Category_1_>
<Call_Category_2_></Call_Category_2_>
<Call_Category_3_></Call_Category_3_>
<Call_Category_4_></Call_Category_4_>
<Call_Category_5_></Call_Category_5_>
<Add_Cat></Add_Cat>
<CA_ID></CA_ID>
<CA_SUP_ID></CA_SUP_ID>
<CA_CENTER_ID></CA_CENTER_ID>
</form>
and the XSLT that we are using is :
<div xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:for-each select="Action_history_list/row">
<span style="width: 32px;"></span>
<span class="copy" style="width: 81px;">
<xsl:value-of select="_Action_User"></xsl:value-of>
</span>
<span style="width: 7px;"></span>
<span class="copy" style="width: 181px;">
<xsl:value-of select="_Action_Date"></xsl:value-of>
</span>
<span style="width: 11px;"></span>
<span class="copy" style="width: 95px;">
<span class="label" id="Action_summary_label_row_">Action summary</span>
</span>
<span style="width: 9px;"></span>
<span class="copy" style="width: 197px;">
<xsl:value-of select="_Action_summary"></xsl:value-of>
</span>
<br>
</xsl:for-each>
</div>
as per our understanding even though the tag is empty, at least empty span should be displayed . But we are getting error in the line we mentioned in the comment.
Please help.
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'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.