Document Services - Dropdown administration

A portion of the Doc Svcs admin interface, having to do with editing dropdown menus.

by matt_bernhardt

HTML

<div id="dropdowns">
    <div class="help" style="display:inline;"> <a href="" class="edit"><img src="/docs/app/img/help_blue.gif" alt="help"/><span class="hoverhelp" style="width:700px;left:2em;">This section allows for editing dropdowns and other options throughout the site.<br/><br/>The "hide" button removes the option from its dropdown. To reverse this action, click on "show."<br/><br/>The "edit" button allows the value to be changed.<br/><br/>The "change to internal-only" button removes the option from public-facing order pages. To reverse this action, click on "change to internal / external.
                 </span>
                 </a>

    </div>
    <form id="OptionDropdownsForm" method="post" action="/docs/app/options/dropdowns">
        <fieldset style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </fieldset>
        <div class="boxed">
            	<h3>customers</h3>

            <div>
                	<h4 class="small indent">status<div class="help" style="display:inline;">
			 <a href="" class="edit"><img src="/docs/app/img/help_blue.gif" alt="help"><span class="hoverhelp" style="width:700px;left:2em;">Indicates the status of customer records.</span></a>
			 </div></h4>

                <div class="input text">
                    <label for="OptiondropdownCustomersStatus">new value:</label>
                    <input name="data[Option][dropdown][customers][status]" type="text" value="" id="OptiondropdownCustomersStatus">
                </div><span class="edit_id"><input type="hidden" name="data[Option][editid]" value="" id="OptionEditid"></span>

                <input type="button" value="Add" class="button-like action add" title="status" style="float:left">
                <div class="spinner hide">
                    <img src="/docs/app/img/spinner.gif" width="27" height="27" alt="">
                </div>
                <table class="light">
                    <tbody>
                        <tr...

JavaScript

$('#dropdowns input.action').click(function() { // show/hide
    var element = '';
    var spinner = '';
    var internal = '';
    var new_internal = '';
    var strClass = '';
		if ($(this).hasClass('show-option') || $(this).hasClass('hide-option')) {
			element = $(this);
			spinner = $(this).parent().parent().parent().parent().parent().find('.spinner');
			spinner.removeClass('hide');
			var show_hide;
			var new_show_hide;
			if (element.val() == 'show') {
				show_hide = 1;
				new_show_hide = 'hide';
			} else {
				show_hide = 0;
				new_show_hide = 'show';				
			}
			$.post($('#dropdowns form').attr('action'),
				{ id: $(this).parent().find('.option_id input').val(), value: show_hide, key: 'show' },
				function(data) {
					element.val(new_show_hide);
					if (show_hide) {
						element.parent().parent().find('td.value').removeClass('em');						
					} else {
						element.parent().parent().find('td.value').addClass('em');
					}
					spinner.addClass('hide');
				}
			);
		} else if ($(this).hasClass('internal-option') || $(this).hasClass('public-option')) {
			element = $(this);
			spinner = $(this).parent().parent().parent().parent().parent().find('.spinner');
			spinner.removeClass('hide');	
			$(this).attr('disabled','disabled');
			if (element.val() == 'change to internal-only') {
				internal = 1;
				new_internal = 'change to public';
			} else {
				internal = 0;
				new_internal = 'change to internal-only';				
			}
			$.post($('#dropdowns form').attr('action'),
				{ id: $(this).parent().find('.option_id input').val(), value: internal, key: 'internal' },
				function(data) {
					element.val(new_internal);
					spinner.addClass('hide');
					$(this).removeAttr('disabled');
				}
			);			
		} else if ($(this).hasClass('edit-option')) { // edit
			var option_value = $(this).parent().parent().find('td.value');
			var option_input = $(this).parent().parent().parent().parent().parent().find('.text input');
			var input_button =...