JavaScript: Cascading Dropdowns

ui.forms.cascadingdropdowns.js

/**
 * UI Forms Cascading Dropdowns
 *
 * CHANGES: 
 * - Remove hardcoded if for 'unit', since this is not part of the module functionality
 * - Added extra params functionality on order to send more info on the request
 *
 * TODO:
 * - add option to cache the content
 */

sdui = window.sdui || {};
sdui.module = window.sdui.module || {};
sdui.module.ui = window.sdui.module.ui || {};
sdui.module.ui.forms = window.sdui.module.ui.forms || {};

sdui.module.ui.forms.cascadingDropdowns = function (options){

  var settings = {
        fields: {},
        parentParamName: 'ParentId',
        extraParams: {}
    };

    /*
     * @public Init 
     *
     */

    function init(options){
		if(options) updateSettings(options);
		bindEvents();
    }
    this.init = init;

    /*
     * @private updateSettings
     *
     */

    function updateSettings(options){
        $.extend(settings, options);
    }


    /*
     * @private bindEvents
     *
     */	

	function bindEvents(){
		$.each(settings.fields, function(field, fieldSettings){
			$(fieldSettings.element).change(function(){
				updateFields(field);
			});
		})
	}

    /*
     * @private loadContent
     *
     */

	function loadContent(field, callback) {
		var fieldSettings = settings.fields[field];
			$field = $(fieldSettings.element),
            parentId = ''; // default empty value
            requestParams = {};

		if('parent' in fieldSettings){
            var $parentField = $( settings.fields[fieldSettings.parent].element );
            parentId = $parentField.val();
        }

        displayLoadingContent(field);

        requestParams[settings.parentParamName] = parentId;

        if(settings.extraParams) {
            $.extend(requestParams, settings.extraParams);
        }

        $.ajax({
            url: fieldSettings.url,
            type: 'POST',
            data: requestParams,
            success: function (response) {
                $field.html(response);
                $field.removeAttr("disabled");
                updateFields(field);
            }
        });
	}
	this.loadContent = loadContent;

    /*
     * @private displayLoadingContent
     *
     */

	function displayLoadingContent(field){
		var $field = $(settings.fields[field].element);
		$field.html('<option value="-1">Loading ... </option>');
		$field.attr("disabled", true);
	}

    /*
     * @private clearContent
     *
     */	

	function clearContent(field){
		var $field = $(settings.fields[field].element);
		$field.html('<option value="-1">Please select ... </option>');
		$field.attr("disabled", true);
		updateFields(field);
	}

    /*
     * @private updateFields
     *
     */

	function updateFields(updatedFieldId){
		$.each(settings.fields, function(field, fieldSettings){
			if(fieldSettings.parent == updatedFieldId){
				var parentSettings = settings.fields[fieldSettings.parent];
					$parentField = $(parentSettings.element);
				
				if($parentField.val() != -1){
					loadContent(field);
				} else {
					clearContent(field);
				}
			}
		})	
	}

}