widget_fieldset_conditional.smarty
5.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
{capture assign=sJS}
var innerUrl = {$rootUrl};
{literal}
var baseUrl = innerUrl + "/presentation/lookAndFeel/knowledgeTree/ajaxConditional.php";
var undoStack = Array();
/* handle the conditional field changes.
*
*/
function conditionalFieldChanged(select_input) {
conditional_val = select_input.value;
conditional_label = scrapeText(select_input.options[select_input.selectedIndex]);
var newNode = DIV({'class':'resolved_div'},
INPUT({'type':'hidden', 'value':conditional_val, 'name':select_input.name,'class':'resolved_conditional'}),
SPAN({'class':'resolved_conditional'},conditional_label)
);
swapDOM(select_input.parentNode, newNode); // FIXME: this assumes that the parentNode is the appropriate div.
undoStack.push(newNode);
triggerUpdate('conditional_field');
}
/** VERY simple xml -> html converter ... assumes that xml is html ;)
*
* FIXME we probably want a slightly more generic set of adapter / converters.
*
* takes a xml:Select node and turns it into html:select
*/
/** handle the XML return, and resolve. */
function reworkForm (form, request) {
// FIXME recognise empty response.
// find all class="unresolved_conditional" elements in the current environment.
// find all class="unresolved_conditional" elements in the response.
// _replace_ overridden ones with the appropriate select.
// _remove_ ones that are only in the current object.
var reqXML = request.responseXML;
// only look for select items, since XML is much stricter in the DOM.
var incomingOptions = getElementsByTagAndClassName('div',null,reqXML); // grab the DIV elements within.
var existingOptions = getElementsByTagAndClassName('div','unresolved_div',form); // we contain "open" vals with this.
// first delete all unresolved divs.
// FIXME find the nearest parent with class unresolved_div instead.
for (index in existingOptions) {
var obj = existingOptions[index];
obj.parentNode.removeChild(obj);
}
for (index in incomingOptions) {
var repl = DIV(null);
var replaceFinal = DIV({'class':'unresolved_div'});
repl.innerHTML = toHTML(incomingOptions[index]);
if (repl.hasChildNodes()) {
// we know that the child is a div so ...
try {
var children = repl.childNodes[0].childNodes;
for (i in children) {
if ((typeof(children[i]) == typeof(repl)) && (children[i].nodeType == children[i].ELEMENT_NODE)) { // must be an Object (not a number, id, function...)
var child = children[i];
appendChildNodes(replaceFinal, child);
// FIXME move the js registration out.
}
}
appendChildNodes(form, replaceFinal);
} catch (Exception) {
alert('catastrophic error merging fields: '+Exception);
}
}
}
}
function doConditionalUndo() {
// fixme. we currently use an ID, which breaks ... need to partial() this function somehow.
if (undoStack.length == 0) {
return ; // no items in the stack.
}
form = getElement('conditional_field');
last_item = undoStack.pop();
last_item.parentNode.removeChild(last_item);
triggerUpdate('conditional_field');
}
function errorForm (request) {
alert('failed to update.'+request);
}
/* extract all the form fields and values
* within the specified field.
*/
function triggerUpdate(formname) {
var form = getElement(formname);
var fields = getElementsByTagAndClassName('input','resolved_conditional',form);
var fieldvals = Array();
var fieldnames = Array();
for (var i=0; i<fields.length; i++) {
var fieldName = fields[i].name;
var fieldValue = fields[i].value;
fieldnames.push(fieldName);
fieldvals.push(fieldValue);
}
fieldnames.push('action');
fieldvals.push('verifyAndUpdate');
var formHandler = partial(reworkForm, form);
var req = doSimpleXMLHttpRequest(baseUrl+'?'+queryString(fieldnames, fieldvals));
req.addCallback(formHandler);
req.addErrback(errorForm);
}
{/literal}
{/capture}
{$context->oPage->requireJSStandalone($sJS)}
<!-- do we need to have more than one set of these on a page? -->
<form method="POST" action="{$smarty.server.PHP_SELF}">
<input type="hidden" name="action" value="submitConditionalSet" />
<input type="hidden" name="fieldset_id" class="resolved_conditional" value="{$fieldset_id}" />
<!-- add items to handle save here. -->
<input type="button" value="{i18n}Undo change{/i18n}" onclick="doConditionalUndo(); return false;" />
<fieldset id="conditional_field">
<legend>{i18n}Project Details{/i18n}</legend>
<p>{i18n}Please be aware that - depending on your selections - new values may become available.{/i18n}</p>
<div >
<!-- how do we add these after-the-fact, especially given that we need to add columns later? -->
<select name="fields[0]" class="unresolved_conditional" onchange="conditionalFieldChanged(this)">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
<option value="7">Value 7</option>
<option value="8">Value 8</option>
</select>
</div>
</fieldset>
<input type="submit" value="{i18n}save{/i18n}" />
</form>