✔ xslt Processor Problem

N

Ntti

Mitglied
Hallo !

Ich hab ein xml file welches ich mit ein xslt stylesheet in html umwandlen will und das ganze mit javascript

wenn ich das stylesheet in xml spy oder so aufruf funktioniert das ganze wunderbar aber mach ich das mit javascript in meine appliaction bekomm ich immer ein leeres document

hier ein auszug aus mein code:

Code: 
 function transform(xmlDoc){
		var xsltProcessor = new XSLTProcessor();
		var  xslDoc= document.implementation.createDocument("","",null); 
	  	// Load the xsl file
	  	var xslloaded=false; 
  		if (!xslloaded){ xslloaded= xslDoc.load("chrome://metabook/content/ergebnisse.xsl");}
		
	 //Finally import the xsl
  		xsltProcessor.importStylesheet(xslDoc); 
	   // create  XML document
      var respon = xsltProcessor.transformToDocument(xmlDoc); 
	   return respon; 
	  }
Weiß vielleicht jemand warum das so ist? was ist da falsch? ich dreh schon langsam durch ...

Danke und lg
Ninette
 
Hi,

versuch mal bei Deinen Dokumente (XML und XSLT) das Attribut async auf false zu setzen.
Ausserdem solltest Du das Dokument zum Schluss serialisieren, wenn Du es als HTML-Dokument
ausgeben willst.
Code: 
function transform(xmlDoc){
  // XSLT-Transformationsobjekt (Mozilla, Opera ab Version 9.0)
  var xsltProcessor = new XSLTProcessor();
  // Synchrones XSLT-Dokument erstellen
  var xslDoc = document.implementation.createDocument("","",null);
  xslDoc.async = false;

  // XSLT-Dokument laden
  var xslloaded = false;
  if (!xslloaded){ xslloaded= xslDoc.load("chrome://metabook/content/ergebnisse.xsl");}

  // Strukturdokument importieren
  xsltProcessor.importStylesheet(xslDoc);
  // XML-Dokument erstellen
  var objResponse = xsltProcessor.transformToDocument(xmlDoc);

  // XML-Dokument mit Hilfe eines Serialisierungs-Objektes in HTML-String überführen
  var objSerialize = new XMLSerializer();
  var strResponse = objSerialize.serializeToString(objResponse);

  return strResponse;
}
Obige Funktion funktioniert nur mit korrekten XML- und XSLT-Dokumenten. Ausserdem wird der
IE nicht berücksichtigt.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Vielen Dank für dein Script. Leider funktioniert das bei mir nicht ganz.

Fehlermeldung:
Code: 
Fehler: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIXSLTProcessor.transformToDocument]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: http://127.0.0.1/test/ :: transform :: line 19"  data: no]

index.html
Code: 
<html>

	<head>
	<script type="text/javascript">
	function transform(xmlDoc){
		// XSLT-Transformationsobjekt (Mozilla, Opera ab Version 9.0)
		var xsltProcessor = new XSLTProcessor();
		// Synchrones XSLT-Dokument erstellen
		var xslDoc = document.implementation.createDocument("","",null);
		xslDoc.async = false;
		
		// XSLT-Dokument laden
		var xslloaded = false;
		if (!xslloaded){ xslloaded= xslDoc.load("test.xsl");}
		
		// Strukturdokument importieren
		xsltProcessor.importStylesheet(xslDoc);
		// XML-Dokument erstellen
		var objResponse = xsltProcessor.transformToDocument(xmlDoc);
		
		// XML-Dokument mit Hilfe eines Serialisierungs-Objektes in HTML-String überführen
		var objSerialize = new XMLSerializer();
		var strResponse = objSerialize.serializeToString(objResponse);
		
		return strResponse;
	}
	function foo() {
		document.write(transform('test.xml'));
	}
	</script>
	</head>

	<body onload="foo();">
	
	</body>
</html>

test.xml
Code: 
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="test.xsl" ?>
<produktnews>

Die neuesten Produktnachrichten:

<beschreibung>
Die Firma <hersteller>Fridolin Soft</hersteller> hat eine neue Version des
beliebten Ballerspiels <produkt>HitYourStick</produkt> herausgebracht.
Nach Angaben des Herstellers soll die neue Version, die nun auch auf dem
Betriebssystem <produkt>Ganzfix</produkt> läuft, um die <preis>80 Dollar</preis>
kosten.
</beschreibung>

<beschreibung>
Von <hersteller>Ripfiles Inc.</hersteller> gibt es ein Patch zu der Sammel-CD-ROM
<produkt>Best of other people's ideas</produkt>. Einige der tollen
Web-Seiten-Templates der CD-ROM enthielten bekanntlich noch versehentlich nicht
gelöschte Angaben der Original-Autoren. Das Patch ist für schlappe
<preis>200 Euro</preis> zu haben.
</beschreibung>

