При первом входе в developerWorks для Вас будет создан профиль. Выберите информацию отображаемую в Вашем профиле — скрыть или отобразить поля можно в любой момент.

Вся введенная информация защищена.

При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Вся введенная информация защищена.

My developerWorks:

Сообщения:

Выйти

Выбрать язык:

Совет по XForms: Вызов JavaScript из формы XForms

Николас Чейз, независимый автор, Backstop Media

Николас Чейз (Nicholas Chase) разрабатывает Web-сайты для таких компаний как Lucent Technologies, Sun Microsystems, Oracle и Tampa Bay Buccaneers. Он работает школьным учителем по физике, менеджером по низкоуровневой утечке радиоактивности, редактором интерактивного журнала по научной фантастике, инженером мультимедийных средств, инструктором по Oracle, директором по технологии компании, специализирующейся на интерактивных взаимодействиях. Является автором нескольких книг, включая "XML Primer Plus".

Описание: Так как элементы управления XForms являются частью пространства имен, отделенного от HTML и страницы, вы не можете использовать обычные методы для вызова JavaScript. Так что делать, если вам нужно вызвать JavaScript из формы XForms? Эта статья показывает, как это сделать.

Больше статей из этой серии

Пометить это!

Дата: 10.07.2007
Уровень сложности: средний
Активность: 2634 просмотров
Комментарии:

Прежде, чем вы начнете: замечания по этой статье

Эта стаья создана для конкретной задачи. Для дополнительной информации по XForms читайте цикл из трех статей Введение в XForms.

Примеры XForms, описанные в данном совете, протестированы и работают с браузерами Firefox 1.5 (с установленным расширением XForms) и Microsoft® Internet Explorer 6 с установленным элементом управления Formsplayer. Раздел загрузка содержит XHTML-файл для Firefox и HTML-файл для IE.

В начало

Базовая форма

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

Чтобы сделать это, начните с создания фактического кода (листинг 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, но он взаимодействует с XForms через простые методы DOM.

Теперь вам нужен способ вызова кода.

В начало

Загрузка 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 должен содержаться в экземпляре данных, чтобы атрибут ref элемента load содержал выражение XPath. Оттуда URL указывает на фактический JavaScript. Также учтите - это означает, что вы можете выполнить произвольный корректный JavaScript, в том числе если он взаимодействует с элементами и атрибутами XForms на странице.

В начало

Загрузка

Описание	Имя	Размер	Метод загрузки
Примеры вызова JavaScript из XForms	calljs_source.zip	4KB	HTTP

Информация о методах загрузки

Ресурсы

Научиться

Оригинал статьи XForms tip: Call JavaScript from an XForms form.
Пусть Skimstone объяснит вам, что такое XForms.
Посмотрите Skimstone введение в XForms.
Чтобы больше узнать о других возможных типах схем ввода в XForms, прочитайте w3cschools.
Данный цикл является хорошим гидом для начала использования XForms.
Начните с этой ссылки, чтобы узнать больше о Visual XForms Designer от alphaWorks.
В разделе XML на developerWorks вы найдете ресурсы, необходимые для развития навыков в XForms и других XML технологиях.
Посетите магазин технической литературы, чтобы найти книги на эти и другие технические темы.