XForms/Search with Load
Appearance
< XForms
Motivation
[edit | edit source]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.
Source Code
[edit | edit source]<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>
Discussion
[edit | edit source]Note that you must use the xf:value attribute of the resource element.