| 9 |
lars |
1 |
/*
|
|
|
2 |
* jQuery wizard plug-in 3.0.7 (18-SEPT-2012)
|
|
|
3 |
*
|
|
|
4 |
*
|
|
|
5 |
* Copyright (c) 2012 Jan Sundman (jan.sundman[at]aland.net)
|
|
|
6 |
*
|
|
|
7 |
* http://www.thecodemine.org
|
|
|
8 |
*
|
|
|
9 |
* Licensed under the MIT licens:
|
|
|
10 |
* http://www.opensource.org/licenses/mit-license.php
|
|
|
11 |
*
|
|
|
12 |
*/
|
|
|
13 |
|
|
|
14 |
|
|
|
15 |
(function($){
|
|
|
16 |
$.widget("ui.formwizard", {
|
|
|
17 |
|
|
|
18 |
_init: function() {
|
|
|
19 |
|
|
|
20 |
var wizard = this;
|
|
|
21 |
var formOptionsSuccess = this.options.formOptions.success;
|
|
|
22 |
var formOptionsComplete = this.options.formOptions.complete;
|
|
|
23 |
var formOptionsBeforeSend = this.options.formOptions.beforeSend;
|
|
|
24 |
var formOptionsBeforeSubmit = this.options.formOptions.beforeSubmit;
|
|
|
25 |
var formOptionsBeforeSerialize = this.options.formOptions.beforeSerialize;
|
|
|
26 |
this.options.formOptions = $.extend(this.options.formOptions,{
|
|
|
27 |
success : function(responseText, textStatus, xhr){
|
|
|
28 |
if(formOptionsSuccess){
|
|
|
29 |
formOptionsSuccess(responseText, textStatus, xhr);
|
|
|
30 |
}
|
|
|
31 |
if(wizard.options.formOptions && wizard.options.formOptions.resetForm || !wizard.options.formOptions){
|
|
|
32 |
wizard._reset();
|
|
|
33 |
}
|
|
|
34 |
},
|
|
|
35 |
complete : function(xhr, textStatus){
|
|
|
36 |
if(formOptionsComplete){
|
|
|
37 |
formOptionsComplete(xhr, textStatus);
|
|
|
38 |
}
|
|
|
39 |
wizard._enableNavigation();
|
|
|
40 |
},
|
|
|
41 |
beforeSubmit : function(arr, theForm, options) {
|
|
|
42 |
if(formOptionsBeforeSubmit){
|
|
|
43 |
var shouldSubmit = formOptionsBeforeSubmit(arr, theForm, options);
|
|
|
44 |
if(!shouldSubmit)
|
|
|
45 |
wizard._enableNavigation();
|
|
|
46 |
return shouldSubmit;
|
|
|
47 |
}
|
|
|
48 |
},
|
|
|
49 |
beforeSend : function(xhr) {
|
|
|
50 |
if(formOptionsBeforeSend){
|
|
|
51 |
var shouldSubmit = formOptionsBeforeSend(xhr);
|
|
|
52 |
if(!shouldSubmit)
|
|
|
53 |
wizard._enableNavigation();
|
|
|
54 |
return shouldSubmit;
|
|
|
55 |
}
|
|
|
56 |
},
|
|
|
57 |
beforeSerialize: function(form, options) {
|
|
|
58 |
if(formOptionsBeforeSerialize){
|
|
|
59 |
var shouldSubmit = formOptionsBeforeSerialize(form, options);
|
|
|
60 |
if(!shouldSubmit)
|
|
|
61 |
wizard._enableNavigation();
|
|
|
62 |
return shouldSubmit;
|
|
|
63 |
}
|
|
|
64 |
}
|
|
|
65 |
});
|
|
|
66 |
|
|
|
67 |
if (this.options.historyEnabled) {
|
|
|
68 |
$.bbq.removeState("_" + $(this.element).attr('id'));
|
|
|
69 |
}
|
|
|
70 |
|
|
|
71 |
this.steps = this.element.find(".step").hide();
|
|
|
72 |
|
|
|
73 |
this.firstStep = this.steps.eq(0).attr("id");
|
|
|
74 |
this.activatedSteps = new Array();
|
|
|
75 |
this.isLastStep = false;
|
|
|
76 |
this.previousStep = undefined;
|
|
|
77 |
this.currentStep = this.steps.eq(0).attr("id");
|
|
|
78 |
this.nextButton = this.element.find(this.options.next)
|
|
|
79 |
.click(function() {
|
|
|
80 |
return wizard._next();
|
|
|
81 |
});
|
|
|
82 |
|
|
|
83 |
this.nextButtonInitinalValue = this.nextButton.val();
|
|
|
84 |
this.nextButton.val(this.options.textNext);
|
|
|
85 |
|
|
|
86 |
this.backButton = this.element.find(this.options.back)
|
|
|
87 |
.click(function() {
|
|
|
88 |
wizard._back();return false;
|
|
|
89 |
});
|
|
|
90 |
|
|
|
91 |
this.backButtonInitinalValue = this.backButton.val();
|
|
|
92 |
this.backButton.val(this.options.textBack);
|
|
|
93 |
|
|
|
94 |
if(this.options.validationEnabled && jQuery().validate == undefined){
|
|
|
95 |
this.options.validationEnabled = false;
|
|
|
96 |
if( (window['console'] !== undefined) ){
|
|
|
97 |
console.log("%s", "validationEnabled option set, but the validation plugin is not included");
|
|
|
98 |
}
|
|
|
99 |
}else if(this.options.validationEnabled){
|
|
|
100 |
this.element.validate(this.options.validationOptions);
|
|
|
101 |
}
|
|
|
102 |
if(this.options.formPluginEnabled && jQuery().ajaxSubmit == undefined){
|
|
|
103 |
this.options.formPluginEnabled = false;
|
|
|
104 |
if( (window['console'] !== undefined) ){
|
|
|
105 |
console.log("%s", "formPluginEnabled option set but the form plugin is not included");
|
|
|
106 |
}
|
|
|
107 |
}
|
|
|
108 |
|
|
|
109 |
if(this.options.disableInputFields == true){
|
|
|
110 |
$(this.steps).find(":input:not('.wizard-ignore')").attr("disabled","disabled");
|
|
|
111 |
}
|
|
|
112 |
|
|
|
113 |
if(this.options.historyEnabled){
|
|
|
114 |
$(window).bind('hashchange', undefined, function(event){
|
|
|
115 |
var hashStep = event.getState( "_" + $(wizard.element).attr( 'id' )) || wizard.firstStep;
|
|
|
116 |
if(hashStep !== wizard.currentStep){
|
|
|
117 |
if(wizard.options.validationEnabled && hashStep === wizard._navigate(wizard.currentStep)){
|
|
|
118 |
if(!wizard.element.valid()){
|
|
|
119 |
wizard._updateHistory(wizard.currentStep);
|
|
|
120 |
wizard.element.validate().focusInvalid();
|
|
|
121 |
|
|
|
122 |
return false;
|
|
|
123 |
}
|
|
|
124 |
}
|
|
|
125 |
if(hashStep !== wizard.currentStep)
|
|
|
126 |
wizard._show(hashStep);
|
|
|
127 |
}
|
|
|
128 |
});
|
|
|
129 |
}
|
|
|
130 |
|
|
|
131 |
this.element.addClass("ui-formwizard");
|
|
|
132 |
this.element.find(":input").addClass("ui-wizard-content");
|
|
|
133 |
this.steps.addClass("ui-formwizard-content");
|
|
|
134 |
this.backButton.addClass("ui-formwizard-button ui-wizard-content");
|
|
|
135 |
this.nextButton.addClass("ui-formwizard-button ui-wizard-content");
|
|
|
136 |
|
|
|
137 |
if(!this.options.disableUIStyles){
|
|
|
138 |
this.element.addClass("ui-helper-reset ui-widget ui-widget-content ui-helper-reset ui-corner-all");
|
|
|
139 |
this.element.find(":input").addClass("ui-helper-reset ui-state-default");
|
|
|
140 |
this.steps.addClass("ui-helper-reset ui-corner-all");
|
|
|
141 |
this.backButton.addClass("ui-helper-reset ui-state-default");
|
|
|
142 |
this.nextButton.addClass("ui-helper-reset ui-state-default");
|
|
|
143 |
}
|
|
|
144 |
this._show(undefined);
|
|
|
145 |
return $(this);
|
|
|
146 |
},
|
|
|
147 |
|
|
|
148 |
_next : function(){
|
|
|
149 |
if(this.options.validationEnabled){
|
|
|
150 |
if(!this.element.valid()){
|
|
|
151 |
this.element.validate().focusInvalid();
|
|
|
152 |
return false;
|
|
|
153 |
}
|
|
|
154 |
}
|
|
|
155 |
|
|
|
156 |
if(this.options.remoteAjax != undefined){
|
|
|
157 |
var options = this.options.remoteAjax[this.currentStep];
|
|
|
158 |
var wizard = this;
|
|
|
159 |
if(options !== undefined){
|
|
|
160 |
var success = options.success;
|
|
|
161 |
var beforeSend = options.beforeSend;
|
|
|
162 |
var complete = options.complete;
|
|
|
163 |
|
|
|
164 |
options = $.extend({},options,{
|
|
|
165 |
success: function(data, statusText){
|
|
|
166 |
if((success !== undefined && success(data, statusText)) || (success == undefined)){
|
|
|
167 |
wizard._continueToNextStep();
|
|
|
168 |
}
|
|
|
169 |
},
|
|
|
170 |
beforeSend : function(xhr){
|
|
|
171 |
wizard._disableNavigation();
|
|
|
172 |
if(beforeSend !== undefined)
|
|
|
173 |
beforeSend(xhr);
|
|
|
174 |
$(wizard.element).trigger('before_remote_ajax', {"currentStep" : wizard.currentStep});
|
|
|
175 |
},
|
|
|
176 |
complete : function(xhr, statusText){
|
|
|
177 |
if(complete !== undefined)
|
|
|
178 |
complete(xhr, statusText);
|
|
|
179 |
$(wizard.element).trigger('after_remote_ajax', {"currentStep" : wizard.currentStep});
|
|
|
180 |
wizard._enableNavigation();
|
|
|
181 |
}
|
|
|
182 |
})
|
|
|
183 |
this.element.ajaxSubmit(options);
|
|
|
184 |
return false;
|
|
|
185 |
}
|
|
|
186 |
}
|
|
|
187 |
|
|
|
188 |
return this._continueToNextStep();
|
|
|
189 |
},
|
|
|
190 |
|
|
|
191 |
_back : function(){
|
|
|
192 |
if(this.activatedSteps.length > 0){
|
|
|
193 |
if(this.options.historyEnabled){
|
|
|
194 |
this._updateHistory(this.activatedSteps[this.activatedSteps.length - 2]);
|
|
|
195 |
}else{
|
|
|
196 |
this._show(this.activatedSteps[this.activatedSteps.length - 2], true);
|
|
|
197 |
}
|
|
|
198 |
}
|
|
|
199 |
return false;
|
|
|
200 |
},
|
|
|
201 |
|
|
|
202 |
_continueToNextStep : function(){
|
|
|
203 |
if(this.isLastStep){
|
|
|
204 |
for(var i = 0; i < this.activatedSteps.length; i++){
|
|
|
205 |
this.steps.filter("#" + this.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled");
|
|
|
206 |
}
|
|
|
207 |
if(!this.options.formPluginEnabled){
|
|
|
208 |
return true;
|
|
|
209 |
}else{
|
|
|
210 |
this._disableNavigation();
|
|
|
211 |
this.element.ajaxSubmit(this.options.formOptions);
|
|
|
212 |
return false;
|
|
|
213 |
}
|
|
|
214 |
}
|
|
|
215 |
|
|
|
216 |
var step = this._navigate(this.currentStep);
|
|
|
217 |
if(step == this.currentStep){
|
|
|
218 |
return false;
|
|
|
219 |
}
|
|
|
220 |
if(this.options.historyEnabled){
|
|
|
221 |
this._updateHistory(step);
|
|
|
222 |
}else{
|
|
|
223 |
this._show(step, true);
|
|
|
224 |
}
|
|
|
225 |
return false;
|
|
|
226 |
},
|
|
|
227 |
|
|
|
228 |
_updateHistory : function(step){
|
|
|
229 |
var state = {};
|
|
|
230 |
state["_" + $(this.element).attr('id')] = step;
|
|
|
231 |
$.bbq.pushState(state);
|
|
|
232 |
},
|
|
|
233 |
|
|
|
234 |
_disableNavigation : function(){
|
|
|
235 |
this.nextButton.attr("disabled","disabled");
|
|
|
236 |
this.backButton.attr("disabled","disabled");
|
|
|
237 |
if(!this.options.disableUIStyles){
|
|
|
238 |
this.nextButton.removeClass("ui-state-active").addClass("ui-state-disabled");
|
|
|
239 |
this.backButton.removeClass("ui-state-active").addClass("ui-state-disabled");
|
|
|
240 |
}
|
|
|
241 |
},
|
|
|
242 |
|
|
|
243 |
_enableNavigation : function(){
|
|
|
244 |
if(this.isLastStep){
|
|
|
245 |
this.nextButton.val(this.options.textSubmit);
|
|
|
246 |
}else{
|
|
|
247 |
this.nextButton.val(this.options.textNext);
|
|
|
248 |
}
|
|
|
249 |
|
|
|
250 |
if($.trim(this.currentStep) !== this.steps.eq(0).attr("id")){
|
|
|
251 |
this.backButton.removeAttr("disabled");
|
|
|
252 |
if(!this.options.disableUIStyles){
|
|
|
253 |
this.backButton.removeClass("ui-state-disabled").addClass("ui-state-active");
|
|
|
254 |
}
|
|
|
255 |
}
|
|
|
256 |
|
|
|
257 |
this.nextButton.removeAttr("disabled");
|
|
|
258 |
if(!this.options.disableUIStyles){
|
|
|
259 |
this.nextButton.removeClass("ui-state-disabled").addClass("ui-state-active");
|
|
|
260 |
}
|
|
|
261 |
},
|
|
|
262 |
|
|
|
263 |
_animate : function(oldStep, newStep, stepShownCallback){
|
|
|
264 |
this._disableNavigation();
|
|
|
265 |
var old = this.steps.filter("#" + oldStep);
|
|
|
266 |
var current = this.steps.filter("#" + newStep);
|
|
|
267 |
old.find(":input").not(".wizard-ignore").attr("disabled","disabled");
|
|
|
268 |
current.find(":input").not(".wizard-ignore").removeAttr("disabled");
|
|
|
269 |
var wizard = this;
|
|
|
270 |
old.animate(wizard.options.outAnimation, wizard.options.outDuration, wizard.options.easing, function(){
|
|
|
271 |
current.animate(wizard.options.inAnimation, wizard.options.inDuration, wizard.options.easing, function(){
|
|
|
272 |
if(wizard.options.focusFirstInput)
|
|
|
273 |
current.find(":input:first").focus();
|
|
|
274 |
wizard._enableNavigation();
|
|
|
275 |
|
|
|
276 |
stepShownCallback.apply(wizard);
|
|
|
277 |
});
|
|
|
278 |
return;
|
|
|
279 |
});
|
|
|
280 |
},
|
|
|
281 |
|
|
|
282 |
_checkIflastStep : function(step){
|
|
|
283 |
this.isLastStep = false;
|
|
|
284 |
if($("#" + step).hasClass(this.options.submitStepClass) || this.steps.filter(":last").attr("id") == step){
|
|
|
285 |
this.isLastStep = true;
|
|
|
286 |
}
|
|
|
287 |
},
|
|
|
288 |
|
|
|
289 |
_getLink : function(step){
|
|
|
290 |
var link = undefined;
|
|
|
291 |
var links = this.steps.filter("#" + step).find(this.options.linkClass);
|
|
|
292 |
|
|
|
293 |
if(links != undefined){
|
|
|
294 |
if(links.filter(":radio,:checkbox").size() > 0){
|
|
|
295 |
link = links.filter(this.options.linkClass + ":checked").val();
|
|
|
296 |
}else{
|
|
|
297 |
link = $(links).val();
|
|
|
298 |
}
|
|
|
299 |
}
|
|
|
300 |
return link;
|
|
|
301 |
},
|
|
|
302 |
|
|
|
303 |
_navigate : function(step){
|
|
|
304 |
var link = this._getLink(step);
|
|
|
305 |
if(link != undefined){
|
|
|
306 |
if((link != "" && link != null && link != undefined) && this.steps.filter("#" + link).attr("id") != undefined){
|
|
|
307 |
return link;
|
|
|
308 |
}
|
|
|
309 |
return this.currentStep;
|
|
|
310 |
}else if(link == undefined && !this.isLastStep){
|
|
|
311 |
var step1 = this.steps.filter("#" + step).next().attr("id");
|
|
|
312 |
return step1;
|
|
|
313 |
}
|
|
|
314 |
},
|
|
|
315 |
|
|
|
316 |
_show : function(step){
|
|
|
317 |
var backwards = false;
|
|
|
318 |
var triggerStepShown = step !== undefined;
|
|
|
319 |
if(step == undefined || step == ""){
|
|
|
320 |
this.activatedSteps.pop();
|
|
|
321 |
step = this.firstStep;
|
|
|
322 |
this.activatedSteps.push(step);
|
|
|
323 |
}else{
|
|
|
324 |
if($.inArray(step, this.activatedSteps) > -1){
|
|
|
325 |
backwards = true;
|
|
|
326 |
this.activatedSteps.pop();
|
|
|
327 |
}else {
|
|
|
328 |
this.activatedSteps.push(step);
|
|
|
329 |
}
|
|
|
330 |
}
|
|
|
331 |
|
|
|
332 |
if(this.currentStep !== step || step === this.firstStep){
|
|
|
333 |
this.previousStep = this.currentStep;
|
|
|
334 |
this._checkIflastStep(step);
|
|
|
335 |
this.currentStep = step;
|
|
|
336 |
var stepShownCallback = function(){if(triggerStepShown){$(this.element).trigger('step_shown', $.extend({"isBackNavigation" : backwards},this._state()));}}
|
|
|
337 |
if(triggerStepShown){
|
|
|
338 |
$(this.element).trigger('before_step_shown', $.extend({"isBackNavigation" : backwards},this._state()));
|
|
|
339 |
}
|
|
|
340 |
this._animate(this.previousStep, step, stepShownCallback);
|
|
|
341 |
};
|
|
|
342 |
|
|
|
343 |
|
|
|
344 |
},
|
|
|
345 |
|
|
|
346 |
_reset : function(){
|
|
|
347 |
this.element.resetForm()
|
|
|
348 |
$("label,:input,textarea",this).removeClass("error");
|
|
|
349 |
for(var i = 0; i < this.activatedSteps.length; i++){
|
|
|
350 |
this.steps.filter("#" + this.activatedSteps[i]).hide().find(":input").attr("disabled","disabled");
|
|
|
351 |
}
|
|
|
352 |
this.activatedSteps = new Array();
|
|
|
353 |
this.previousStep = undefined;
|
|
|
354 |
this.isLastStep = false;
|
|
|
355 |
if(this.options.historyEnabled){
|
|
|
356 |
this._updateHistory(this.firstStep);
|
|
|
357 |
}else{
|
|
|
358 |
this._show(this.firstStep);
|
|
|
359 |
}
|
|
|
360 |
|
|
|
361 |
},
|
|
|
362 |
|
|
|
363 |
_state : function(state){
|
|
|
364 |
var currentState = { "settings" : this.options,
|
|
|
365 |
"activatedSteps" : this.activatedSteps,
|
|
|
366 |
"isLastStep" : this.isLastStep,
|
|
|
367 |
"isFirstStep" : this.currentStep === this.firstStep,
|
|
|
368 |
"previousStep" : this.previousStep,
|
|
|
369 |
"currentStep" : this.currentStep,
|
|
|
370 |
"backButton" : this.backButton,
|
|
|
371 |
"nextButton" : this.nextButton,
|
|
|
372 |
"steps" : this.steps,
|
|
|
373 |
"firstStep" : this.firstStep
|
|
|
374 |
}
|
|
|
375 |
|
|
|
376 |
if(state !== undefined)
|
|
|
377 |
return currentState[state];
|
|
|
378 |
|
|
|
379 |
return currentState;
|
|
|
380 |
},
|
|
|
381 |
|
|
|
382 |
/*Methods*/
|
|
|
383 |
|
|
|
384 |
show : function(step){
|
|
|
385 |
if(this.options.historyEnabled){
|
|
|
386 |
this._updateHistory(step);
|
|
|
387 |
}else{
|
|
|
388 |
this._show(step);
|
|
|
389 |
}
|
|
|
390 |
},
|
|
|
391 |
|
|
|
392 |
state : function(state){
|
|
|
393 |
return this._state(state);
|
|
|
394 |
},
|
|
|
395 |
|
|
|
396 |
reset : function(){
|
|
|
397 |
this._reset();
|
|
|
398 |
},
|
|
|
399 |
|
|
|
400 |
next : function(){
|
|
|
401 |
this._next();
|
|
|
402 |
},
|
|
|
403 |
|
|
|
404 |
back : function(){
|
|
|
405 |
this._back();
|
|
|
406 |
},
|
|
|
407 |
|
|
|
408 |
destroy: function() {
|
|
|
409 |
this.element.find("*").removeAttr("disabled").show();
|
|
|
410 |
this.nextButton.unbind("click").val(this.nextButtonInitinalValue).removeClass("ui-state-disabled").addClass("ui-state-active");
|
|
|
411 |
this.backButton.unbind("click").val(this.backButtonInitinalValue).removeClass("ui-state-disabled").addClass("ui-state-active");
|
|
|
412 |
this.backButtonInitinalValue = undefined;
|
|
|
413 |
this.nextButtonInitinalValue = undefined;
|
|
|
414 |
this.activatedSteps = undefined;
|
|
|
415 |
this.previousStep = undefined;
|
|
|
416 |
this.currentStep = undefined;
|
|
|
417 |
this.isLastStep = undefined;
|
|
|
418 |
this.options = undefined;
|
|
|
419 |
this.nextButton = undefined;
|
|
|
420 |
this.backButton = undefined;
|
|
|
421 |
this.formwizard = undefined;
|
|
|
422 |
this.element = undefined;
|
|
|
423 |
this.steps = undefined;
|
|
|
424 |
this.firstStep = undefined;
|
|
|
425 |
},
|
|
|
426 |
|
|
|
427 |
update_steps : function(){
|
|
|
428 |
this.steps = this.element.find(".step").addClass("ui-formwizard-content");
|
|
|
429 |
this.firstStep = this.steps.eq(0).attr("id");
|
|
|
430 |
this.steps.not("#" + this.currentStep).hide().find(":input").addClass("ui-wizard-content").attr("disabled","disabled");
|
|
|
431 |
this._checkIflastStep(this.currentStep);
|
|
|
432 |
this._enableNavigation();
|
|
|
433 |
if(!this.options.disableUIStyles){
|
|
|
434 |
this.steps.addClass("ui-helper-reset ui-corner-all");
|
|
|
435 |
this.steps.find(":input").addClass("ui-helper-reset ui-state-default");
|
|
|
436 |
}
|
|
|
437 |
},
|
|
|
438 |
|
|
|
439 |
options: {
|
|
|
440 |
historyEnabled : false,
|
|
|
441 |
validationEnabled : false,
|
|
|
442 |
validationOptions : undefined,
|
|
|
443 |
formPluginEnabled : false,
|
|
|
444 |
linkClass : ".link",
|
|
|
445 |
submitStepClass : "submit_step",
|
|
|
446 |
back : ":reset",
|
|
|
447 |
next : ":submit",
|
|
|
448 |
textSubmit : 'Submit',
|
|
|
449 |
textNext : 'Next',
|
|
|
450 |
textBack : 'Back',
|
|
|
451 |
remoteAjax : undefined,
|
|
|
452 |
inAnimation : {opacity: 'show'},
|
|
|
453 |
outAnimation: {opacity: 'hide'},
|
|
|
454 |
inDuration : 400,
|
|
|
455 |
outDuration: 400,
|
|
|
456 |
easing: 'swing',
|
|
|
457 |
focusFirstInput : false,
|
|
|
458 |
disableInputFields : true,
|
|
|
459 |
formOptions : { reset: true, success: function(data) { if( (window['console'] !== undefined) ){console.log("%s", "form submit successful");}},
|
|
|
460 |
disableUIStyles : false
|
|
|
461 |
}
|
|
|
462 |
}
|
|
|
463 |
});
|
|
|
464 |
})(jQuery);
|