问题
Related to this question, you can call Javascript functions from XSL 2.0 transforms running in the browser using Saxon-JS. But I can't seem to invoke the jQuery-UI calls. My only thought is that it may be a timing issue where the jQuery selector can not find the target object's ID because Saxon-JS has yet to render it to the DOM.
My simple test follows...
The XML...
<?xml version="1.0" encoding="UTF-8"?>
<data>
<date month="7" day="17" year="2017"/>
</data>
The XSL...
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:js="http://saxonica.com/ns/globalJS"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<xsl:result-document href="#header">
<hr/>
</xsl:result-document>
<xsl:result-document href="#editor">
<table border="1">
<tr bgcolor="#999999">
<th colspan="2">Form</th>
</tr>
<xsl:apply-templates select="data/date"/>
</table>
</xsl:result-document>
<xsl:result-document href="#footer">
<hr/>
</xsl:result-document>
</xsl:template>
<xsl:template match="date">
<tr>
<td>Date:</td>
<td>
<xsl:variable name="currentValue"><xsl:value-of select="@month"/><xsl:text>/</xsl:text><xsl:value-of select="@day"/><xsl:text>/</xsl:text><xsl:value-of select="@year"/></xsl:variable>
<xsl:value-of select="$currentValue"/>
<br/>
<input type="text" id="datepicker"/>
<xsl:value-of select="js:initDP('#datepicker','7/17/2017')"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
The HTML...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>XSLT-JS-UI</title>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="js/SaxonJS.min.js"></script>
<script type="text/javascript" language="javascript" src="js/test.js"></script>
</head>
<body>
<div id="header"></div>
<div id="editor"></div>
<div id="footer"></div>
<input type="text" id="testDP"/>
<br/>
<button onclick="initDP('#testDP','7/17/1961')">picker</button>
</body>
</html>
The Javascript...
//=====================================
function initDP(id,init)
{
$(id).datepicker();
$(id).datepicker("setDate",init);
}
//=====================================
$(document).ready(function()
{
SaxonJS.transform({
stylesheetLocation: "test.sef.xml",
sourceLocation: "test.xml"
});
});
//=====================================
Included are both an HTML call to initDP (initialize jQuery date picker) and a XSL call to the same. The HTML works, the XSL fails silently.
回答1:
It seems your xsl:value-of Javascript call is evaluated before the result element is created or at least inserted in the document.
What has worked for me is to simply put a script result element after the input, creating the Javascript code on the fly:
<xsl:template match="date">
<tr>
<td>Date:</td>
<td>
<xsl:variable name="currentValue" select="string-join((@month, @day, @year), '/')"/>
<xsl:value-of select="$currentValue"/>
<br/>
<input type="text" id="datepicker{position()}"/>
<script xsl:expand-text="yes">initDP('#datepicker{position()}', '{$currentValue}')</script>
</td>
</tr>
</xsl:template>
Tested successfully with Firefox from the file system and over HTTP and with Chrome over HTTP (Chrome by default doesn't do XMLHttpRequest over the file system so Saxon-JS over the file system does not work). Edge does not seem to execute the XSLT and gives two "SCRIPT5022: XError: Misplaced or malformed XML" errors in SaxonJS.min.js (1,11772), IE seems to execute the stylesheet but the inline script does not seem to be executed. Online sample at https://martin-honnen.github.io/xslt/2017/ui-test1.html.
I have now also successfully test a different approach (https://martin-honnen.github.io/xslt/2017/ui-test2.xsl) with Firefox, Chrome and Internet Explorer that instead of an inline script result element uses ixsl:schedule-action to call a template that then uses js:initDP:
<xsl:template match="date">
<tr>
<td>Date:</td>
<td>
<xsl:variable name="currentValue" select="string-join((@month, @day, @year), '/')"/>
<xsl:value-of select="$currentValue"/>
<br/>
<input type="text" id="datepicker{position()}"/>
<ixsl:schedule-action wait="1">
<xsl:call-template name="init-datepicker">
<xsl:with-param name="id" select="'#datepicker' || position()"/>
<xsl:with-param name="value" select="$currentValue"/>
</xsl:call-template>
</ixsl:schedule-action>
</td>
</tr>
</xsl:template>
<xsl:template name="init-datepicker">
<xsl:param name="id" as="xs:string"/>
<xsl:param name="value" as="xs:string"/>
<!--<xsl:sequence select="trace(js:initDP($id, $value), 'init-datepicker called for ' || $id || ' at ' || current-dateTime())"/>-->
<xsl:sequence select="js:initDP($id, $value)"/>
</xsl:template>
The Edge problem seems to unrelated to the issue here to have Saxon-JS and JQuery UI interact, instead it is appears to be caused by a bug in the Javascript engine of the current Edge version, see https://github.com/Microsoft/ChakraCore/issues/3366, which the Saxon-JS code runs into when checking for a misplaced XML declaration. If I remove the XML declarations in the XML input and Saxon's SEF package file then https://martin-honnen.github.io/xslt/2017/ui-test4.html works fine in Edge as well as that way the Saxon-JS code does not run into the Edge Javascript bug.
来源：https://stackoverflow.com/questions/45109940/calling-jquery-ui-components-in-xsl-using-saxon-js-and-its-global-javascript-fun