Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Element Configuration</title>
</head>
<body>
Rafael Ostertag
committed
<label>Refresh URL
<select name="refreshUrl" id="refreshUrl">
<option>404 error</option>
<option>form_refresh.json</option>
<option>form_refresh_error.json</option>
</select>
</label>
<div style="float: right">
<pre id="sample">
Rafael Ostertag
committed
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
[
{
"form-element": "text",
"value": "value. Now its enabled",
"disabled": false,
"readonly": true
},
{
"form-element": "select",
"value": [
{
"value": 100,
"text": "a",
"selected": true
},
{
"value": 200,
"text": "b",
"selected": false
}
]
},
{
"form-element": "radio",
"value": "a",
"disabled": false
},
{
"form-element": "checkbox",
"value": true,
"readonly": true
},
{
"form-element": "trigger",
"value": false
}
]
</pre>
<button id="copy">Copy</button>
</div>
<p>
<textarea name="configuration" rows="20" cols="80" id="configuration"></textarea>
</p>
<p>
<button id="applyconfig">Apply</button>
</p>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<form id="myForm" class="form-horizontal" data-toggle="validator">
<div class="form-group">
<div class="col-md-2">
<label for="text" class="control-label">Text input (name: text)</label>
</div>
<div class="col-md-6">
<input id="text" type="text" class="form-control" name="text" data-disabled="true">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="select" class="control-label">Select (name: select)</label>
</div>
Rafael Ostertag
committed
<input type="hidden" name="select">
<div class="col-md-6">
<select id="select" class="form-control" name="select">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="textarea" class="control-label">Text Area (name: textarea)</label>
</div>
<div class="col-md-6">
<textarea id="textarea" name="textarea"></textarea>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Radio (name: radio)
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="radio" value="a">a
</label>
</div>
Rafael Ostertag
committed
<input type="hidden" name="radio">
<div class="radio">
<label>
<input type="radio" name="radio" value="b">b
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox (name: checkbox)
</b>
</div>
<div class="col-md-6">
Rafael Ostertag
committed
<input type="hidden" name="checkbox">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox" name="checkbox" data-hidden="no">
</label>
<p class="help-block"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Data reload trigger
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox2" name="trigger" data-load="">
</label>
<p class="help-block">
Changing the value of this checkbox triggers reload
</p>
</div>
</div>
</div>
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox 3 test
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input name='checkbox3_1' type="checkbox" value="reminder_value">
</label>
</div>
<div class="checkbox">
<label>
<input name='checkbox3_2' type="checkbox" value="reminder_value">
</label>
</div>
<div class="checkbox">
<label>
<input name='checkbox3_3' type="checkbox" value="reminder_value">
</label>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
Rafael Ostertag
committed
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
Rafael Ostertag
committed
var form = new QfqNS.QfqForm("myForm", 'none', 'none', 'api/' + $("#refreshUrl").val());
QfqNS.Log.level = 0;
$("#applyconfig").click(function () {
var configAsText = $("#configuration").val();
var configAsJson = JSON.parse(configAsText);
form.applyFormConfiguration(configAsJson);
});
$("#copy").click(function () {
$("#configuration").val($("#sample").text());
Rafael Ostertag
committed
});
$("#refreshUrl").on("change", function (evt) {
form.dataRefreshUrl = 'api/' + $(evt.target).val();
});
});
</script>
</body>
</html>