</produktnews>

test.xsl
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html><head></head><body style="font-family:Verdana; font-size:24px; color:green">
  <xsl:apply-templates />
 </body></html>
</xsl:template>

<xsl:template match="beschreibung">
 <p style="font-family:Verdana; font-size:13px; color:black">
   <xsl:apply-templates />
 </p>
</xsl:template>

<xsl:template match="hersteller">
 <span style="font-weight:bold; color:red"><xsl:value-of select="." /></span>
</xsl:template>

<xsl:template match="produkt">
 <span style="font-weight:bold; color:blue"><xsl:value-of select="." /></span>
</xsl:template>

<xsl:template match="preis">
 <b><xsl:value-of select="." /></b>
</xsl:template>

</xsl:stylesheet>

Ich würde mich über Antworten freuen.
vielen Dank im Voraus und schöne Grüße
Samuel
 
ich weiß nicht was für eine fehlermeldung das ist aber bei mir funktioniert es jetzt. Das problem war dass das xsl file mit load nicht richtig geladen wurde, ich hol mir das file jetzt mittels xmlhttprequest und es geht wie gesagt.

lg Ninette
 
Hi,

Du musst dem Script ein XML-Dokument-Objekt übergeben, nicht einfach den String dazu.

Hier das Script mit der Erweiterung, ein XML-Dokument-Objekt anzulegen.
Code: 
<script type="text/javascript">
function transform(xmlDoc){

  // Quelldokument (XML) laden
  docXML = document.implementation.createDocument("", "", null);
  docXML.async = false;
  docXML.load(xmlDoc);

  // XSLT-Transformationsobjekt (Mozilla, Opera ab Version 9.0)
  var xsltProcessor = new XSLTProcessor();
  // Synchrones XSLT-Dokument erstellen
  var xslDoc = document.implementation.createDocument("","",null);
  xslDoc.async = false;

  // XSLT-Dokument laden
  var xslloaded = false;
  if (!xslloaded){ xslloaded= xslDoc.load("test.xsl");}

  // Strukturdokument importieren
  xsltProcessor.importStylesheet(xslDoc);
  // XML-Dokument erstellen
  var objResponse = xsltProcessor.transformToDocument(docXML);

  // XML-Dokument mit Hilfe eines Serialisierungs-Objektes in HTML-String überführen
  var objSerialize = new XMLSerializer();
  var strResponse = objSerialize.serializeToString(objResponse);

  return strResponse;
}

function foo() {
  document.open();
  document.write(transform('test.xml'));
  document.close();
}
</script>
Hinweis: Das Script ist in seiner aktuellen Form nicht für den IE ausgelegt.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Vielen Dank für die Hilfe. Das Script funktioniert nun wie es sollte.
Nochmals vielen Dank für euren Einsatz.

schöne Grüße
Samuel


//edit 1

So, nun hab ich ein weiteres Problem, und diesesmal mit dem IE.

Ich versuche eine Livesuche zu machen.

index.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>livesearch</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
		<script type="text/javascript">
		function createXMLHttpRequest() {
		    var request;
		    try {
		    	if(window.ActiveXObject) {
		            for(i = 5; i; i--) {
		                try {
		                    if(i == 2) {
		                        request = new ActiveXObject( "Microsoft.XMLHTTP" );    
		                    } else {
		                        request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
		                    }
		                    break;
		                } catch(e) {                        
		                    request = false;
		                }
		            }
		        } else if(window.XMLHttpRequest) {
		            request = new XMLHttpRequest();
		            if(request.overrideMimeType) {
							request.overrideMimeType('text/xml');
		            }
		        }
		    } catch(e) {
		        request = false;
		    }
		    return request;
		}
		
		function transform(strXmlData, strXslUrl){
			if(window.ActiveXObject) {
				xslDoc.open('GET', strXslUrl, true);
  	  			xslDoc.onreadystatechange = function() {
  	  				if(xslDoc.readyState == 4 && request.status == 200) {
	  	  				stylesheetDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
			    		stylesheetDoc.async = false;
			    		stylesheetDoc.loadXML(xslDoc.responseText);
			      		var strResponse = strXmlData.transformNode(stylesheetDoc);
  	  				}
  	  			}
	  			xslDoc.send(null);		  			
			} else {
				var xsltProcessor = new XSLTProcessor();
				var xslDoc = document.implementation.createDocument("","",null);
				xslDoc.async = false;
				xslloaded = xslDoc.load(strXslUrl);
				xsltProcessor.importStylesheet(xslDoc);
				var objResponse = xsltProcessor.transformToDocument(strXmlData);
				var objSerialize = new XMLSerializer();
				var strResponse = objSerialize.serializeToString(objResponse);
			}
			return strResponse;
		}
		
		function livesearch() {
			if(document.getElementById('search').value != '') {
				request = createXMLHttpRequest();
				request.onreadystatechange = function() {
					if(request.readyState == 4 && request.status == 200) {
						var searchresult = transform(request.responseXML, 'style.xsl');
						document.getElementById('searchresults').innerHTML = searchresult;
					}
				}
				request.open('GET', 'search.php?str=' + document.getElementById('search').value, true);
				request.send(null);
			}			
		}		
		</script>		
	</head>

	<body>
	
		<form>
			Suche: <input type="text" id="search" onkeyup="livesearch();" />
			<hr />
			Resultate:
			<hr />
			<div id="searchresults">
			
			</div>
		</form>
	
	</body>
	
