ajax - xml- xsl : Trying to Pull XML and then formate it correctly with xsl

airete · July 11, 2007

Hello!

so here is what i am doing or attempting to do. I have a xml doc with these "questions" and i want to pull them into my html page and display the questions. My problem is that when i pull the xml and then apply the xsl to the

responceXML, the html is not being added into the div but the values from xml are. I know my xsl works because i can open up my xml page in a browser and it is all formated nicely.It is very very weird. Since i am relatively new to JS , AJAX and xsl i figured i would come to the masters and that way you could show me the way. ^_^

here is my html/ajax/js page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XMLHttpRequest() demo</title>
<script language="javascript" type="text/javascript">

function showFeed(xmlUrl, xslUrl) {

    var feed = document.getElementById('feed');
    //clear feed div
    while(feed.hasChildNodes()){
        feed.removeChild(feed.childNodes[0]);
    }
    //append new htmlfragment
alert(getHtmlFragment(xmlUrl, xslUrl));
    feed.innerHTML=(getHtmlFragment(xmlUrl, xslUrl));     
}

function getHtmlFragment(xmlUrl, xslUrl) {
    var xslStylesheet;
    var xsltProcessor = new XSLTProcessor();   

    //load the xml file
    var xmlSource = getResponseXml(xmlUrl).responseXML;

    //load the xsl file into the xslt Processor
    xslStylesheet = getResponseXml(xslUrl).responseXML;      
    xsltProcessor.importStylesheet(xslStylesheet);
    
    return xsltProcessor.transformToFragment(xmlSource, document).textContent; 

}

function getResponseXml(xmlUrl) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", xmlUrl, false);
    xmlHttp.send(null);
    return xmlHttp;   
}

</script>
<style type="text/css">
body {
	font-family:"Times New Roman", Times, serif;
	margin-top: 1em;
}

h1, h2, h3, h4 {

	font-family:"Times New Roman", Times, serif;
	font-weight:bold;
	font-size:10pt;
	margin-top: 0px;
	margin-bottom:0px;

}

h2 {
	padding-bottom:8px;
	border-bottom: 2px groove #808080;
}

h3 { margin-top: 1em; }

h4 { margin-bottom: 2em; }

table {
	margin-top: -0.5em;
	margin-left:1em;
}

.question {
	padding: 0px 6px 6px 6px;
}

.questionIdentifier {
	font-size: 14pt;
	font-weight:bold;
	margin-bottom: 7pt;
}

.questionData {
	border: 1px solid #000000;
	padding-left: 1em;
}

.untranslated {
	color: #0000FF;
	font-size: 125%;
}

.selectedTable { background-color:silver; }

    #feed {
        background: #eee;
        border: 1px dotted #ccc;
        height: 400px;
        overflow: auto;
        width: 800px
    }

</style>

</head>
<body>

<p>Retrieves an <a href="/petrik/blog/atom/">xml atom feed</a> and xsl stylesheet with XMLHttpRequest().
Applies the stylesheet to the xml. Adsds the fragment to the div.</p>

<a href="xmlhttprequest.html" onclick="showFeed('testFeed2.xml', 'contents.xsl'); return false;">CLICK ME!</a> -


<div id="feed">

</div>

</body>
</html>

and for my wonderful xsl:


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:atom="http://purl.org/atom/ns#"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:dc="http://purl.org/dc/elements/1.1/">
<xsl:output indent="no" method="html"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>

    <xsl:template match="/">
   		 	<form>
            <xsl:apply-templates select="/atom:feed"/>
            </form>
</xsl:template>
   
    <xsl:template match="/atom:feed">
    
		<xsl:apply-templates select="atom:entry"/>

</xsl:template>

