2017-07-14 4 views
1

thisに関連する質問はです。 Saxon-JSを使用してブラウザで実行されているXSL 2.0変換からJavascript関数を呼び出します。しかし、jQuery-UI呼び出しを呼び出すことはできません。私の唯一の考えは、Saxon-JSがDOMにまだレンダリングしていないため、jQueryセレクタがターゲットオブジェクトのIDを見つけることができないタイミング問題かもしれないということです。私の簡単なテストは、以下のSaxon-JSとそのグローバルJavascript関数名前空間を使用してXSLでjQuery-UIコンポーネントを呼び出しますか?

...

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> 

ザ・ジャバスクリプト...

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

両方initDP(jQueryの日付ピッカーを初期化)と同じにXSL呼び出しにHTMLを呼び出します。 HTMLが機能し、XSLが黙って失敗します。

+0

私はマイケルケイがどこかに出て助けてくれることを願っています。 – dacracot

答えて

1

あなたのようですxsl:value-of結果の要素が作成されるか、少なくともドキュメントに挿入される前にJavascript呼び出しが評価されます。

何私のために働いたことは、単にオンザフライでJavaScriptコードを作成し、inputscript結果要素を置くことです:

ファイルシステムからHTTP経由でとChromeとFirefoxで正常にテスト
<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> 

HTTP経由(デフォルトではChromeはファイルシステム上でXMLHttpRequestを実行しないため、ファイルシステム上のSaxon-JSは機能しません)。 EdgeはXSLTを実行していないようで、SaxonJS.min.js(1,11772)の2つの「SCRIPT5022:XError:Misplaced or malformed XML」エラーを表示します。IEはスタイルシートを実行するようですが、インラインスクリプトは実行されません。オンラインサンプルはhttps://martin-honnen.github.io/xslt/2017/ui-test1.htmlです。

私は今も成功インラインscript結果要素は、その後js:initDPを使用して、テンプレートを呼び出すためにixsl:schedule-actionを使用する代わりにFirefoxやChromeとInternet Explorerで異なるアプローチ(https://martin-honnen.github.io/xslt/2017/ui-test2.xsl)をテストしている:

<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が相互作用するための問題とは関係がないようですが、Saxon-JSコードが実行される現在のEdgeバージョンのJavascriptエンジンのバグ(https://github.com/Microsoft/ChakraCore/issues/3366参照)が原因です誤って配置されたXML宣言をチェックするとき。 XML入力とSaxonのSEFパッケージファイルのXML宣言を削除した場合、https://martin-honnen.github.io/xslt/2017/ui-test4.htmlはEdgeでうまく動作し、Saxon-JSコードはEdge Javascriptのバグには反映されません。

+0

私はそれがタイミングの問題だと思っていましたが、スクリプト呼び出しをインライン化するのは私には起こりませんでした。ありがとう。 – dacracot

関連する問題