</html>

search.php
PHP: 
<?php

	header('Content-type: text/xml');
	
	$conn = mysql_connect('localhost', 'root', '');
	mysql_select_db('ajaxtests');
	
	$sql = 'SELECT title, autor, info FROM books WHERE title LIKE \''.$_GET['str'].'%\'';
	$result = mysql_query($sql)
		or die(mysql_error());
	
	$xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\r\n";
	$xml .= "<catalog>\r\n";
	while($res = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$xml .= '<book>';
		$xml .= '<title>'.$res['title'].'</title>';
		$xml .= '<autor>'.$res['autor'].'</autor>';
		$xml .= '<info>'.$res['info'].'</info>';
		$xml .= '</book>';
	}
	$xml .= '</catalog>';
	
	echo $xml;

?>

style.xsl
Code: 
<?xml version="1.0" encoding="ISSO-8859-1"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html"/>
    
    <xsl:template match="/">
		<xsl:for-each select="catalog">
			<div id="content">
				<xsl:for-each select="book">
					<div class="book">
						Title: <xsl:value-of select="title"/><br />
						Autor: <xsl:value-of select="autor"/><br />
						Description: <xsl:value-of select="info"/>
					</div>
				</xsl:for-each>
			</div>
		</xsl:for-each>
    </xsl:template>
    
</xsl:stylesheet>


Die Suche funktioniert einwandfrei im Firefox. Leider geht im IE garnichts.
Eventuell hat ja jemand noch einen Tipp parat.

Vielen Dank im Voraus,
schöne Grüße

Samuel


//edit 2

Hallo nocheinmal,

hab die index.html bisschen umgeändert. Leider funktioniert immer noch nichts im InternetExplorer.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>livesearch</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
		<script type="text/javascript">
		function createXMLHttpRequest() {
		    var request;
		    try {
		    	if(window.ActiveXObject) {
		            for(i = 5; i; i--) {
		                try {
		                    if(i == 2) {
		                        request = new ActiveXObject( "Microsoft.XMLHTTP" );    
		                    } else {
		                        request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
		                    }
		                    break;
		                } catch(e) {                        
		                    request = false;
		                }
		            }
		        } else if(window.XMLHttpRequest) {
		            request = new XMLHttpRequest();
		            if(request.overrideMimeType) {
							request.overrideMimeType('text/xml');
		            }
		        }
		    } catch(e) {
		        request = false;
		    }
		    return request;
		}
		
		function livesearch() {
			if(document.getElementById('search').value != '') {
				request = createXMLHttpRequest();
				request.open('GET', 'search.php?str=' + document.getElementById('search').value, true);
				request.onreadystatechange = writeData;
				request.send(null);
			}			
		}	
		
		function writeData() {
			if(request.readyState == 4 && request.status == 200) {
				if(window.ActiveXObject) {
					var strResponse = 'ie-dreck!';
					xsl = createXMLHttpRequest();
					xsl.open('GET', 'style.xsl', true);
					xsl.onreadystatechange = function() {
						if(xsl.readyState == 4 && request.status == 200) {
							stylesheetDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
							stylesheetDoc.async = false;
							stylesheetDoc.loadXML(styleObject.responseText);
							var xml = request.responseXML;
							strResponse = xml.transformNode(stylesheetDoc);
						}
					}
					xsl.send(null);
				} else {
					var xsltProcessor = new XSLTProcessor();
					var xslDoc = document.implementation.createDocument("","",null);
					xslDoc.async = false;
					xslDoc.load('style.xsl');
					xsltProcessor.importStylesheet(xslDoc);
					var objResponse = xsltProcessor.transformToDocument(request.responseXML);
					var objSerialize = new XMLSerializer();
					var strResponse = objSerialize.serializeToString(objResponse);
				}
				document.getElementById('searchresults').innerHTML = strResponse;
			}
		}
		</script>		
	</head>

	<body>
	
		<form>
			Suche: <input type="text" id="search" onkeyup="livesearch();" />
			<hr />
			Resultate:
			<hr />
			<div id="searchresults">
			
			</div>
		</form>
	
	</body>
	