<xsl:template match="atom:entry">
    <div id="{questionId}div" class="question">
    	<p class="questionIdentifier"><xsl:value-of select="atom:questionIdentifier"/></p>
	<div class="questionData">
			<xsl:value-of select="atom:supportingText"/>
	</div>
         <p><xsl:value-of select="atom:questionText"/></p>
         <table>
			<tr>
                    <td><input type="radio" id="q2a1" name="{questionId}a" value="1"/></td>
                    <td><label for="q2a1"><xsl:value-of select="atom:answerA"/></label></td>
                </tr>
                <tr>
                    <td><input type="radio" id="q2a2" name="q2a" value="2"/></td>
                    <td><label for="q2a2"><xsl:value-of select="atom:answerB"/></label></td>
                </tr>
                <tr>
                    <td><input type="radio" id="q2a3" name="q2a" value="3"/></td>
                    <td><label for="q2a3"><xsl:value-of select="atom:answerC"/></label></td>
                </tr>
                <tr>
                    <td><input type="radio" id="q2a4" name="q2a" value="4"/></td>
                    <td><label for="q2a4"><xsl:value-of select="atom:answerD"/></label></td>
                </tr>
         </table>
    </div>
</xsl:template>
</xsl:stylesheet>

and last but not least xml:


<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="contents.xsl"?>
<feed version="0.3"
  xmlns="http://purl.org/atom/ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xml:lang="en">

    <entry>
	<questionId>q1</questionId>
	<questionIdentifier>1. M5Q1R1A</questionIdentifier>
	<questionType>text</questionType>
	<supportingText><![CDATA[ <p>EMERGENCY PROCEDURES</p><p class="untranslated">In China dial 120 for medical emergencies, 119 for fire, and 100 for police services.</p>]]></supportingText>
	<questionText>In China, when would you dial 120? </questionText>
	<correctAnswer>1</correctAnswer>
	<answerA>A. When yoou need police.</answerA>
	<answerB>B. When there is a fire.</answerB>
	<answerC>C. When there is a medical emergency.</answerC>
	<answerD>D. When you need directory assistance.</answerD>
  	
</entry>
<quiz>
	<answers>

		<q1>1</q1>
		<q2>2</q2>
		<q3>3</q3>
	</answers>
		<contentSplitter>|*contentSplit*|</contentSplitter>
	<question>

	</question>
</quiz>
</feed>

airete · July 11, 2007

ok so i have the xml coming in and the xsl formating it. But i am running into a serious where if i put in <p> or any html inside one of the xml tags for formatting it will not formate. I tried to use cdata, but it just shows the <p> and all the html tags. anyone have any ideas?

i tried to updated my above post with the new code and stuff but the modify button was not there?

to get it working i changed my showFeed function from the feed.innerHTML to appendChild.

function showFeed(xmlUrl, xslUrl) {

    var feed = document.getElementById('feed');
    //clear feed div
    while(feed.hasChildNodes()){
        feed.removeChild(feed.childNodes[0]);
    }
    //append new htmlfragment

feed.appendChild(getHtmlFragment(xmlUrl, xslUrl));
         
}

could that have something to do with it? it worked before but the form elements did not work.

airete · July 12, 2007

I also solved the last problem too. I am just posting the solution here so that is someone else has this problem that this might help them out.

I found out the problem when saw what the DOM had rendered. When the xml was spit out on the page,the < and > had beem replaced with < and &gt instead.

in my xls i named the div that had the html in it "qData" then i created a function that put all the elements named qData in an array. Then I cycled through the array and replaced the < with < and the same for &gt.

here is the function.. and i just put it in an onload in the body,after it loaded in all the content.


function fixupContent(){

var itemList = document.getElementsByName("qData");

for (var i=0;i<itemList.length;i++) {
	var item = itemList[i];
	var text = itemList[i].innerHTML;
	text = text.replace(/</g,"<");
	text = text.replace(/>/g,">");

	itemList[i].innerHTML = text;
}


}

you can mark this as solved

Sign In

ajax - xml- xsl : Trying to Pull XML and then formate it correctly with xsl

Recommended Posts

airete

Link to comment

Share on other sites

airete

Link to comment

Share on other sites

airete

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information