2016-09-12 4 views
0

Bin auf der Suche nach etwas Hilfe, ich habe im Internet seit über einer Woche suchen nun meine begrenzte Kenntnisse der Suche in einer XML-Datei zu einem bestimmten Eintrag basierend auf einer Benutzereingabe von einem suchen HTML-Formular.html öffnen xslt und übergeben Variable

Ich habe versucht, Xpath, aber meine Javascripting Wissen ist begrenzt und ich konnte dies nicht zum Funktionieren bringen.

Ich habe auf xsl zurückgegriffen, um mein xml zu stylen, es funktioniert wirklich gut, wenn ich hardcodiere, wonach ich suche, würde ich sehr gerne dieses dynamische basierend auf meinem HTML von Eingang machen, aber ich bin wirklich Mit dem Code kämpfen, um dies zum Laufen zu bringen, gibt es auch einige Beispiele dafür, wie man die HTML-Seite von Dingen, die ich gefunden habe, einrichtet.

XSL

<?xml version="1.0" encoding="UTF-8"?> 
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > 
 
    <xsl:param name="skuid" /> 
 
    <xsl:template match="/"> 
 
     <xsl:apply-templates select="//sku[@id=$skuid]" /> 
 
    </xsl:template> 
 
    
 
    <xsl:template match="sku"> 
 
<html> 
 
    <body> 
 
<h2>Availability:</h2> 
 

 
    <table border="1"> 
 
    <tr bgcolor="#9acd32"> 
 
     <th>Sku Code</th> 
 
     <th>Description</th> 
 
\t <th>Due Date</th> 
 
\t <th>Due Qty</th> 
 
\t </tr> 
 
\t <tr> 
 
     <td align="center"><xsl:value-of select="skucode"/></td> 
 
     <td align="center"><xsl:value-of select="description"/></td> 
 
\t <td align="center"><xsl:value-of select="duedate"/></td> 
 
\t <td align="center"><xsl:value-of select="dueqty"/></td> 
 
\t </tr> 
 
\t <tr bgcolor="#9acd32"> 
 
\t <th colspan="2" align="center">Ranged Currrent Cat</th> 
 
\t <th colspan="2" align="center">Ranged Next Cat</th> 
 
    </tr> 
 
    <tr> 
 
\t <td colspan="2" align="center"><xsl:value-of select="currcat"/></td> 
 
\t <td colspan="2" align="center"><xsl:value-of select="nextcat"/></td> 
 
    </tr> \t 
 
    </table> 
 
    </body> 
 
    </html> 
 
\t </xsl:template> 
 
    
 

 
</xsl:stylesheet>

XML

<?xml version="1.0"?> 
 
<?xml-stylesheet type="text/xsl" href="employees2.xsl"?> 
 
<availability> 
 
<sku id="10011"> 
 
<skucode>10011</skucode> 
 
<description>4 Gallon Loft Tank Kit</description> 
 
<duedate>07/09/2016</duedate> 
 
<dueqty>10.00</dueqty> 
 
<currcat>Main Cat In Store</currcat> 
 
<nextcat>Main Cat In Store</nextcat> 
 
</sku> 
 
<sku id="10018"> 
 
<skucode>10018</skucode> 
 
<description>MATT EMULSION PINK 2/5L</description> 
 
<duedate>09/09/2016</duedate> 
 
<dueqty>100</dueqty> 
 
<currcat>Not Ranged</currcat> 
 
<nextcat>Not Ranged</nextcat> 
 
</sku> 
 
<sku id="12345"> 
 
<skucode>12345</skucode> 
 
<description>DeWalt Drill</description> 
 
<duedate>10/09/2016</duedate> 
 
<dueqty>1000</dueqty> 
 
<currcat>Main Cat In Store</currcat> 
 
<nextcat>Main Cat In Store</nextcat> 
 
</sku> 
 
<sku id="98765"> 
 
<skucode>98765</skucode> 
 
<description>Wheel Barrow</description> 
 
<duedate>31/09/2016</duedate> 
 
<dueqty>1</dueqty> 
 
<currcat>Not Ranged</currcat> 
 
<nextcat>Not Ranged</nextcat> 
 
</sku> 
 
</availability>

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
SKU: <input type="text" name="SKU" id="input" maxlength="5"> 
 
<br /> 
 
<input type="submit" value="Submit" onClick="loadXMLDoc()"> 
 
<br /> 
 
<br /> 
 
<div id="results"></div> 
 

 
<script> 
 

 
function loadXMLDoc(dname) 
 
{ 
 
if (window.XMLHttpRequest) 
 
    { 
 
    xhttp=new XMLHttpRequest(); 
 
    } 
 
else 
 
    { 
 
    xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 
    } 
 
xhttp.open("GET",dname,false); 
 
try {xhttp.responseType="msxml-document"} catch(err) {} // Helping IE 
 
xhttp.send(""); 
 
return xhttp; 
 
} 
 
var y = document.getElementById("input").value; 
 
var x=loadXMLDoc("employees.xml"); 
 
var xml=x.responseXML; 
 
path="/Availability/sku[@id=y]"; 
 

 
// code for IE 
 
if (window.ActiveXObject || xhttp.responseType=="msxml-document") 
 
{ 
 
xml.setProperty("SelectionLanguage","XPath"); 
 
nodes=xml.selectNodes(path); 
 
for (i=0;i<nodes.length;i++) 
 
    { 
 
    document.write(nodes[i].childNodes[0].nodeValue); 
 
    document.write("<br>"); 
 
    } 
 
} 
 

 
// code for Chrome, Firefox, Opera, etc. 
 
else if (document.implementation && document.implementation.createDocument) 
 
{ 
 
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null); 
 
var result=nodes.iterateNext(); 
 

 
while (result) 
 
    { 
 
    document.write(result.childNodes[0].nodeValue); 
 
    document.write("<br>"); 
 
    result=nodes.iterateNext(); 
 
    } 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

freundlichen Grüßen Paul

+0

Willkommen bei SO @PaulWills :-) Können Sie etwas zu "Ich konnte das nicht zur Arbeit bringen"? Was genau passiert? Beziehen Sie sich irgendwo im HTML-Code auf xslt? Irgendwelche Fehler, die in der Konsole auftauchen? –

Antwort

0

In Ihrem Wegausdruck

path = "/ Verfügbarkeit/sku [@ id = y]";

"y" bedeutet "der Wert des Elements Kind des SKU-Elements mit dem Namen" y ", es bedeutet nicht" der Wert der Javascript-Variablen mit dem Namen "y".

Ich vergesse, ob der Browser DOM XPath API einen Mechanismus zum Ersetzen von Parameterwerten hat; Wenn nicht, können Sie die String-Verkettung verwenden, um einen Pfadausdruck zu erstellen, der den Wert von y als String-Literal enthält. Aber Vorsicht Injektionen.