使用 Saxon-JS 及其全局 Javascript 函数命名空间在 XSL 中调用 jQuery-UI 组件？

Question

关于 this 问题，您可以从 XSL 2.0 调用 Javascript 函数，在浏览器中使用 Saxon-JS 转换运行。但我似乎无法调用 jQuery-UI 调用。我唯一的想法是，jQuery 选择器找不到目标对象的 ID 可能是一个时间问题，因为 Saxon-JS 尚未将其呈现给 DOM.

我的简单测试如下...

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...

//=====================================
function initDP(id,init)
    {
    $(id).datepicker();
    $(id).datepicker("setDate",init);
    } 
//=====================================
$(document).ready(function()
    {
    SaxonJS.transform({
        stylesheetLocation: "test.sef.xml",
        sourceLocation: "test.xml"
        });
    });
//=====================================

包括对 initDP（初始化 jQuery 日期选择器）的 HTML 调用和对其的 XSL 调用。 HTML 有效，XSL 无声地失败。

Answer 1

您的 xsl:value-of Javascript 调用似乎在结果元素创建或至少插入文档之前被评估。

对我有用的是简单地在 input 之后放置一个 script 结果元素，即时创建 Javascript 代码：

<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 通过 HTTP 成功测试（Chrome 默认情况下不通过文件系统执行 XMLHttpRequest，因此 Saxon-JS 通过文件系统不起作用）。 Edge 似乎没有执行 XSLT，并在 SaxonJS.min.js (1,11772) 中给出了两个 "SCRIPT5022: XError: Misplaced or malformed XML" 错误，IE 似乎执行了样式表，但似乎没有执行内联脚本。 https://martin-honnen.github.io/xslt/2017/ui-test1.html.

在线示例

我现在还使用 Firefox、Chrome 和 Internet Explorer 成功测试了一种不同的方法 (https://martin-honnen.github.io/xslt/2017/ui-test2.xsl)，该方法使用 ixsl:schedule-action 而不是内联 script 结果元素调用一个模板，然后使用 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 交互的问题无关，相反它似乎是由 Javascript 中的错误引起的当前 Edge 版本的引擎，请参阅 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 在 Edge 中工作正常以及 Saxon-JS 代码不会运行进入 Edge Javascript 错误。

使用 Saxon-JS 及其全局 Javascript 函数命名空间在 XSL 中调用 jQuery-UI 组件？

Calling jQuery-UI components in XSL using Saxon-JS and its global Javascript function namespace?

javascript

xslt

jquery-ui

saxon

saxon-js