I also have an xml file containing news headlines, there is a second xml containing full news. These xml files are linked by a unique history identifier.
I create a single web page with two sections. One section provides a list of stories that I can create using XSLT and an XML header file. I need to update the second section depending on which link to link is clicked.
This is the xslt that generates the header section
<xsl:for-each select="response/newsList/news"> <div class="newsListItem"> <h2><xsl:value-of select="title" /></h2> <p><xsl:value-of select="shortText" /></p> <p> <xsl:element name="a"> <xsl:attribute name="href"> index.html?newsid=<xsl:value-of select="id"/> </xsl:attribute> <xsl:attribute name="rel"> <xsl:value-of select="id"/> </xsl:attribute> <xsl:attribute name="onclick"> removeContent(); displayXMLItem('newsItem','newsFullArticles.xml','articleFull.xsl'); return false; </xsl:attribute> <xsl:text>More</xsl:text> </xsl:element> </p> </div> </xsl:for-each>
xslt for the second section
<xsl:for-each select="response/newsList/news[id=?]"> <div class="newsListItem"> <h2>The Full Article</h2> <p><xsl:value-of select="text" /></p> </div> </xsl:for-each>
I understand that I need to update id = somehow? to indicate which story I want to show, but I see how to do it. Unfortunately, I canโt use any server language, all this needs to be done in vanilla JavaScript.
The html page where I am calling is here
function loadXMLDoc(dname) { if (window.ActiveXObject) { xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0"); } else { xhttp=new XMLHttpRequest(); } xhttp.open("GET",dname,false); xhttp.send(""); return xhttp.responseXML; } var displayXMLItem = function(container, xmlFileToParse, xslTemplate,itemIdentifier) { xml=loadXMLDoc(xmlFileToParse); xsl=loadXMLDoc(xslTemplate); // code for IE if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById(newsListContainer).innerHTML=ex; } // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor=new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml,document); document.getElementById(container).appendChild(resultDocument); } } var removeContent = function(){ document.getElementById('newsItem').innerHTML = ""; }
If someone can point me in the right direction, I would appreciate it. Is what I'm trying to make possible without a server language? Sorry, if that doesn't make sense, I hit my head on a brick wall for a moment, so it seems.
Thanks in advance.