</html>
 
Hi,

zunächst solltest Du die Variable (request), die das Request-Objekt aufnimmt, global deklarieren. Damit
steht sie in allen Funktionen zur Verfügung.

Als nächstes muss für den IE aus dem zurückgelieferten Request-String ein XML-Dokument erstellt werden, da
sonst die MSXML-Versionen nicht kompatibel sind.

Jetzt wird mit der gleichen MSXML-Version ein XSLT-Prozessor erstellt und das zugehörige XSL-Dokument geladen.
Damit kann nun das angeforderte Dokument transformiert werden.

Das XSL-Dokument enthält übrigens einen Fehler! Du hast die Zeichenkodierung mit Doppel-S (ISSO) geschrieben.

Script aus index.html:
Code: 
var request;

function createXMLHttpRequest() {
  var request;
  try {
    if(window.ActiveXObject) {
      for(i = 5; i; i--) {
        try {
          if(i == 2) {
            request = new ActiveXObject( "Microsoft.XMLHTTP" );
          } else {
            request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
          }
          break;
        } catch(e) {
          request = false;
        }
      }
    } else if(window.XMLHttpRequest) {
      request = new XMLHttpRequest();
      if(request.overrideMimeType) {
        request.overrideMimeType('text/xml');
      }
    }
  } catch(e) {
    request = false;
  }
  return request;
}

function livesearch() {
  if(document.getElementById('search').value != '') {

    // Falls noch ein Request-Objekt existiert -> zunächst beenden
    if(request && request.readyState){
      request.abort();
      request = false;
    }

    request = createXMLHttpRequest();
    request.open('GET', 'search.php?str=' + document.getElementById('search').value, true);
    request.onreadystatechange = writeData;
    request.send(null);
  }
}

function writeData() {
  if(request.readyState == 4 && request.status == 200) {
    if(window.ActiveXObject) {
      var strResponse = 'ie-dreck!';

      // XML-Dokument aus Request-String erstellen
      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async="false";
      xmlDoc.loadXML(request.responseText);

      // XSL-Dokument laden
      var xslDoc = new ActiveXObject("Microsoft.XMLDOM");
      xslDoc.async = false;
      xslDoc.load("style.xsl");

      // Transformieren (Strukturdokument auf XML-Dokument anwenden)
      var strResponse = xmlDoc.transformNode(xslDoc);
    } else {
      var xsltProcessor = new XSLTProcessor();
      var xslDoc = document.implementation.createDocument("","",null);
      xslDoc.async = false;
      xslDoc.load('style.xsl');
      xsltProcessor.importStylesheet(xslDoc);
      var objResponse = xsltProcessor.transformToDocument(request.responseXML);
      var objSerialize = new XMLSerializer();
      var strResponse = objSerialize.serializeToString(objResponse);
    }
    document.getElementById('searchresults').innerHTML = strResponse;
  }
}
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Hallo Quaese,

vorab ein dickes Dankeschön für deinen Einsatz. Ich habe jetzt deine geänderten Funktionen
eingebaut und es funktioniert immernoch einwandfrei im FF. Der IE ruft aber die Funktion writeData(); garnicht auf.

Code: 
		function livesearch() {
			if(document.getElementById('search').value != '') {
				if(request && request.readyState){
					request.abort();
					request = false;
				}	
				alert('ls 1');			
				request = createXMLHttpRequest();
				alert('ls 2');
				request.open('GET', 'search.php?str=' + document.getElementById('search').value, true);
				alert('ls 3');
				request.onreadystatechange = writeData;
				request.send(null);
			}
		}

Der IE bringt hier nur die ersten zwei alert();s sprich "ls 1" und "ls 2".
Langsam aber sicher verzweifel ich noch an dem Wurstbrotbrowser der Redmondler ;-)

Wär dir sehr dankbar wenn du nocheinmal Zeit finden würdest. Vielen Dank und schöne Grüße

Samuel

edit:
Die XSLT-File hat nun "ISO-8859-1"
und die Variable request wurde auch global gemacht.
 
Hi,

ich schicke Dir ein funktionierendes Beispiel im Anhang mit. Die search.php generiert einfach ein
Dokument aus einem Array, die Funktionsweise sollte aber ersichtlich werden.

Ciao
Quaese
 

Anhänge

Hallo Quaese,

ein weiteres Mal ein Dankeschön für deinen Einsatz. Durch deine angehängte Datei hab ich bemerkt wieso das Ganze nicht funkioniert. Es lag an meinen Sicherheitseinstellungen im InternetExplorer ;-)

Ich hab wohl oder übel einmal die Zeit gehabt den IE zu öffnen und ihn zu konfigurieren.

Nochmals vielen Dank, du warst mir eine riesige! Hilfe.

schöne Grüße
Samuel Weber
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück