form-field.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

	var oldScrollTop = null;
	var oldScrollLeft = null;

	if(
		this.field.nodeName.toLowerCase() == 'textarea' &&
		typeof(this.field.scrollTop) != 'undefined'
	){
		oldScrollTop = this.field.scrollTop;
		oldScrollLeft = this.field.scrollLeft;
	}

	var retVal = Zapatec.Form.Utils.setValue(this.field, value);

	if(this.field.nodeName.toLowerCase() == 'textarea' && oldScrollTop != null){
		this.field.scrollTop = oldScrollTop;
		this.field.scrollLeft = oldScrollLeft;
	}

	return retVal;
};

/**
 * @private
 * This method processes delayed actions - usually this actions are
 * executed when user finished typing in the field.
 */
Zapatec.Form.Field.prototype.runDelayedActions = function(){
	this.keyPressCounter--;

	if(this.keyPressCounter != 0){
		return null;
	}

	this.ajaxValidate();
	this.suggestValue();
	this.ajaxFill();
};

/**
 * @private
 * Validate field value using AJAX. Response must be in format:
 * {
 *	"success": true | false,
 *	"generalError": "Human readable error description"
 * }
 */
Zapatec.Form.Field.prototype.ajaxValidate = function(){
	// processing zpFormValidate feature
	if(!this.hasFeature("zpFormValidate")){
		return null;
	}

	var valid = this.validate();

	if(!(
			valid == null || // if field has no client-side errors
			valid != null &&
			(
				valid.length == 0 ||
				valid.length == 1 && // or has only one error, but it is error from this validator
				valid[0].validator == "zpFormValidate"
			)
		)
	){
		return null;
	}

	var submitUrl = this.getFeature("zpFormValidate");
	var submitMethod = this.getFeature("zpFormValidateMethod");
	var submitParam = this.getFeature("zpFormValidateParam");
	var submitQuery = this.getFeature("zpFormValidateQuery");

	// method by default is GET
	if(typeof(submitMethod) != 'string'){
		submitMethod = "GET"
	}

	// URL param name by default is equal to the field name
	if(typeof(submitParam) != 'string'){
		submitParam = this.field.name;
	}

	if(typeof(submitQuery) != 'string'){
		submitQuery = "";
	}

	submitQuery += "&" + escape(submitParam) + "=" + escape(this.getValue());

	if(submitUrl.indexOf("?") < 0){
		submitUrl += "?";
	}

	submitUrl += "&" + Math.random();

	if(submitMethod == 'GET'){
		submitUrl += "&" + submitQuery;
	}

	this.fetchingMark.className = "zpIsFetching " + Zapatec.Form.IGNORE_CLASSNAME;

	var self = this;

	if(this.config.formConfig.ajaxDebugFunc){
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugSeparator'));
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugValidateTitle', this.field.name));
		this.config.formConfig.ajaxDebugFunc(submitMethod + " " + submitUrl);
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugQuery', ("GET" ? "" : submitQuery)));
	}

	Zapatec.Transport.fetch({
		url: submitUrl,
		content: submitMethod == "GET" ? null : submitQuery,
		method: submitMethod,
		onLoad: function(objText){
			if(self.config.formConfig.ajaxDebugFunc){
				self.config.formConfig.ajaxDebugFunc(self.getMessage('ajaxDebugResponse', objText.responseText));
			}

			self.fetchingMark.className = Zapatec.Form.IGNORE_CLASSNAME + "zpNotFetching";

			if (objText.responseText == null) {
				Zapatec.Log({description: self.getMessage('ajaxValidateNoResponseError', objText.responseText)});
				return null;
			}

			var objResponse = Zapatec.Transport.parseJson({strJson: objText.responseText});

			if(objResponse == null){
				Zapatec.Log({description: self.getMessage('ajaxValidateCantParseError', objText.responseText)});
				return null;
			}

			if(!objResponse.success){
				self.ajaxError = typeof(objResponse.generalError) != 'string' ||
					objResponse.generalError.length == 0 ?
						self.getMessage('ajaxValidateValidationError') : 
						objResponse.generalError;
			} else {
				self.ajaxError = null;
			}

			self.validate();
		},
		onError : function(objError){
			var strError = '';

			if (objError.errorCode) {
				strError += objError.errorCode + ' ';
			}

			strError += objError.errorDescription;

			self.fetchingMark.className = Zapatec.Form.IGNORE_CLASSNAME + " zpNotFetching";
			alert(strError);
			self.ajaxError = null;

			if(self.config.formConfig.ajaxDebugFunc){
				self.config.formConfig.ajaxDebugFunc(self.getMessage('ajaxDebugResponseError', strError));
			}
		}
	});
};

/**
 * @private
 * Fill this field (and any other) using AJAX. Response must be in format:
 * {
 *	TODO
 * }
 */
Zapatec.Form.Field.prototype.ajaxFill = function(){
	// processing zpFormValidate feature
	if(!this.hasFeature("zpFormFillUrl")){
		return null;
	}

	var submitUrl = this.getFeature("zpFormFillUrl");
	var submitMethod = this.getFeature("zpFormFillMethod");
	var submitParam = this.getFeature("zpFormFillParam");
	var submitQuery = this.getFeature("zpFormFillQuery");

	// method by default is GET
	if(typeof(submitMethod) != 'string'){
		submitMethod = "GET";
	}

	// URL param name by default is equal to the field name
	if(typeof(submitParam) != 'string'){
		submitParam = this.field.name;
	}

	if(typeof(submitQuery) != 'string'){
		submitQuery = "";
	}

	submitQuery += "&" + escape(submitParam) + "=" + escape(this.getValue());

	if(submitUrl.indexOf("?") < 0){
		submitUrl += "?";
	}

	submitUrl += "&" + Math.random();

	if(submitMethod == 'GET'){
		submitUrl += "&" + submitQuery;
	}

	this.fetchingMark.className = "zpIsFetching " + Zapatec.Form.IGNORE_CLASSNAME;

	var self = this;

	if(this.config.formConfig.ajaxDebugFunc){
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugSeparator'));
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugFillTitle', this.field.name));
		this.config.formConfig.ajaxDebugFunc(submitMethod + " " + submitUrl);
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugQuery', ("GET" ? "" : submitQuery)));
	}
	
	Zapatec.Transport.fetch({
		url: submitUrl,
		content: submitMethod == "GET" ? null : submitQuery,
		method: submitMethod,
		onLoad: function(objText){
			if(self.config.formConfig.ajaxDebugFunc){
				self.config.formConfig.ajaxDebugFunc(self.getMessage('ajaxDebugResponse', objText.responseText));
			}

			self.fetchingMark.className = Zapatec.Form.IGNORE_CLASSNAME + " zpNotFetching";

			if (objText.responseText == null) {
				Zapatec.Log({description: self.getMessage('ajaxFillNoResponseError', objText.responseText)});
				return null;
			}

			var objResponse = Zapatec.Transport.parseJson({strJson: objText.responseText});

			if(objResponse == null){
				Zapatec.Log({description: self.getMessage('ajaxFillCantParseError', objText.responseText)});
				return null;
			}

			if(!objResponse.success){
				self.ajaxError = typeof(objResponse.generalError) != 'string' ||
					objResponse.generalError.length == 0 ?
						self.getMessage('ajaxFillGeneralError') : 
						objResponse.generalError
				;
			} else {
				self.ajaxError = null;

				var formObject = self.form;
				var fillData = objResponse.fillData;
	    
				if (fillData.length == 0) {
					return null;
				} else {
					var fields = fillData[0];
					
					for (var ii = 0; ii < fields.length; ii++) {
						var field = formObject.container.elements[fields[ii]['fieldName']];
						
						if(!field){
							continue;
						}

						Zapatec.Form.Utils.setValue(field, fields[ii]['fieldValue']);
	    
						if(field.zpFormField){
							field.zpFormField.setValueFromField(true);
						}
					}
				}
			}

			self.validate();
		},
		onError : function(objError){
			var strError = '';

			if (objError.errorCode) {
				strError += objError.errorCode + ' ';
			}

			strError += objError.errorDescription;

			self.fetchingMark.className = Zapatec.Form.IGNORE_CLASSNAME + " zpNotFetching";
			alert(strError);
			self.ajaxError = null;

			if(self.config.formConfig.ajaxDebugFunc){
				self.config.formConfig.ajaxDebugFunc(self.getMessage('ajaxDebugResponseError', strError));
			}
		}
	});
};

/**
 * @private
 * Provide suggestions for current field value.
 * @param showAll {boolean} if true - no current field value will be sent to 
 *	server so it must send all possible values.
 *	{
 *		"success" : true, //true/false - if request processed successfully.
 *		"generalError": "Human readable error description" // if success == false
 *		"header": [ // table header description. Optional.
 *			{
 *				name: "Col name1", // text to display in column header
 *				style: "color: blue", // apply this style to this header
 *				colStyle: "color: blue" // apply this style to each cell in this row
 *			},
 *			{
 *				name: "Col name2", // text to display in column header
 *				className: "custom", // add this class to this header
 *				colClassName: "customCol" // add this class to each cell in this row
 *			}
 *		],
 *		"body": [ // array of data to display in rows
 *			["str1, col1", "str1, col2"],
 *			...
 *		]
 *	}
 */
Zapatec.Form.Field.prototype.suggestValue = function(showAll){
	if(
		!this.hasFeature("zpFormSuggest") ||
		!showAll &&
		this.isEmpty()
	){
		return null;
	}

	var suggestUrl = this.getFeature("zpFormSuggest");
	var suggestMethod = this.getFeature("zpFormSuggestMethod");
	var suggestParam = this.getFeature("zpFormSuggestParam");
	var suggestQuery = this.getFeature("zpFormSuggestQuery");

	// method by default is GET
	if(typeof(suggestMethod) != 'string'){
		suggestMethod = "GET";
	}

	// URL param name by default is equal to the field name
	if(typeof(suggestParam) != 'string'){
		suggestParam = this.field.name;
	}

	if(typeof(suggestQuery) != 'string'){
		suggestQuery = "";
	}

	suggestQuery += "&" + escape(suggestParam) + "=" + (showAll ? "" : escape(this.getValue()));

	if(suggestUrl.indexOf("?") < 0){
		suggestUrl += "?";
	}

	suggestUrl += "&" + Math.random();

	if(suggestMethod == 'GET'){
		suggestUrl += "&" + suggestQuery;
	}

	this.fetchingMark.className = "zpIsFetching " + Zapatec.Form.IGNORE_CLASSNAME;

	var self = this;


	if(this.config.formConfig.ajaxDebugFunc){
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugSeparator'));
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugSuggestTitle', this.field.name));
		this.config.formConfig.ajaxDebugFunc(suggestMethod + " " + suggestUrl);
		this.config.formConfig.ajaxDebugFunc(this.getMessage('ajaxDebugQuery', ("GET" ? "" : suggestQuery)));
	}

	Zapatec.Transport.fetch({
		url: suggestUrl,
		content: suggestMethod == "GET" ? null : suggestQuery,
		method: suggestMethod,
		onLoad: function(objText){
			if(self.config.formConfig.ajaxDebugFunc){
				self.config.formConfig.ajaxDebugFunc(self.getMessage('ajaxDebugResponse', objText.responseText));
			}

			self.fetchingMark.className = Zapatec.Form.IGNORE_CLASSNAME + " zpNotFetching";

			if (objText.responseText == null) {
				Zapatec.Log({description: self.getMessage('ajaxSuggestNoResponseError', objText.responseText)});
				return null;
			}

			var objResponse = Zapatec.Transport.parseJson({strJson: objText.responseText});

			if(objResponse == null){
				Zapatec.Log({description: self.getMessage('ajaxSuggestCantParseError', objText.responseText)});
				return null;
			}

			if(!objResponse.success){
				alert(typeof(objResponse.generalError) != 'string' ||
					objResponse.generalError.length == 0 ?
						self.getMessage('ajaxSuggestGeneralError') : 
						objResponse.generalError
				);
			} else {
				self.autoCompleteValue(objResponse);
			}

			self.validate();
		},
		onError : function(objError){
			var strError = '';

			if (objError.errorCode) {
				strError += objError.errorCode + ' ';
			}

			strError += objError.errorDescription;

			self.fetchingMark.className = Zapatec.Form.IGNORE_CLASSNAME + " zpNotFetching";
			Zapatec.Log({description: strError});

			if(self.config.formConfig.ajaxDebugFunc){
				self.config.formConfig.ajaxDebugFunc(self.getMessage('ajaxDebugResponseError', strError));
			}
		}
	});
};

