跳转到主要内容

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

当您初次登录到 developerWorks 时，将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人，但您可以随时修改这些信息的显示状态。您的姓名（除非选择隐藏）和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

  • 关闭 [x]

当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

所有提交的信息确保安全。

  • 关闭 [x]

选择语言：

  • 关闭 [x]
  • 关闭 [x]

XForms 技巧: 从 XForms 表单调用 JavaScript

Nicholas Chase (ibmquestions@nicholaschase.com), 自由撰稿人, Backstop Media
Nicholas Chase 参与过 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers 等很多公司网站的开发。Nick 曾当过高中物理教师、低放射性废弃设备管理人员、在线科幻杂志编辑、多媒体工程师、Oracle 讲师和一家交互通信公司的首席技术管。他出版了多部著作，其中包括 XML Primer Plus (Sams)。

简介： XForms 控件是独立于 HTML 和页面的名称空间的一部分，因此不能使用常见方法来调用 JavaScript ™ 以响应用户事件，例如 onclick 处理程序。那么如果需要从 XForms 表单调用 JavaScript 时，您该怎么办？本文的技巧将展示如何实现此目的。

查看本系列更多内容

发布日期： 2007 年 10 月 25 日
级别： 中级
访问情况 ： 2323 次浏览
评论： 


开始之前：有关该技巧的注意事项

该技巧特定于特殊的任务。有关 XForms 的背景信息，请参阅共分三部分的系列文章 XForms 简介。

本技巧中所描述的 XForms 示例已经过测试，可用于 Firefox 1.5（安装了 XForms 扩展）以及安装了 Formsplayer 控件的 Microsoft® Internet Explorer 6。下载 部分包含了用于 Firefox 的 XHTML 文件和用于 IE 的 HTML 文件。

回页首

基本表单

通过使用触发器和操作，XForms 提供了一种轻松为表单添加互操作性的方法，但在大多数情况下，那些操作是与 XForms 相关的操作。该技巧中将构建包含按钮的表单，单击该按钮将执行 JavaScript。我们从基本表单开始讨论（清单 1）。


清单 1. 基本表单
                
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>

    <xforms:model id="auctionItems">
      <xforms:instance id="auctions" src="auctions.xml"/>
      <xforms:submission id="submit_model_auctionItems"
                         action="http://xformstest.org/cgi-bin/showinstance.sh"
                         method="post" instance="auctions"/>
    </xforms:model>
    <link href="gen_default.css" rel="stylesheet"/>
  </head>
  <body>
    
    <h1 align="center" id="myTest">Auction Item Inventory</h1>
    
    <xforms:repeat nodeset="instance('auctions')/auctionItem"
 id="repeatAuctionItems">
      <h2 align="center">Auction Item</h2>
      <xforms:input ref="@itemID">
        <xforms:label>Item ID</xforms:label>
      </xforms:input>
      <xforms:input ref="purchaseDate">
        <xforms:label>Purchase Date</xforms:label>
      </xforms:input>
      <xforms:input ref="auctionLength">
        <xforms:label>Auction Length</xforms:label>
      </xforms:input>
      <xforms:input ref="purchasePrice">
        <xforms:label>Purchase Price</xforms:label>
      </xforms:input>

      <xforms:input ref="description">
        <xforms:label>Description</xforms:label>
      </xforms:input>
      <xforms:input ref="estimatedValue">
        <xforms:label>Estimated Value</xforms:label>
      </xforms:input>
    </xforms:repeat>

    <xforms:group>

      <xforms:trigger>
        <xforms:label>Show action</xforms:label>
      </xforms:trigger>

      <xforms:trigger>
        <xforms:label>Insert Auction Item</xforms:label>
        <xforms:insert nodeset="instance('auctions')/auctionItem"
 at="index('repeatAuctionItems')"
                       position="after" ev:event="DOMActivate" />
      </xforms:trigger>
      <xforms:trigger>
        <xforms:label>Delete Auction Item</xforms:label>
        <xforms:delete nodeset="instance('auctions')/auctionItem"
 at="index('repeatAuctionItems')"
                       ev:event="DOMActivate" />
      </xforms:trigger>
    </xforms:group>

    <xforms:submit submission="submit_model_auctionItems">
      <xforms:label>Submit</xforms:label>
    </xforms:submit>

  </body>
</html>

此表单包括一个用来展示操作的按钮，将把表单提交给该操作，如图 1 所示。


图 1. 带有 Show action 按钮的表单
图 1. 带有 Show action 按钮的表单

为此，从创建实际脚本开始（清单 2）。


清单 2. JavaScript
                
...
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>

    <xforms:model id="auctionItems">
      <xforms:instance id="auctions" src="auctions.xml"/>
      <xforms:submission id="submit_model_auctionItems"
                         action="http://xformstest.org/cgi-bin/showinstance.sh"
                         method="post" instance="auctions"/>
    </xforms:model>
    <link href="gen_default.css" rel="stylesheet"/>

    <script type="text/javascript">
                var testJS= function()
                {
                alert('This form submits to: '+
                document.getElementById('submit_model_auctionItems')
                 .getAttribute('action'));
                 }      
                 </script>

  </head>
  <body>
...

该脚本是 JavaScript，但是它通过标准 DOM 方法与 XForms 表单进行交互。

现在需要一种调用脚本的方法。

回页首

载入 URL

XForms load 元素与 HTML 链接非常相似，因为它告知浏览器在现有窗口或新窗口中载入资源。幸运的是，这意味着可以使用它来调用 URL。因为可以将 JavaScript 作为 URL 进行引用，因此说幸运。您可能会错误地认为可以采用下面的方式来设置它（清单 3）。


清单 3. 载入 JavaScript 的错误方式
                
...
      <xforms:trigger>
        <xforms:label>Show action</xforms:label>
        <xforms:load ref="javascript:testJS()" ev:event="DOMActivate"/>
      </xforms:trigger>
...

事实上，不能使用上面这种方式进行设置，因为 ref 属性只能接受 XPath 表达式。有一种相当简单的方法可摆脱该问题的困扰（清单 4）。


清单 4. 载入 JavaScript 的正确方式
                
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>

    <xforms:model id="auctionItems">
      <xforms:instance id="auctions" src="auctions.xml"/>
      <xforms:instance id="data">
                <data url="javascript:testJS()"/>
                </xforms:instance>
      <xforms:submission id="submit_model_auctionItems"
                         action="http://xformstest.org/cgi-bin/showinstance.sh"
                         method="post" instance="auctions"/>
    </xforms:model>
 ...
    </xforms:repeat>

    <xforms:group>

      <xforms:trigger>
        <xforms:label>Show action</xforms:label>
        <xforms:load ref="instance('data')/@url"
                ev:event="DOMActivate"/>
      </xforms:trigger>

      <xforms:trigger>
        <xforms:label>Insert Auction Item</xforms:label>
        <xforms:insert nodeset="instance('auctions')/auctionItem"
 at="index('repeatAuctionItems')"
                       position="after" ev:event="DOMActivate" />
      </xforms:trigger>
...

现在 ref 属性包含了 XPath 表达式。该 XPath 表达式指向引用脚本的 URL，因此单击按钮将给出所需结果，如图 2 所示。


图 2. 单击按钮给出所需结果
单击按钮给出所需结果

回页首

结束语

使用 load 元素，可以执行任何 URL。但为了实现此目的，URL 必须包含在数据实例中，这样 load 元素的 ref 属性将包含 XPath 表达式。在那里，URL 指向实际的 JavaScript。还要注意，这意味着您可以执行任何有意义的 JavaScript 脚本，甚至可使之与页面上的 XForms 元素和属性进行交互。


回页首

下载

描述名字大小下载方法
调用 JavaScript XForms 示例calljs_source.zip4KBHTTP

关于下载方法的信息


参考资料

学习

获得产品和技术

  • 获取 MozzIE，它是一个可以在 IE 中呈现 XForms 的开源控件。

讨论

关于作者

Nicholas Chase 参与过 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers 等很多公司网站的开发。Nick 曾当过高中物理教师、低放射性废弃设备管理人员、在线科幻杂志编辑、多媒体工程师、Oracle 讲师和一家交互通信公司的首席技术管。他出版了多部著作，其中包括 XML Primer Plus (Sams)。

关闭 [x]

关于报告滥用的帮助

报告滥用

谢谢! 此内容已经标识给管理员注意。

关闭 [x]

关于报告滥用的帮助

报告滥用

报告滥用提交失败。 请稍后重试。

关闭 [x]

developerWorks：登录


需要一个 IBM ID？
忘记 IBM ID？


忘记密码？
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 使用条款

 

当您初次登录到 developerWorks 时，将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人，但您可以随时修改这些信息的显示状态。您的姓名（除非选择隐藏）和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

关闭 [x]

请选择您的昵称：

当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。

（长度在 3 至 31 个字符之间）

单击提交则表示您同意developerWorks 的条款和条件。 使用条款.

 

所有提交的信息确保安全。

为本文评分

评论

回页首

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=XML
ArticleID=264706
ArticleTitle=XForms 技巧: 从 XForms 表单调用 JavaScript
publish-date=10252007
author1-email=ibmquestions@nicholaschase.com
author1-email-cc=dwxed@us.ibm.com

内容

标签

Help
使用 搜索 文本框在 My developerWorks 中查找包含该标签的所有内容。

使用 滑动条 调节标签的数量。

热门标签 显示了特定专区最受欢迎的标签（例如 Java technology，Linux，WebSphere）。

我的标签 显示了特定专区您标记的标签（例如 Java technology，Linux，WebSphere）。

使用搜索文本框在 My developerWorks 中查找包含该标签的所有内容。热门标签 显示了特定专区最受欢迎的标签（例如 Java technology，Linux，WebSphere）。我的标签 显示了特定专区您标记的标签（例如 Java technology，Linux，WebSphere）。

 

分享此页面：

  • 关闭 [x]

分享此页面：

  • 关闭 [x]