| 1 |
<response> |
| 2 |
<action type='html'> |
| 3 |
<a name='examples' /> |
| 4 |
<h2>Examples</h2> |
| 5 |
<p> |
| 6 |
IWF has been designed from the ground up to allow for a "typical" web developer to be able to |
| 7 |
harness its power without changing his or her methodologies drastically. For instance, you would |
| 8 |
still fill out anchor tag <code>href</code> attributes, form tag <code>onsubmit</code> attributes, |
| 9 |
form control tag (aka <code><input></code>, <code><textarea></code>, <code><select></code>) |
| 10 |
<code>onclick</code> attributes, etc. |
| 11 |
</p> |
| 12 |
<h3>Basic Link Navigation (<code><a href=''></code>)</h3> |
| 13 |
<p> |
| 14 |
To make the browser download new data into a portion of the page (instead of refreshing the entire page), |
| 15 |
simply wrap the url in a javascript call to <code>iwfRequest</code>: |
| 16 |
</p> |
| 17 |
<pre> |
| 18 |
<html> |
| 19 |
<head> |
| 20 |
<b> |
| 21 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 22 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 23 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 24 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 25 |
</b> |
| 26 |
</head> |
| 27 |
<body> |
| 28 |
<div id='iwfContent' /> |
| 29 |
<b><a href='javascript:iwfRequest("iwfexample2.xml");'>Get Info</a></b> |
| 30 |
</body> |
| 31 |
</html> |
| 32 |
</pre> |
| 33 |
<p> |
| 34 |
One of the first things you will notice are the javascript files you must include for IWF to work. |
| 35 |
These javascript files are somewhat large -- about 20k each. This is roughly the size of a logo image, |
| 36 |
if you want to put it into perspective with the size of a typical webpage. |
| 37 |
</p> |
| 38 |
<p> |
| 39 |
You'll notice the call to <code>iwfRequest</code> is relatively simple: just specify the url you wish to request. |
| 40 |
</p> |
| 41 |
<p> |
| 42 |
So the question is, what does it do with the response? The answer is: it depends. |
| 43 |
</p> |
| 44 |
<p> |
| 45 |
Both the client and the server can control where content is placed after a response is received. If the client specifies a target, the server target in the xml is ignored. |
| 46 |
In our example, no target is specified in our call to |
| 47 |
<code>iwfRequest</code>, and assuming the xml response from the server doesn't contain a target, the IWF default target of <code>iwfContent</code> is used. |
| 48 |
If there is no element with the id that matches the target (default or not), IWF will <code>alert</code> an error. |
| 49 |
</p> |
| 50 |
<h4>Populate A Specific Element</h4> |
| 51 |
<p> |
| 52 |
Now let's push the response into a specific element instead of the default one. We'll use the <code>id</code> of |
| 53 |
<code>responseGoesHere</code>: |
| 54 |
</p> |
| 55 |
<p> |
| 56 |
All we need to do is specify the second parameter of the |
| 57 |
<code>iwfRequest</code> function, which is the id of the element into which we are to push the response. |
| 58 |
</p> |
| 59 |
<p> |
| 60 |
<pre> |
| 61 |
<html> |
| 62 |
<head> |
| 63 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 64 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 65 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 66 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 67 |
</head> |
| 68 |
<body> |
| 69 |
<div id='iwfContent' /> |
| 70 |
<b><div id='responseGoesHere' /></b> |
| 71 |
<a href='javascript:return iwfRequest("iwfexample2.xml"<b>, "responseGoesHere"</b>);'>Get Info</a> |
| 72 |
</body> |
| 73 |
</html> |
| 74 |
</pre> |
| 75 |
</p> |
| 76 |
|
| 77 |
<h3>Form Submission via <code><input type='submit'></code></h3> |
| 78 |
<p> |
| 79 |
When a form control object, a form object, or a form name is passed to <code>iwfRequest</code> it reads the |
| 80 |
values from the <code><form></code> tag to get the <code>action</code>, <code>method</code>, and <code>enctype</code> (or <code>encoding</code>) to determine how to perform |
| 81 |
its request. IWF is simply emulating the default behavior any browser would when submitting a form, so the coding habits |
| 82 |
transfer from "normal" websites well. |
| 83 |
</p> |
| 84 |
<h4>Populate Default Element</h4> |
| 85 |
<p> |
| 86 |
The following |
| 87 |
code will post the form in the background when the user clicks the submit button, then fill the results into the IWF default |
| 88 |
<code><div id='iwfContent' /></code> element: |
| 89 |
<pre> |
| 90 |
<html> |
| 91 |
<head> |
| 92 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 93 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 94 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 95 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 96 |
</head> |
| 97 |
<body> |
| 98 |
<div id='iwfContent' /> |
| 99 |
<form name='frmExample' action='iwfexample.xml' method='post' <b>onsubmit='javascript:return iwfRequest(this);'</b>> |
| 100 |
<input type='hidden' value='this is posted' name='hidPosted' /> |
| 101 |
<input type='submit' name='btnSubmit' value='Submit' /> |
| 102 |
</form> |
| 103 |
</body> |
| 104 |
</html> |
| 105 |
</pre> |
| 106 |
</p> |
| 107 |
<p> |
| 108 |
You may notice the <code><form></code> tag's <code>onsubmit</code> attribute. |
| 109 |
Previously, we passed a url as the first parameter -- now we're passing the <code>form</code> object. |
| 110 |
IWF detects what is being passed and creates the details of the http request to send automatically. |
| 111 |
</p> |
| 112 |
<h4>Populate Specfic Element</h4> |
| 113 |
<p> |
| 114 |
Now, should we want to populate a specific element other than the default of <code>iwfContent</code>, |
| 115 |
say one named <code>responseGoesHere</code>: |
| 116 |
</p> |
| 117 |
<p> |
| 118 |
<pre> |
| 119 |
<html> |
| 120 |
<head> |
| 121 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 122 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 123 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 124 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 125 |
</head> |
| 126 |
<body> |
| 127 |
<div id='iwfContent' /> |
| 128 |
<b><div id='responseGoesHere' /></b> |
| 129 |
<form name='frmExample' action='iwfexample.xml' method='post' onsubmit='javascript:return iwfRequest(this<b>, "responseGoesHere"</b>);'> |
| 130 |
<input type='hidden' value='this is posted' name='hidPosted' /> |
| 131 |
<input type='submit' name='btnSubmit' value='Submit' /> |
| 132 |
</form> |
| 133 |
</body> |
| 134 |
</html> |
| 135 |
</pre> |
| 136 |
</p> |
| 137 |
<h3>Form Submission via a button click / checkbox change / etc</h3> |
| 138 |
<p> |
| 139 |
You may want submit a form on user input that is not clicking the "submit" button. In traditional websites, |
| 140 |
this was done using <code>form.submit()</code> or something similar. IWF supports this kind of functionality in |
| 141 |
much the same way as it does with using the "submit" button -- you must call <code>iwfRequest(this)</code>. |
| 142 |
</p> |
| 143 |
<p> |
| 144 |
IWF is able to determine that the request is being called from a form control element and not a form element. |
| 145 |
It then can determine the form which contains that element, parse that form's contents, etc. So the API for doing |
| 146 |
this type of form submittal is identical to the original type. It is important to note, that like the traditional |
| 147 |
<code>form.submit()</code>, submitting forms using <code>iwfRequest(this)</code> from a form control element does <b>not</b> |
| 148 |
cause the <code>form.onsubmit</code> event to be called. Again, this reflects the traditional browser behavior, not necessarily |
| 149 |
the ideal behavior. |
| 150 |
</p> |
| 151 |
<h4>Populate Default Element</h4> |
| 152 |
<p> |
| 153 |
<pre> |
| 154 |
<html> |
| 155 |
<head> |
| 156 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 157 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 158 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 159 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 160 |
</head> |
| 161 |
<body> |
| 162 |
<div id='iwfContent' /> |
| 163 |
<form name='frmExample' action='iwfexample.xml' method='post' onsubmit='<b>THIS IS NEVER CALLED</b>'> |
| 164 |
<input type='hidden' value='this is posted' name='hidPosted' /> |
| 165 |
<b><input type='button' name='btnGo' value='Go' onclick='javascript:return iwfRequest(this);' /></b> |
| 166 |
</form> |
| 167 |
</body> |
| 168 |
</html> |
| 169 |
</pre> |
| 170 |
</p> |
| 171 |
<h4>Populate Specfic Element</h4> |
| 172 |
<p> |
| 173 |
<pre> |
| 174 |
<html> |
| 175 |
<head> |
| 176 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 177 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 178 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 179 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 180 |
</head> |
| 181 |
<body> |
| 182 |
<div id='iwfContent' /> |
| 183 |
<b><div id='responseGoesHere' /></b> |
| 184 |
<form name='frmExample' action='iwfexample.xml' method='post' onsubmit='<b>THIS IS NEVER CALLED</b>'> |
| 185 |
<input type='hidden' value='this is posted' name='hidPosted' /> |
| 186 |
<input type='button' name='btnGo' value='Go' onclick='javascript:return iwfRequest(this<b>, "responseGoesHere"</b>);' /> |
| 187 |
</form> |
| 188 |
</body> |
| 189 |
</html> |
| 190 |
</pre> |
| 191 |
|
| 192 |
</p> |
| 193 |
<h3>Form Submission via Link Navigation <code><a href=''></code></h3> |
| 194 |
<p> |
| 195 |
IWF also supports submitting forms via a hyperlink. Again, it uses the familiar <code>iwfRequest</code> function, |
| 196 |
but now the <code>name</code> of the form must be passed, as a hyperlink is not considered to be a child of the <code><form></code> |
| 197 |
in which it resides. |
| 198 |
</p> |
| 199 |
<h4>Populate Default Element</h4> |
| 200 |
<p> |
| 201 |
<pre> |
| 202 |
<html> |
| 203 |
<head> |
| 204 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 205 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 206 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 207 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 208 |
</head> |
| 209 |
<body> |
| 210 |
<div id='iwfContent' /> |
| 211 |
<form name='frmExample' action='iwfexample.xml' method='post' onsubmit='<b>THIS IS NEVER CALLED</b>'> |
| 212 |
<input type='hidden' value='this is posted' name='hidPosted' /> |
| 213 |
<b><a href='javascript:return iwfRequest("frmExample");'>Go</a></b> |
| 214 |
</form> |
| 215 |
</body> |
| 216 |
</html> |
| 217 |
</pre> |
| 218 |
</p> |
| 219 |
|
| 220 |
|
| 221 |
|
| 222 |
<p> |
| 223 |
When the "Go" link is clicked, IWF will search the current page for a form named "frmExample". |
| 224 |
If it finds one, it assumes the string is the name of a form and submits it. If it cannot find |
| 225 |
one, it assumes "frmExample" is a url and requests it from the server. |
| 226 |
|
| 227 |
<h4>Populate Specfic Element</h4> |
| 228 |
<p> |
| 229 |
Again, all we need to do is to specify the target in the call to <code>iwfRequest</code>: |
| 230 |
</p> |
| 231 |
<p> |
| 232 |
<pre> |
| 233 |
<html> |
| 234 |
<head> |
| 235 |
<script type='text/javascript' src='iwfcore.js'></script> |
| 236 |
<script type='text/javascript' src='iwfgui.js'></script> |
| 237 |
<script type='text/javascript' src='iwfxml.js'></script> |
| 238 |
<script type='text/javascript' src='iwfajax.js'></script> |
| 239 |
</head> |
| 240 |
<body> |
| 241 |
<div id='iwfContent' /> |
| 242 |
<b><div id='responseGoesHere' /></b> |
| 243 |
<form name='frmExample' action='iwfexample.xml' method='post' onsubmit='<b>THIS IS NEVER CALLED</b>'> |
| 244 |
<input type='hidden' value='this is posted' name='hidPosted' /> |
| 245 |
<b><a href='javascript:return iwfRequest("frmExample", "responseGoesHere");' /></b> |
| 246 |
</form> |
| 247 |
</body> |
| 248 |
</html> |
| 249 |
</pre> |
| 250 |
</p> |
| 251 |
|
| 252 |
|
| 253 |
<p> |
| 254 |
NOTE: Experienced |
| 255 |
DHTML coders will notice that <code>iwfRequest</code> returns different values when it is called with a string for the first argument than otherwise: |
| 256 |
Specifying a string causes <code>iwfRequest</code> to return absolutely no value. This is because clicking an anchor tag causes the browser to navigate to the result of the <code>href</code>, which we do not want to happen. |
| 257 |
If no value is returned from the <code>href</code>, the browser does nothing. |
| 258 |
So in our anchor tag example, <code>iwfRequest</code> returns absolutely nothing. However, in our form submission example, <code>iwfRequest</code> returns |
| 259 |
the value <code>false</code> to prevent the browser from actually submitting the form, as <code>iwfRequest</code> is doing so |
| 260 |
in the background. |
| 261 |
</p> |
| 262 |
</action> |
| 263 |
</response> |
Parent Directory
| 
Revision Log