/**
 * @private
 * Returns array of values to autocomplete current field value
 * @param showAll {boolean} if true - no current field value will be
 * used to filter available options.
 * @return array of values to autocomplete current field value;
 * @type Array
 */
Zapatec.Form.Field.prototype.getAutoCompleteOptions = function(showAll){
	var opts = {body: []};
	var currVal = this.getValue();

	if(
		this.hasFeature("zpFormAutoComplete") ||
		this.hasFeature("zpFormAutoCompleteStrict")
	){
		for(var ii = 0; ii < this.autoCompleteOptions.length; ii++){
			if(
				(this.hasFeature("zpFormAutoCompleteStrict") ? 
					this.autoCompleteOptions[ii].substring(0, currVal.length) : 
					this.autoCompleteOptions[ii].substring(0, currVal.length).toLowerCase()) ==
					(this.hasFeature("zpFormAutoCompleteStrict") ? 
						currVal : currVal.toLowerCase()
					) ||
				showAll
			){
				opts.body.push([this.autoCompleteOptions[ii]]);
			}
		}
	}

	return opts;
};

/**
 * @private
 * Autocomplete field value with given value and display dropdown list of 
 * other available values.
 * @param opts {Object} array of values to display.
 */
Zapatec.Form.Field.prototype.autoCompleteValue = function(opts){
	if(
		typeof(opts) == 'undefined' ||
		opts.body == null ||
		opts.body.length == 0 ||
		(
			opts.body.length == 1 &&
			opts.body[0][0] == ""
		)
	){
	    if(this.dropDown){
			this.dropDown.config.source = {tips: []};
			this.dropDown.loadData();
			this.dropDown.hide();
	    }
		
		return;
	}

	var currValue = this.getValue();
	var retrValue = null;

	var firstValue = opts.body[0][0];

	if(firstValue.substring(0, currValue.length).toLowerCase() == currValue.toLowerCase()){
		retrValue = firstValue.substring(currValue.length);
		this.setValue(currValue + retrValue);
		this.setCaretPosition(currValue.length, this.getValue().length);
	}

	this.validate();


	if(this.dropDown){
		if(opts.body.length == 1){
			this.dropDown.config.source = {tips: []};
			this.dropDown.loadData();
			this.dropDown.hide();
		} else {
			this.dropDown.config.sourceType = "json";
            
			var tips = [];
	    
			for(var ii = 0; ii < opts.body.length; ii++){
				var option = opts.body[ii];
				var tmp = {};
				
				tmp.title = option.join(" ");
				
				tips.push(tmp);
			}
        
			this.dropDown.config.source = {tips: tips};
			this.dropDown.loadData();
			this.dropDown.show();
		}
	}
};

Zapatec.Form.Field.prototype.isSelectionAppliable = function(){
	var nodeName = this.field.nodeName.toLowerCase();
	var inputType = nodeName == 'input' ? this.field.type.toLowerCase() : null;

	return (
		nodeName == "body" || 
		nodeName == "button" ||
		nodeName === "textarea" ||
		nodeName == "input" && (
			inputType == "button" ||
			inputType == "hidden" ||
			inputType == "password" ||
			inputType == "reset" ||
			inputType == "submit" ||
			inputType == "text"
		)
 	)
};

Zapatec.Form.Field.prototype.destroy = function(){
	this.discard();
};