XForms/Search with Load

Motivation

You want to build a web form that does a search using the xf:load element. This allows you to rewrite the URL to the search application.

↑Jump back a section

Source Code

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms" 
    xmlns:ev="http://www.w3.org/2001/xml-events" >
    <title>Example of XForms Search with xf:load</title>
    <style type="text/css">  
        body {font-family: Helvetica, sans-serif}    
    </style>
    <xf:model>
        <xf:instance xmlns="" id="search-params">
            <data>
                <url>http://www.example.com/search?q=</url>
                <q></q>
            </data>
        </xf:instance>
 
        <!-- put the cursor in the first field when the form becomes ready -->
        <xf:action ev:event="xforms-ready">
            <xf:setfocus control="search-field"/>
        </xf:action>
 
    </xf:model>
    <body>
        <h1>Example of XForms Search with xf:load</h1>
        <xf:input ref="q" id="search-field" incremental="true">
            <xf:label>Enter search string:</xf:label>
            <xf:action ev:event="DOMActivate">
                <xf:load show="replace">
                    <xf:resource value="concat(url, q)"/>
                </xf:load>
            </xf:action>
        </xf:input>
 
        <xf:trigger>
            <xf:label>Execute Search</xf:label>
            <xf:action ev:event="DOMActivate">
                <xf:load show="replace">
                    <xf:resource value="concat(url, q)"/>
                </xf:load>
            </xf:action>
        </xf:trigger>
 
    </body>
</html>
↑Jump back a section

Discussion

Note that you must use the xf:value attribute of the resource element.

↑Jump back a section
Last modified on 27 October 2009, at 03:51