2014-10-14 4 views
0

필드 ID, 이름, 수량 및 가격이있는 주문이있는 XML이 있습니다. ID를 사용자의 입력으로 사용하고 에서 XML을 검색하여 원하는 값을 표시하는 페이지를 만들려고합니다. 내 XML이 추가되었습니다하지만 ""아래 저를 허용하지 않는 한자바 스크립트를 사용하여 HTML에서 XSLT로 값 전달하기

내 XML :

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet type="text/xsl" href="Order.xsl"?> 
<orders> 
     <order> 
      <id>1</id> 
      <name>A</name> 
      <qty>5</qty> 
      <rate>10</rate> 
     </order> 
</orders> 

XSLT :

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/"> 
    <html> 
    <script type="text/javascript"> 
     function searchAcct() 
      { 
      AcctNum = document.getElementById("textbox1").value; 

      } 
    </script> 
    <body> 
    <form> 
     Enter Account Num# : <input type="text" name="textbox1" id="textbox1"></input> 
     <input type="submit" name="Submit" id="Submit" onclick="searchAcct()"></input> 
    </form>  
    <xsl:for-each select="orders/order"> 
     <xsl:if test="id = AcctNum"> 
      <xsl:value-of select="name"></xsl:value-of> 
      <xsl:value-of select="price"></xsl:value-of> 
     </xsl:if> 
    </xsl:for-each> 
    </body> 
    </html> 
</xsl:template> 
</xsl:stylesheet> 

나는 XML에 새로 온 사람과 XSLT 그렇게 수도 뭔가 잘못 코딩되었습니다 ... 제발 날 수정하십시오.

+0

이것은 올바른 접근 방법이 아니므로 걱정됩니다. XSLT를 사용하여 XML로부터 HTML을 생성하고 있지만, HTML이 생성 되 자마자 XSLT는 사실 잊어 버리게됩니다. HTML은 텍스트 편집기에서 손으로 입력 한 경우와 다르게 브라우저에서 처리됩니다. JavaScript는 사용자가 표시 한 방식으로 XSLT와 상호 작용할 수 없습니다. 당신이 취할 수있는 한 가지 접근법은'order' 아이템을 숨겨진'DIV' 태그로 렌더링하고, id id를 기반으로 idid 속성을 만든 다음 javascript를 사용하여 텍스트 상자에 입력 한 id에 따라 관련 div를 표시합니다 . –

+0

안녕하세요, Tim ... 답변 해 주셔서 감사합니다. 이것은 XML에서 HTML을 실행하려고 시도 할 때 XSLT 속성을 잊어 버린다는 것을 분명히합니다. 나는이 기술에 대해 아주 익숙하기 때문에 ID 속성을 사용하여 DIV 태그 개념을 정교하게 도울 수 있습니다. 시간이 허락한다면 ... 더 많은 것을 파헤 치려고 노력할 것입니다. – user3822147

답변

0

주석에서 언급했듯이 JavaScript는 사용자가 표시 한 방식으로 XSLT와 상호 작용할 수 없습니다. HTML이 XSLT에 의해 생성 되 자마자 XSLT는 효과적으로 잊어 버리고 텍스트 편집기에서 손으로 직접 입력 한 것과 다르게 HTML을 브라우저에서 처리합니다.

XML에서 xml-stylesheet 지시어를 사용하여 XML을 변환하는 경우 취할 수있는 한 가지 방법은 주문 ID를 기반으로하지만 스타일 속성이 설정된 ID 속성을 사용하여 모든 주문 항목을 DIV 태그로 렌더링하는 것입니다 그들을 숨기기 위해서. 그런 다음 자바 스크립트를 사용하여 텍스트 상자에 입력 한 ID를 기반으로 관련 div를 표시합니다.

선발로,이 비록 완전 거리가 멀다이

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" /> 

    <xsl:template match="/"> 
    <html> 
     <script type="text/javascript"> 
     function showAcct() 
      { 
      var id = document.getElementById("textbox1").value; 
      document.getElementById("orderDiv_" + id).style.display = "block"; 
      } 
     </script> 
     <body> 
      <form> 
      Enter Account Num# : <input type="text" name="textbox1" id="textbox1" /> 
      <input type="button" name="Submit" id="Submit" value="Show" onclick="showAcct()" /> 
      </form>  
      <xsl:for-each select="orders/order"> 
       <div id="orderDiv_{id}" style="display:none"> 
        <xsl:value-of select="name" /> 
        <br /> 
        <xsl:value-of select="price" /> 
       </div> 
      </xsl:for-each> 
     </body> 
    </html> 
    </xsl:template> 
</xsl:stylesheet> 

을 시도합니다. 표시된 이전 주문을 숨기지 않습니다. 또한 실제로 존재하는 텍스트 상자에 입력 된 값의 유효성을 검사하지 않지만 시작을 줄 수 있습니다.

+0

팀 .. 감사합니다. 톤! 이것은 완벽하게 작동하며 xml-stylesheet에 대한 통찰력을 제공합니다. 나는 분명히 여기서부터 앞으로 나아갈 것입니다. – user3822147

관련 문제