使用Saxon-JS及其全局Javascript函数命名空间在XSL中调用jQuery-UI组件？ [英] Calling jQuery-UI components in XSL using Saxon-JS and its global Javascript function namespace?
问题描述
与这个问题，你可以使用Saxon-JS从浏览器中运行的XSL 2.0转换中调用Javascript函数。但我似乎无法调用jQuery-UI调用。我唯一的想法是，它可能是一个时间问题，jQuery选择器无法找到目标对象的ID，因为Saxon-JS还没有将它呈现给DOM。
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...
XML ...
<?xml version="1.0" encoding="UTF-8"?>
<data>
<date month="7" day="17" year="2017"/>
</data>
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>
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>
Javascript ...
The Javascript...
//=====================================
function initDP(id,init)
{
$(id).datepicker();
$(id).datepicker("setDate",init);
}
//=====================================
$(document).ready(function()
{
SaxonJS.transform({
stylesheetLocation: "test.sef.xml",
sourceLocation: "test.xml"
});
});
//=====================================
包括对 initDP 的HTML调用（初始化jQuery日期选择器）和对其的XSL调用。 HTML工作，XSL无声地失败。
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.
推荐答案
看来你的 xsl：value-of 在创建结果元素之前评估Javascript调用，或者至少在文档中插入Javascript调用。
It seems your xsl:value-of Javascript call is evaluated before the result element is created or at least inserted in the document.
对我有用的是简单地放一个 script 输入后的结果元素，即时创建Javascript代码：
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>
使用Firefox从文件系统和HTTP以及Chrome over HTTP（Chrome默认情况下）测试成功不对文件系统执行XMLHttpRequest，因此文件系统上的Saxon-JS不起作用。 Edge似乎没有执行XSLT并在SaxonJS.min.js（1,11772）中给出两个SCRIPT5022：XError：错位或格式错误的XML错误，IE似乎执行样式表但内联脚本似乎没有被执行。在线样本 https://martin-honnen.github.io/xslt /2017/ui-test1.html 。
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.
我现在也成功测试了一种不同的方法（ https://martin-honnen.github.io/xslt/2017/ui-test2.xsl ） ，Chrome和Internet Explorer而不是内联脚本结果元素使用 ixsl：schedule-action 来调用模板然后使用 js：initDP ：
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>
Edge问题似乎与Saxon-JS和JQuery UI交互的问题无关它似乎是由当前Edge版本的Javascript引擎中的错误引起的，请参阅 https： //github.com/Microsoft/ChakraCore/issues/3366 ，这是Saxon-JS代码在检查错误的XML声明时遇到的问题。如果我删除XML输入和Saxon的SEF包文件中的XML声明，那么 https://martin-honnen.github.io/xslt/2017/ui-test4.html 在Edge中运行良好，以及Saxon-JS代码不会遇到Edge Javascript错误。
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.
这篇关于使用Saxon-JS及其全局Javascript函数命名空间在XSL中调用jQuery-UI组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
