root / trunk / tests / io / test_BrowserIO.method.html

Revision 2910, 5.5 kB (checked in by david, 3 years ago)

dojo core shake down + reorg
***WARNING*** this may break people!

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3<head>
4<title>Test dojo.io.bind()</title>
5<style>
6        .value  { background-color: #FFFFC0; }
7        .hilite { background-color: #FFC0C0; }
8</style>
9<script language="JavaScript" type="text/javascript">
10        // Dojo configuration
11        djConfig = {
12                isDebug: true
13        };
14</script>
15<script language="JavaScript" type="text/javascript" src="../../dojo.js"></script>
16<script language="JavaScript" type="text/javascript">
17
18        dojo.require("dojo.io.*");
19        dojo.require("dojo.io.IframeIO");
20        dojo.require("dojo.event.*");
21
22        methodWatcher = function(){
23                var     m = dojo.byId("method");
24                var     f = dojo.byId("form");
25                switch(m.value){
26                        case "post":
27                                f.method = "post";
28                                if(f.encoding){
29                                        f.encoding = "application/x-www-form-urlencoded";
30                                }else{
31                                        f.enctype = "application/x-www-form-urlencoded";
32                                }
33                                break;
34                        case "postx":
35                                f.method = "post";
36                                if(f.encoding){
37                                        f.encoding = "multipart/form-data";
38                                }else{
39                                        f.enctype = "multipart/form-data";
40                                }
41                                break;
42                        default: // get
43                                f.method = "get";
44                                break;
45                }
46        }
47
48        var useDojo = false;
49
50        transportWatching = function(){
51                var     t = dojo.byId("transport");
52                switch(t.value){
53                        case "dojo":
54                                useDojo = true;
55                                break;
56                        default:
57                                useDojo = false;
58                                break;
59                }
60        }
61
62        submitForm = function(e){
63                if(!useDojo){ return; }
64                e.preventDefault();
65                var meth = "GET";
66                var part = false;
67                var     m = dojo.byId("method");
68                switch(m.value){
69                        case "post":
70                                meth = "POST";
71                                break;
72                        case "postx":
73                                meth = "POST";
74                                part = true;
75                                break;
76                }
77                var kw = {
78                        url:            "reflector.cgi",
79                        content:        { inline: "yes" },
80                        formNode:       dojo.byId("form"),
81                        load:           function(type, data)    { dojo.byId("result").innerHTML = data; },
82                        error:          function(type, error)   { alert(String(type) + "\n" + String(error)); },
83                        method:         meth,
84                        multipart:      part
85                };
86                if(part){
87                        kw.file = [
88                                { name: "file1", fileName: "file1.txt", content: dojo.byId("sim1").innerText },
89                                { name: "file2", content: dojo.byId("sim2").innerText, contentType: "text/plain" }
90                        ];
91                }
92                dojo.io.bind(kw);
93        }
94
95        dojo.addOnLoad(function() {
96                methodWatcher();
97                dojo.event.connect(dojo.byId("method"), "onchange", "methodWatcher");
98                transportWatching();
99                dojo.event.connect(dojo.byId("transport"), "onchange", "transportWatching");
100                dojo.event.connect(dojo.byId("form"), "onsubmit", "submitForm");
101        });
102
103</script>
104</head>
105<body>
106<h1>Test dojo.io.bind()</h1>
107<p>This page tests different post methods of <tt>dojo.io.bind()</tt> and
108compare them with conventional form submitting.</p>
109
110<h2>Select method and transport</h2>
111<fieldset><table><tbody>
112        <tr><td>Method:</td><td><select id="method" NAME="method">
113                <option value="get">GET</option>
114                <option value="post">POST</option>
115                <option value="postx">POST; multipart/form-data</option>
116        </select></td></tr>
117        <tr><td>Transport:</td><td><select id="transport" NAME="method">
118                <option value="int">Browser</option>
119                <option value="dojo">Dojo</option>
120        </select></td></tr>
121</tbody></table></fieldset>
122
123<h2>Submit a form</h2>
124<p>If you submit this form using Dojo, you can see results below. Otherwise you will be redirected to results screen.</p>
125<fieldset>
126        <form id="form" action="reflector.cgi">
127                <table><tbody>
128                        <tr><td><label for="text">text:</label></td><td><input type="text" id="text" name="text" /></td></tr>
129                        <tr><td><label for="password">password:</label></td><td><input type="password" id="password" name="password" /></td></tr>
130                        <tr><td>radio:</td>
131                                <td>
132                                        <input type="radio" id="radio1" name="radio" value="radio1" checked /><label for="radio1">radio1</label>
133                                        <input type="radio" id="radio2" name="radio" value="radio2" /><label for="radio2">radio2</label>
134                                </td>
135                        </tr>
136                        <tr><td>checkbox:</td>
137                                <td>
138                                        <input type="checkbox" id="check" name="check" value="check" /><label for="check">check</label>
139                                </td>
140                        </tr>
141                        <tr><td><label for="select">select:</label></td>
142                                <td><select id="select" name="select">
143                                        <option value="select1" selected>select1</option>
144                                        <option value="select2">select2</option>
145                                </select></td>
146                        </tr>
147                        <tr><td><label for="textarea">textarea:</label></td><td><textarea id="textarea" name="textarea"></textarea></td></tr>
148                        <!--<tr><td><label for="file">file:</label></td><td><input type="file" id="file" name="file" /></td></tr>-->
149                </tbody></table>
150                <p><input type="hidden" id="hidden" name="hidden" value="nidden" />
151                <input type="submit" value="Submit" id="submit" name="submit"/>&nbsp;
152                <input type="reset" value="Reset" id="reset" name="reset" /></p>
153        </form>
154        <p>Following simulated files will be submitted only by Dojo transport.<br/>
155        File #1 is submitted with following parameters: <tt>name="file1" fileName="file1.txt"</tt>.<br/>
156        File #2 is submitted with following parameters: <tt>name="file2" contentType="text/plain"</tt>.</p>
157        <p><label for="sim1">Simulated file #1:</label><br/><textarea id="sim1" name="sim1"></textarea></p>
158        <p><label for="sim2">Simulated file #2:</label><br/><textarea id="sim2" name="sim2"></textarea></p>
159</fieldset>
160
161<h2>Traditional file submit form</h2>
162<p>This is a static form with <tt>method="post" enctype="multipart/form-data"</tt> options.</p>
163<fieldset><form action="reflector.cgi" method="post" enctype="multipart/form-data">
164        <p>
165                <label for="file">file:</label>&nbsp;
166                <input type="file" id="file" name="file" />
167        </p>
168        <p><input type="submit" value="Submit" id="submit2" name="submit2" /></p>
169</form></fieldset>
170
171<h2>Check results</h2>
172<p>If the form was submitted asynchronously by Dojo, you will see results below.</p>
173<hr/>
174<div id="result"></div>
175
176</body>
177</html>
Note: See TracBrowser for help on using the browser.