From c362fe1936904bcb0872d7b32fe6b0b4d4effef3 Mon Sep 17 00:00:00 2001
From: Chuck Scott <cscott@gaslightmedia.com>
Date: Fri, 22 Dec 2017 14:40:21 -0500
Subject: [PATCH] Reworked custom fields editing output due to standards
 violations. Added Edit and other features.

Now will not permit changing from or to picklist type when editing a field.
---
 models/admin/ajax/customFields.php   |  31 +-
 models/admin/customFields/index.php  |   4 +-
 views/admin/ajax/newField.html       |  57 ++--
 views/admin/ajax/newFieldOption.html |   5 +-
 views/admin/customFields/index.html  | 462 ++++++++++++++-------------
 5 files changed, 312 insertions(+), 247 deletions(-)

diff --git a/models/admin/ajax/customFields.php b/models/admin/ajax/customFields.php
index 9e7a50b..2049723 100644
--- a/models/admin/ajax/customFields.php
+++ b/models/admin/ajax/customFields.php
@@ -80,7 +80,7 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
         trigger_error(print_r($_REQUEST,1),E_USER_NOTICE);
 
         switch($_REQUEST['option']) {
-            
+
             case 'addNewField':
 
                 $customField = $this->insertEntry();
@@ -91,6 +91,7 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
 
                     // Add description for the selected field type
                     $customField['fieldData']['field_type_descr'] = $this->config['custom_field_type'][$customField['fieldData']['field_type']];
+trigger_error('**** 11111 *****'.print_r($res,1),E_USER_NOTICE);
 
                     // Produce HTML for the new field
                     $viewFile = 'admin/ajax/newField.html';
@@ -100,6 +101,30 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
 
                 break;
 
+            case 'updateField':
+
+                    $fieldId = ($_REQUEST['fieldId'] -0);
+                    if ($fieldId > 0) {
+                        $res = $this->updateEntry($fieldId);
+
+                        if ($res) {
+
+trigger_error('**** 22222 *****'.$_REQUEST['fieldId'].":".print_r($res,1),E_USER_NOTICE);
+
+                            $customField = $this->editEntry($fieldId);
+trigger_error('**** 33333 *****'.$_REQUEST['fieldId']." - ".print_r($customField,1),E_USER_NOTICE);
+
+                            // Produce HTML for the new field
+                            $viewFile = 'admin/ajax/newField.html';
+                            $newFieldHtml = $this->generateHTML($customField, $viewFile);
+                            echo $newFieldHtml;
+
+                        }
+
+                    }
+
+                break;
+
             case 'deleteField':
 
                 $fieldId = false;
@@ -114,7 +139,7 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
 
                 // Delete this custom field
                 $this->deleteEntry($fieldId, true);
-                
+
                 // Delete any field options
                 $this->wpdb->query(
                     $this->wpdb->prepare(
@@ -125,7 +150,7 @@ class GlmMembersAdmin_ajax_customFields extends GlmDataFieldsCustomFields
                         $fieldId
                     )
                 );
-                
+
                 echo true;
 
                 break;
diff --git a/models/admin/customFields/index.php b/models/admin/customFields/index.php
index 34a569f..c0af6bb 100644
--- a/models/admin/customFields/index.php
+++ b/models/admin/customFields/index.php
@@ -194,8 +194,8 @@ class GlmMembersAdmin_customFields_index extends GlmDataFieldsCustomFields
         if ( isset($custom_fields) && $custom_fields && count( $custom_fields ) > 0 ) {
             $haveCustomFields = true;
         }
-        
-        
+
+
         // Compile template data
         $template_data = array(
             'option2'             => $option,
diff --git a/views/admin/ajax/newField.html b/views/admin/ajax/newField.html
index 0dace59..f7e12d3 100644
--- a/views/admin/ajax/newField.html
+++ b/views/admin/ajax/newField.html
@@ -1,25 +1,42 @@
 {* A single line for the custom fields edit table *}
+    <tbody id="field_{$fieldData.id}">
         <tr class="FieldRow_{$fieldData.id}">
-            <td style="font-weight: bold; text-align: left;">{$fieldData.field_name}</td>
-            <td id="editFieldType_{$fieldData.id}">{$fieldData.field_type_descr}</td>
-            <td>{$fieldData.required.name}</td>
-            <td colspan="2">
-<!--                 <div class="glmCustomFieldsEditFieldButton  button button-secondary glm-button-small" data-fieldID="{$fieldData.id}" data-fieldName="{$fieldData.field_name|escape:'html'}" data-fieldPrompt="{$fieldData.field_prompt|escape:'html'}" data-fieldType="{$fieldData.field_type.name|escape:'html'}" data-adminSearch="{$fieldData.admin_search.value}" data-required="{$fieldData.required.value}">Edit</div>
- -->
-                <div class="{$fieldData.fid}_DeleteFieldButton button button-secondary glm-button-small" data-fieldID="{$fieldData.id}">Delete</div>
- {if $fieldData.field_type=='picklist'}
-                <div class="{$fieldData.fid}_AddOptionButton button button-secondary glm-button-small" data-fieldId="{$fieldData.id}">Add Option</div>
- {/if}                
+            <th style="font-weight: bold; text-align: left;" id="DisplayFieldName_{$fieldData.id}">{$fieldData.field_name}</th>
+            <td style="text-align: left;" id="DisplayFieldTypeDescr_{$fieldData.id}">{$fieldData.field_type_descr}</td>
+            <td style="text-align: left;" id="DisplayFieldPriority_{$fieldData.id}">{$fieldData.priority_display.name}</td>
+            <td style="text-align: left;" id="DisplayFieldRequired_{$fieldData.id}">{$fieldData.required.name}</td>
+            <td style="width: 10%; text-align: right;" colspan="2">
+                <div class="DeleteFieldButton_{$fieldData.fid} button button-secondary glm-button-small" data-fieldId="{$fieldData.id}">Delete</div>
+                <div id="DisplayFieldEditButton_{$fieldData.id}" class="EditFieldButton_{$fieldData.fid} button button-secondary glm-button-small" 
+                    data-fieldId="{$fieldData.id}" 
+                    data-fieldName="{$fieldData.field_name|escape:'html'}" 
+                    data-fieldPrompt="{$fieldData.field_prompt|escape:'html'}" 
+                    data-fieldType="{$fieldData.field_type}" 
+                    data-priority="{$fieldData.priority_display.value}"
+                    data-required="{$fieldData.required.value}"
+                >Edit</div>
             </td>
         </tr>
-        <tr class="FieldRow_{$fieldData.id}"><td colspan="4">Prompt: {$fieldData.field_prompt}</td></tr>
- {if $fieldData.field_type=='picklist'}
-        <tr class="FieldRow_{$fieldData.id}">
-            <th style="text-align: left; padding-left: 2rem;">Option Value</th>
-            <th style="text-align: left;">Option Text</th>
-            <th style="text-align: left;">Cost</th>
-            <th style="text-align: left;">Default</th>
-            <th>&nbsp;</th>
+        <tr class="FieldRow_{$fieldData.id} FieldRow_{$fieldData.id}_replace">
+            <td colspan="5" style="text-align: left; padding-left: 2rem;">Prompt: <span id="DisplayFieldPrompt_{$fieldData.id}">{$fieldData.field_prompt}</span></td>
+        </tr>
+    {if $t.field_type=='picklist'}
+        <tr id="PicklistField_{$fieldData.id}">
+            <td colspan="5" style="padding-left: 2rem;">
+                <table id="PicklistOptions_{$fieldData.id}" width="100%">
+                    <tr class="FieldRow_{$fieldData.id}" style="background-color: #ddd;">
+                        <th style="text-align: left;">Option Name</th>
+                        <th style="text-align: left;">Option Text</th>
+                        <th style="text-align: left;">Cost</th>
+                        <th style="text-align: left;">Default</th>
+                        <th style="text-align: right;">
+                            <div class="AddOptionButton_{$fieldData.fid} button button-secondary glm-button-small" data-fieldId="{$fieldData.id}">Add Option</div>
+                        </th>
+                    </tr>
+                </table>
+            </td>
         </tr>
- {/if}                
-        <tr id="EndOfFieldOptions_{$fieldData.id}"><td  style="border-bottom: 1px solid black;" colspan="5">&nbsp;</td></tr>
\ No newline at end of file
+    {/if}                
+        <tr id="EndOfField_{$fieldData.id}" class="FieldRow_{$fieldData.id}"><td  style="border-bottom: 1px solid black;" colspan="5">&nbsp;</td></tr>
+    </tbody>
+
diff --git a/views/admin/ajax/newFieldOption.html b/views/admin/ajax/newFieldOption.html
index 371b9da..f1618da 100644
--- a/views/admin/ajax/newFieldOption.html
+++ b/views/admin/ajax/newFieldOption.html
@@ -1,12 +1,13 @@
 {* A line describing the new picklist option. *}
 
 <tr id="FieldOptionRow_{$fieldData.id}" class="FieldRow_{$fieldData.field_id}">">
-    <td style="text-align: left; padding-left: 2rem;"">{$fieldData.option_value}</td>
+    <td style="text-align: left;">{$fieldData.option_value}</td>
     <td style="text-align: left;">{$fieldData.option_text}</td>
     <td style="text-align: left;">${$fieldData.option_cost}</td>
     <td style="text-align: left;">{$fieldData.option_default.name}</td>
-    <td style="text-align: left;">
+    <td style="text-align: right;">
         <div class="DeleteOptionButton_{$fieldData.fid} button button-secondary glm-button-small" data-fieldOptionId="{$fieldData.id}">Delete</div>
+        <div class="EditOptionButton_{$fieldData.fid} button button-secondary glm-button-small" data-fieldOptionId="{$fieldData.id}">Edit</div>
     </td>
 </tr>
 
diff --git a/views/admin/customFields/index.html b/views/admin/customFields/index.html
index cc1d6d4..6a4532f 100644
--- a/views/admin/customFields/index.html
+++ b/views/admin/customFields/index.html
@@ -1,23 +1,23 @@
 <!-- Add Custom Field Button and Dialog Box -->
 
-{* New field form *}
-<div id="{$fid}_NewFieldDialog" class="glm-dialog-box" style="width: 100%" title="Enter a New Custom Field">
+{* New/Edit field form *}
+<div id="FieldDialog_{$fid}" class="glm-dialog-box" style="width: 100%" title="Enter a New Custom Field">
     <table class="glm-admin-table" style="width: 100%">
         <tr>
             <th class="glm-required">Field Name:</th>
             <td>
-                <input id="{$fid}_NewFieldName" type="text" name="field_name" class="glm-form-text-input-short">
+                <input id="FieldName_{$fid}" type="text" name="field_name" class="glm-form-text-input-short">
                 <br>(for reference - keep short)
             </td>
         </tr>
         <tr>
             <th class="glm-required" style="width: 20%; white-space: nowrap;">User Prompt:</th>
-            <td><input id="{$fid}_NewFieldPrompt" type="text" name="field_prompt" class="glm-form-text-input"></td>
+            <td><input id="FieldPrompt_{$fid}" type="text" name="field_prompt" class="glm-form-text-input"></td>
         </tr>
         <tr>
             <th style="width: 20%; white-space: nowrap;" class="glm-required">Field Type:</th>
             <td>
-                <select id="{$fid}_NewFieldType" name="field_type">
+                <select id="FieldType_{$fid}" name="field_type">
                     <option value=""></option>
   {foreach $fieldTypes as $type}
                     <option value="{$type.type_name}">{$type.prompt}</option>
@@ -28,202 +28,204 @@
         <tr>
             <th style="width: 20%; white-space: nowrap;">Important Field:</th>
             <td>
-                <input id="{$fid}_NewFieldPriorityDisplay" type="checkbox" name="priority_display">
+                <input id="FieldPriorityDisplay_{$fid}" type="checkbox" name="priority_display">
                 Display when limited output is selected.
             </td>
         </tr>
         <tr>
             <th style="width: 20%; white-space: nowrap;">Required:</th>
-            <td><input id="{$fid}_NewFieldRequired" type="checkbox" name="required"></td>
+            <td><input id="FieldRequired_{$fid}" type="checkbox" name="required"></td>
         </tr>
     </table>
     <p><span class="glm-required">*</span> Required</p>
-    <div id="{$fid}_NewFieldCancel" class="button button-primary glm-right">Cancel</div>
-    <div id="{$fid}_NewFieldSubmit" class="button button-primary">Add new Custom Field</div>
-    <div id="{$fid}_NewFieldDialogError" class="glm-error" style="display: none;"><p>Unable to create custom field. Did you supply all required information?</p></div>
+    <div id="FieldCancel_{$fid}" class="button button-primary glm-right">Cancel</div>    
+    <div id="FieldSubmit_{$fid}" class="button button-primary" data-fieldId="">(name supplied by code below)</div>
+    <div id="FieldDialogError_{$fid}" class="glm-error" style="display: none;"><p>Unable to create custom field. Did you supply all required information?</p></div>
 </div>
 
 {* Delete field button confirmation dialog box *}
-<div id="{$fid}_DeleteFieldDialog" class="glm-dialog-box" title="Delete Field">
+<div id="DeleteFieldDialog_{$fid}" class="glm-dialog-box" title="Delete Field">
     <center>
         <p>Are you sure you want to delete this field?</p>
-        <p><div id="{$fid}_DeleteFieldConfirm" class="button button-primary">Yes, delete this field</div></p>
-        <p><div id="{$fid}_DeleteFieldCancel" class="button button-primary">Cancel</div></p>
+        <p><div id="DeleteFieldConfirm_{$fid}" class="button button-primary">Yes, delete this field</div></p>
+        <p><div id="DeleteFieldCancel_{$fid}" class="button button-primary">Cancel</div></p>
     </center>
 </div>
 
-{* Edit field dialog box -- NOT IMPLEMENTED YET *}
-<div id="{$fid}_editFieldDialog" class="glm-dialog-box" title="Edit this Field">
-        <table class="glm-admin-table" style="width: 100%;">
-            <tr>
-                <th class="glm-required" style="width: 20%; white-space: nowrap;">Field Name:</th>
-                <td><input id="{$fid}_editFieldName" type="text" name="field_name" class="glm-form-text-input-short"></td>
-            </tr>
-            <tr>
-                <th class="glm-required" style="width: 20%; white-space: nowrap;">User Prompt:</th>
-                <td><input id="{$fid}_editFieldPrompt" type="text" name="field_prompt" class="glm-form-text-input"></td>
-            </tr>
-            <tr>
-                <th class="glm-required" style="width: 20%; white-space: nowrap;">Field Type:</th>
-                <td>
-                    <select id="{$fid}_editFieldType" name="field_type">
-                        <option value=""></option>
-                        {foreach $field_types as $val => $label}
-                        <option value="{$val}">{$label}</option>
-                        {/foreach}
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <th>Priority:</th>
-                <td><input type="checkbox" id="{$fid}_editPriority" name="priority_display" value="1" /></td>
-            </tr>
-            <tr>
-                <th>Required:</th>
-                <td><input type="checkbox" id="{$fid}_editRequired" name="required" value="1" /></td>
-            </tr>
-        </table>
-        <p><span class="glm-required">*</span> Required</p>
-        <a id="{$fid}_editFieldCancel" class="button button-primary glm-right">Cancel</a>
-        <input type="submit" value="Update this Field">
-</div>
-
 {* New Picklist Option form *}
-<div id="{$fid}_NewOptionDialog" class="glm-dialog-box" style="width: 100%" title="Add a New Option">
+<div id="NewOptionDialog_{$fid}" class="glm-dialog-box" style="width: 100%" title="Add a New Option">
     <table class="glm-admin-table" style="width: 100%">
         <tr>
             <th class="glm-required" style="width: 20%; white-space: nowrap;">Option Name:</th>
             <td>
-                <input id="{$fid}_NewOptionValue" type="text" name="option_value" class="glm-form-text-input-short">
+                <input id="NewOptionValue_{$fid}" type="text" name="option_value" class="glm-form-text-input-short">
                 <br>(For reference - keep short)
             </td>
         </tr>
         <tr>
             <th class="glm-required">Displayed Text:</th>
-            <td><input id="{$fid}_NewOptionText" type="text" name="option_text" class="glm-form-text-input"></td>
+            <td><input id="NewOptionText_{$fid}" type="text" name="option_text" class="glm-form-text-input"></td>
         </tr>
         <tr>
             <th style="width: 20%; white-space: nowrap;">Selected by Dedault</th>
-            <td><input id="{$fid}_NewOptionDefault" type="checkbox" name="option_default"></td>
+            <td><input id="NewOptionDefault_{$fid}" type="checkbox" name="option_default"></td>
         </tr>
         <tr>
             <th>Cost:</th>
-            <td>$<input id="{$fid}_NewOptionCost" type="text" name="option_cost" class="glm-form-text-input-veryshort"></td>
+            <td>$<input id="NewOptionCost_{$fid}" type="text" name="option_cost" class="glm-form-text-input-veryshort"></td>
         </tr>
     </table>
     <p><span class="glm-required">*</span> Required</p>
-    <div id="{$fid}_NewOptionCancel" class="button button-primary glm-right">Cancel</div>
-    <div id="{$fid}_NewOptionSubmit" class="button button-primary" data-fieldId="">Add new Picklist Option</div>
-    <div id="{$fid}_NewOptionDialogError" class="glm-error" style="display: none;"><p>Unable to create picklist option. Did you supply all required information?</p></div>
+    <div id="NewOptionCancel_{$fid}" class="button button-primary glm-right">Cancel</div>
+    <div id="NewOptionSubmit_{$fid}" class="button button-primary" data-fieldId="">Add new Picklist Option</div>
+    <div id="NewOptionDialogError_{$fid}" class="glm-error" style="display: none;"><p>Unable to create picklist option. Did you supply all required information?</p></div>
 </div>
 
 {* Fields Table *}
-<table class="" style="width: 100%; background-color: #fff; border: 1px solid black; l">
+<table id="FieldsTable_{$fid}" class="" style="width: 100%; background-color: #fff; border: 1px solid black; l">
+    <thead>
         <tr style="background-color: #ddd;">
             <th style="text-align: left;">Field Name</th>
             <th style="text-align: left;">Type</th>
+            <th style="text-align: left;">Priority</th>
             <th style="text-align: left;">Required</th>
             <th style="text-align: left;" width="10%" colspan="2">
-                <div id="{$fid}_newFieldButton" class="button button-primary glm-button-small">Add a Custom Field</div>
+                <div id="newFieldButton_{$fid}" class="button button-primary glm-button-small">Add a Custom Field</div>
                 &nbsp;
             </th>
         </tr>
-    <tbody id="{$fid}_FieldsListBody">
+    </thead>
 {if $haveCustomFields}
   {foreach $custom_fields as $t}
+    <tbody id="field_{$t.id}">
         <tr class="FieldRow_{$t.id}">
-            <th style="font-weight: bold; text-align: left;">{$t.field_name}</th>
-            <td style="text-align: left;" id="editFieldType_{$t.id}">
-                {$t.field_type_descr}
-            </td>
-            <td style="text-align: left;">
-                {$t.required.name}
-            </td>
-            <td style="width: 10%; text-align: left;" colspan="2">
-<!--                <div class="{$fid}_EditFieldButton  button button-secondary glm-button-small" 
-                        data-fieldId="{$t.id}" 
-                        data-fieldName="{$t.field_name|escape:'html'}" 
-                        data-fieldPrompt="{$t.field_prompt|escape:'html'}" 
-                        data-fieldType="{$t.field_type.name|escape:'html'}" 
-                        data-priority="{$t.priority_display.value}"
-                        data-required="{$t.required.value}"
-                    >Edit</div>
- -->                 
-                <div class="{$fid}_DeleteFieldButton button button-secondary glm-button-small" data-fieldId="{$t.id}">Delete</div>
- {if $t.field_type=='picklist'}
-                <div class="{$fid}_AddOptionButton button button-secondary glm-button-small" data-fieldId="{$t.id}">Add Option</div>
- {/if}                
+            <th style="font-weight: bold; text-align: left;" id="DisplayFieldName_{$t.id}">{$t.field_name}</th>
+            <td style="text-align: left;" id="DisplayFieldTypeDescr_{$t.id}">{$t.field_type_descr}</td>
+            <td style="text-align: left;" id="DisplayFieldPriority_{$t.id}">{$t.priority_display.name}</td>
+            <td style="text-align: left;" id="DisplayFieldRequired_{$t.id}">{$t.required.name}</td>
+            <td style="width: 10%; text-align: right;" colspan="2">
+                <div class="DeleteFieldButton_{$fid} button button-secondary glm-button-small" data-fieldId="{$t.id}">Delete</div>
+                <div id="DisplayFieldEditButton_{$t.id}" class="EditFieldButton_{$fid} button button-secondary glm-button-small" 
+                    data-fieldId="{$t.id}" 
+                    data-fieldName="{$t.field_name|escape:'html'}" 
+                    data-fieldPrompt="{$t.field_prompt|escape:'html'}" 
+                    data-fieldType="{$t.field_type}" 
+                    data-priority="{$t.priority_display.value}"
+                    data-required="{$t.required.value}"
+                >Edit</div>
             </td>
         </tr>
-        <tr class="FieldRow_{$t.id}"><td colspan="4"">Prompt: {$t.field_prompt}</td></tr>
-    {if $t.field_type=='picklist'}
-        <tr class="FieldRow_{$t.id}">
-            <th style="text-align: left; padding-left: 2rem;">Option Name</th>
-            <th style="text-align: left;">Option Text</th>
-            <th style="text-align: left;">Cost</th>
-            <th style="text-align: left;">Default</th>
-            <th>&nbsp</th>
+        <tr class="FieldRow_{$t.id} FieldRow_{$t.id}_replace">
+            <td colspan="5" style="text-align: left; padding-left: 2rem;">Prompt: <span id="DisplayFieldPrompt_{$t.id}">{$t.field_prompt}</span></td>
         </tr>
-      {if $t.options}
-        {foreach $t.options as $option}
-        <tr id="FieldOptionRow_{$option.id}" class="FieldRow_{$t.id}">
-            <td style="text-align: left; padding-left: 2rem;">{$option.option_value}</td>
-            <td style="text-align: left;">{$option.option_text}</td>
-            <td style="text-align: left;">{$option.option_cost}</td>
-            <td style="text-align: left;">{$option.option_default.name}</td>
-            <td style="text-align: left;">
-                <div class="DeleteOptionButton_{$fid} button button-secondary glm-button-small" data-fieldOptionId="{$option.id}">Delete</div>
+    {if $t.field_type=='picklist'}
+        <tr id="PicklistField_{$t.id}">
+            <td colspan="5" style="padding-left: 2rem;">
+                <table id="PicklistOptions_{$t.id}" width="100%">
+                    <tr class="FieldRow_{$t.id}" style="background-color: #ddd;">
+                        <th style="text-align: left;">Option Name</th>
+                        <th style="text-align: left;">Option Text</th>
+                        <th style="text-align: left;">Cost</th>
+                        <th style="text-align: left;">Default</th>
+                        <th style="text-align: right;">
+                            <div class="AddOptionButton_{$fid} button button-secondary glm-button-small" data-fieldId="{$t.id}">Add Option</div>
+                        </th>
+                    </tr>
+                  {if $t.options}
+                    {foreach $t.options as $option}
+                    <tr id="FieldOptionRow_{$option.id}" class="FieldRow_{$t.id}">
+                        <td style="text-align: left;">{$option.option_value}</td>
+                        <td style="text-align: left;">{$option.option_text}</td>
+                        <td style="text-align: left;">${$option.option_cost|number_format:2}</td>
+                        <td style="text-align: left;">{$option.option_default.name}</td>
+                        <td style="text-align: right;">
+                            <div class="DeleteOptionButton_{$fid} button button-secondary glm-button-small" data-fieldOptionId="{$option.id}">Delete</div>
+                            <div class="EditOptionButton_{$fid} button button-secondary glm-button-small" data-fieldOptionId="{$option.id}">Edit</div>
+                        </td>
+                    </tr>
+                    {/foreach}
+                  {/if}
+                </table>
             </td>
         </tr>
-        {/foreach}
-      {/if}
-    {/if}
-        <tr id="EndOfFieldOptions_{$t.id}" class="FieldRow_{$t.id}"><td  style="border-bottom: 1px solid black;" colspan="5">&nbsp;</td></tr>
+    {/if}                
+        <tr id="EndOfField_{$fieldData.id}" class="FieldRow_{$fieldData.id}"><td  style="border-bottom: 1px solid black;" colspan="5">&nbsp;</td></tr>
+    </tbody>
   {/foreach}
 {/if}
-    </tbody>
 </table>
 <!-- Tests -->
 
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 
-    var {$fid}_deleteId = false;
+    var deleteId_{$fid} = false;
     
     /*
-     * New field dialog box
+     * New/Edit field dialog box
      */
-    // Ssetup
-    $("#{$fid}_NewFieldDialog").dialog({
+    // Setup
+    $("#FieldDialog_{$fid}").dialog({
         autoOpen: false,
         minWidth: 600,
         dialogClass: "glm-dialog-no-close"
     });
+    // Cancel
+    $('#FieldCancel_{$fid}').click( function() {
+        $("#FieldDialog_{$fid}").dialog("close");
+    });
+
+    /*
+     * New Field Form
+     */
     // Display form and reset all input
-    $('#{$fid}_newFieldButton').click( function() {
-        $("#{$fid}_NewFieldDialog").dialog("open");
-        $('#{$fid}_NewFieldName').val('');
-        $('#{$fid}_NewFieldPrompt').val('');
-        $('#{$fid}_NewFieldType').prop('selectedIndex',0);
-        $('#{$fid}_NewFieldPriorityDisplay').removeAttr('checked');
-        $('#{$fid}_NewFieldRequired').removeAttr('checked');
+    $('#newFieldButton_{$fid}').click( function() {
+        $('#FieldSubmit_{$fid}').data('data-fieldId', '');
+        $('#FieldName_{$fid}').val('');
+        $('#FieldPrompt_{$fid}').val('');
+        $('#FieldType_{$fid}').prop('selectedIndex',0);
+        $('#FieldPriorityDisplay_{$fid}').removeAttr('checked');
+        $('#FieldRequired_{$fid}').removeAttr('checked');
+
+        $('#FieldSubmit_{$fid}').html('New Custom Field');
+        $("#FieldDialog_{$fid}").dialog('open');
     });
-    // Submit form
-    $('#{$fid}_NewFieldSubmit').click( function() {
 
-        // Collect the new field data
+    /*
+     * Submit Field
+     */
+    $('#FieldSubmit_{$fid}').click( function() {
+
+        var customFieldSubmitOption = 'addNewField';
+        if ($('#FieldSubmit_{$fid}').data('data-fieldId') != '') {
+            customFieldSubmitOption = 'updateField';
+        }
+
+        // Collect the new / edited field data
         var formData = {
             'action':           'glm_members_admin_ajax',
             'glm_action':       'customFields',
-            'option':           'addNewField',
+            'option':           customFieldSubmitOption,
             'fid':              '{$fid}',
-            'field_name':       $('#{$fid}_NewFieldName').val(),
-            'field_prompt':     $('#{$fid}_NewFieldPrompt').val(),
-            'field_type':       $('#{$fid}_NewFieldType').val(),
-            'priority_display': $('#{$fid}_NewFieldPriorityDisplay').is(':checked'),
-            'required':         $('#{$fid}_NewFieldRequired').is(':checked')
+            'fieldId':          $('#FieldSubmit_{$fid}').data('data-fieldId'),
+            'field_name':       $('#FieldName_{$fid}').val(),
+            'field_prompt':     $('#FieldPrompt_{$fid}').val(),
+            'field_type':       $('#FieldType_{$fid}').val(),
+            'priority_display': $('#FieldPriorityDisplay_{$fid}').is(':checked'),
+            'required':         $('#FieldRequired_{$fid}').is(':checked')
         };
 
+        // Check changing from and to picklist
+        if (customFieldSubmitOption == 'updateField') {
+            var currentType = $('#DisplayFieldEditButton_' + formData.fieldId).attr('data-fieldType');
+          
+            if ((currentType == 'picklist' || formData.field_type == 'picklist') && currentType != formData.field_type) {
+                alert('Sorry, you are not permitted to change the field type from a picklist to something\nelse or to a picklist from something else.\n\nConsider creating a new field.\n\n');
+                return false
+            }
+        }
+        
+
         // Submit new field data - expect field new ID back
         $.ajax({
             type:       'POST',
@@ -234,95 +236,111 @@ jQuery(document).ready(function($) {
         })
         .done( function(fieldHtml) {
             if (fieldHtml == '') {
-                flashElement('{$fid}_NewFieldDialogError');
+                flashElement('FieldDialogError_{$fid}');
             } else {
 
-                // Add new field to form
-                $('#{$fid}_FieldsListBody').append(fieldHtml);
-                $("#{$fid}_NewFieldDialog").dialog("close");
-
-                // Need to rebind some buttons
-                $('body').off('click', '.{$fid}_EditFieldButton', {$fid}_editFieldButton);
-                $('body').on('click', '.{$fid}_EditFieldButton', {$fid}_editFieldButton);
-                $('body').off('click', '.{$fid}_DeleteFieldButton', {$fid}_deleteFieldButton);
-                $('body').on('click', '.{$fid}_DeleteFieldButton', {$fid}_deleteFieldButton);
-                $('body').off('click', '.{$fid}_AddOptionButton', {$fid}_AddOptionButton);
-                $('body').on('click', '.{$fid}_AddOptionButton', {$fid}_AddOptionButton);
-                $('body').off('click', '#{$fid}_NewOptionCancel', {$fid}_NewOptionCancel);
-                $('body').on('click', '#{$fid}_NewOptionCancel', {$fid}_NewOptionCancel);
+                // If this is a new field
+                if (customFieldSubmitOption == 'addNewField') {
+
+                    // Add new field HTML
+                    $('#FieldsTable_{$fid}').append(fieldHtml);
+
+                    // Need to rebind some buttons
+                    $('body').off('click', '.EditFieldButton_{$fid}', editFieldButton_{$fid});
+                    $('body').on('click', '.EditFieldButton_{$fid}', editFieldButton_{$fid});
+                    $('body').off('click', '.DeleteFieldButton_{$fid}', deleteFieldButton_{$fid});
+                    $('body').on('click', '.DeleteFieldButton_{$fid}', deleteFieldButton_{$fid});
+                    $('body').off('click', '.AddOptionButton_{$fid}', addOptionButton_{$fid});
+                    $('body').on('click', '.AddOptionButton_{$fid}', addOptionButton_{$fid});
+                    $('body').off('click', '#NewOptionCancel_{$fid}', NewOptionCancel_{$fid});
+                    $('body').on('click', '#NewOptionCancel_{$fid}', NewOptionCancel_{$fid});
+
+                // Otherwise this is a field update
+                } else {
+                    
+                    var fieldId = formData.fieldId;
+                    var priority = (formData.priority_display == true ? 'Yes':'No');
+                    var required = (formData.required == true ? 'Yes':'No');
+
+                    // Update the displayed values 
+                    $('#DisplayFieldName_' + fieldId).html(formData.field_name);
+                    $('#DisplayFieldTypeDescr_' + fieldId).html($('#FieldType_{$fid} :selected').text());                    
+                    $('#DisplayFieldPriority_' + fieldId).html((formData.priority_display ? 'Yes':'No'));
+                    $('#DisplayFieldRequired_' + fieldId).html((formData.required ? 'Yes':'No'));
+                    $('#DisplayFieldPrompt_' + fieldId).html(formData.field_prompt);
+
+                    // Update hidden values used for editing
+                    $('#DisplayFieldEditButton_' + fieldId).attr('data-fieldType', formData.field_type);
+                    $('#DisplayFieldEditButton_' + fieldId).attr('data-priority', (formData.priority_display ? 1 : 0));
+                    $('#DisplayFieldEditButton_' + fieldId).attr('data-required', (formData.required ? 1 : 0));
+
+                }
+                $("#FieldDialog_{$fid}").dialog("close");
             }
         });
         
     });
-    // Cancel
-    $('#{$fid}_NewFieldCancel').click( function() {
-        $("#{$fid}_NewFieldDialog").dialog("close");
-    });
 
     /*
-     * Edit field dialog box
+     * Edit field 
      */
-    // Setup
-    $("#editFieldDialog").dialog({
-        autoOpen: false,
-        minWidth: 400,
-        dialogClass: "glm-dialog-no-close"
-    });
-    // Display form
-    $('body').on('click', '.{$fid}_EditFieldButton', {$fid}_editFieldButton);
-    function {$fid}_editFieldButton(e) {
-        var fieldID     = $(this).attr('data-fieldId');
+    $('body').on('click', '.EditFieldButton_{$fid}', editFieldButton_{$fid});
+    function editFieldButton_{$fid}(e) {
+
+        var fieldId     = $(this).attr('data-fieldId');
         var fieldName   = $(this).attr('data-fieldName');
         var fieldPrompt = $(this).attr('data-fieldPrompt');
         var fieldType   = $(this).attr('data-fieldType');
-        var priority    = $(this).attr('data-priority');
-        var required    = $(this).attr('data-required');
-        
-        $('#editFieldID').val(fieldID);
-        $('#editFieldName').val(fieldName.trim());
-        $('#editFieldPrompt').val(fieldPrompt.trim());
-        $('#editFieldType').val(fieldType);
-        
-        // check required fields
-        if (required === '1') {
-            $('#editRequired').prop('checked', true);
-        } else {
-            console.log('setting the checked to false');
-            $('#editRequired').prop('checked', false);
-        }
-        $("#editFieldDialog").dialog("open");
+        var priority    = ($(this).attr('data-priority') == 1);
+        var required    = ($(this).attr('data-required') == 1);
+
+        $('#FieldSubmit_{$fid}').data('data-fieldId', fieldId);
+        $('#FieldName_{$fid}').val(fieldName);
+        $('#FieldPrompt_{$fid}').val(fieldPrompt);
+        $('#FieldType_{$fid}').val(fieldType);
+        $('#FieldPriorityDisplay_{$fid}').prop('checked', priority);
+        $('#FieldRequired_{$fid}').prop('checked', required);
+
+        $('#FieldSubmit_{$fid}').html('Update Custom Field');
+        $("#FieldDialog_{$fid}").dialog("open");
     }
-    // Cancel
-    $('#editFieldCancel').click( function() {
-        $("#editFieldDialog").dialog("close");
-    });
 
     /*
-     * Delete field dialog box
+     * Delete Field Dialog
      */
     // Setup
-    $("#{$fid}_DeleteFieldDialog").dialog({
+    $("#DeleteFieldDialog_{$fid}").dialog({
         autoOpen: false,
         minWidth: 400,
         dialogClass: "glm-dialog-no-close"
     });
-    // Display form    
-    $('body').on('click', '.{$fid}_DeleteFieldButton', {$fid}_deleteFieldButton);
-    function {$fid}_deleteFieldButton() {
-        $('#{$fid}_DeleteFieldConfirm').data('data-fieldId', $(this).attr('data-fieldId'));
-        $("#{$fid}_DeleteFieldDialog").dialog("open");
+
+    /*
+     * Delete Field
+     */
+    $('body').on('click', '.DeleteFieldButton_{$fid}', deleteFieldButton_{$fid});
+    function deleteFieldButton_{$fid}() {
+        $('#DeleteFieldConfirm_{$fid}').data('data-fieldId', $(this).attr('data-fieldId'));
+        $("#DeleteFieldDialog_{$fid}").dialog("open");
     }
-    // Delete confirmed
-    $('#{$fid}_DeleteFieldConfirm').click( function() {
+    // Cancel
+    $('#DeleteFieldCancel_{$fid}').click( function() {
+        $("#DeleteFieldDialog_{$fid}").dialog("close");
+    });
 
-        var {$fid}_deleteId = $('#{$fid}_DeleteFieldConfirm').data('data-fieldId');
+    /*
+     * Delete Field Submit
+     */
+    $('#DeleteFieldConfirm_{$fid}').click( function() {
+
+        var deleteId_{$fid} = $('#DeleteFieldConfirm_{$fid}').data('data-fieldId');
         
         // Delete the selected form and remove it from the display
         var formData = {
             'action':       'glm_members_admin_ajax',
             'glm_action':   'customFields',
             'option':       'deleteField',
-            'id':           {$fid}_deleteId,
+            'id':           deleteId_{$fid},
             'fid':          '{$fid}'
         };
         $.ajax({
@@ -333,51 +351,58 @@ jQuery(document).ready(function($) {
             dataType:   'text'
         })
         .done( function(deleted) {
-            $('.FieldRow_' + {$fid}_deleteId).remove();
-            $("#{$fid}_DeleteFieldDialog").dialog("close");
+            $('#field_' + deleteId_{$fid}).remove();
+            $("#DeleteFieldDialog_{$fid}").dialog("close");
         });
         
     });
-    // Cancel
-    $('#{$fid}_DeleteFieldCancel').click( function() {
-        $("#{$fid}_DeleteFieldDialog").dialog("close");
-    });
 
     /*
-     * New Picklist Option dialog box
+     * New Picklist Option Dialog
      */
     // Setup
-    $("#{$fid}_NewOptionDialog").dialog({
+    $("#NewOptionDialog_{$fid}").dialog({
         autoOpen: false,
         minWidth: 600,
         dialogClass: "glm-dialog-no-close"
     });
-    // Display form and reset all input
-    $('body').on('click', '.{$fid}_AddOptionButton', {$fid}_AddOptionButton);
-    function {$fid}_AddOptionButton(e) {
-        var {$fid}_fieldId = $(this).attr('data-fieldId');
+    // Cancel
+    $('body').on('click', '#NewOptionCancel_{$fid}', NewOptionCancel_{$fid});
+    function NewOptionCancel_{$fid}(e) {
+        $("#NewOptionDialog_{$fid}").dialog("close");
+    };
+    
+    /*
+     * Add Field Option
+     */
+    $('body').on('click', '.AddOptionButton_{$fid}', addOptionButton_{$fid});
+    function addOptionButton_{$fid}(e) {
+        var fieldId_{$fid} = $(this).attr('data-fieldId');
         
-        $("#{$fid}_NewOptionDialog").dialog("open");
-        $('#{$fid}_NewOptionValue').val('');
-        $('#{$fid}_NewOptionText').val('');
-        $('#{$fid}_NewOptionDefault').removeAttr('checked');
-        $('#{$fid}_NewOptionCost').val('');
+        $("#NewOptionDialog_{$fid}").dialog("open");
+        $('#NewOptionValue_{$fid}').val('');
+        $('#NewOptionText_{$fid}').val('');
+        $('#NewOptionDefault_{$fid}').removeAttr('checked');
+        $('#NewOptionCost_{$fid}').val('0.00');
         
-        $('#{$fid}_NewOptionSubmit').data('data-fieldId', $(this).attr('data-fieldId'));
+        $('#NewOptionSubmit_{$fid}').data('data-fieldId', $(this).attr('data-fieldId'));
     };
-    // Submit form
-    $('#{$fid}_NewOptionSubmit').click( function(e) {
+
+    /*
+     * Add New Option Submit
+     */
+    $('#NewOptionSubmit_{$fid}').click( function(e) {
 
         // Collect the new field data
         var formData = {
             'action':           'glm_members_admin_ajax',
             'glm_action':       'customFieldOptions',
             'option':           'addNewOption',
-            'field_id':         $('#{$fid}_NewOptionSubmit').data('data-fieldId'),
-            'option_value':     $('#{$fid}_NewOptionValue').val(),
-            'option_text':      $('#{$fid}_NewOptionText').val(),
-            'option_cost':      $('#{$fid}_NewOptionCost').val(),
-            'option_default':   $('#{$fid}_NewOptionDefault').is(':checked'),
+            'field_id':         $('#NewOptionSubmit_{$fid}').data('data-fieldId'),
+            'option_value':     $('#NewOptionValue_{$fid}').val(),
+            'option_text':      $('#NewOptionText_{$fid}').val(),
+            'option_cost':      $('#NewOptionCost_{$fid}').val(),
+            'option_default':   $('#NewOptionDefault_{$fid}').is(':checked'),
             'fid':              '{$fid}'
         };
 
@@ -391,11 +416,12 @@ jQuery(document).ready(function($) {
         })
         .done( function(optionHtml) {
             if (optionHtml == '') {
-                flashElement('{$fid}_NewFieldDialogError');
+                flashElement('FieldDialogError_{$fid}');
             } else {
-                var {$fid}_fieldId = $('#{$fid}_NewOptionSubmit').data('data-fieldId');      
-                $('#EndOfFieldOptions_'+{$fid}_fieldId).before(optionHtml);
-                $("#{$fid}_NewOptionDialog").dialog("close");
+                var fieldId_{$fid} = $('#NewOptionSubmit_{$fid}').data('data-fieldId');      
+                $('#PicklistOptions_'+fieldId_{$fid}).append(optionHtml);
+                
+                $("#NewOptionDialog_{$fid}").dialog("close");
 
                 // Need to rebind delete option buttons
                 $('body').off('click', '.DeleteOptionButton_{$fid}', DeleteOptionButton_{$fid});
@@ -404,23 +430,19 @@ jQuery(document).ready(function($) {
         });
         
     });
-    // Cancel
-    $('body').on('click', '#{$fid}_NewOptionCancel', {$fid}_NewOptionCancel);
-    function {$fid}_NewOptionCancel(e) {
-        $("#{$fid}_NewOptionDialog").dialog("close");
-    };
+
     // Delete
     $('body').on('click', '.DeleteOptionButton_{$fid}', DeleteOptionButton_{$fid});
     function DeleteOptionButton_{$fid}(e) {
         
-        var {$fid}_optionDeleteId = $(this).attr('data-fieldOptionId');
+        var optionDeleteId_{$fid} = $(this).attr('data-fieldOptionId');
 
         // Delete the selected option and remove it from the display
         var formData = {
             'action':       'glm_members_admin_ajax',
             'glm_action':   'customFieldOptions',
             'option':       'deleteOption',
-            'id':           {$fid}_optionDeleteId,
+            'id':           optionDeleteId_{$fid},
             'fid':          '{$fid}'
         };
         $.ajax({
@@ -431,7 +453,7 @@ jQuery(document).ready(function($) {
             dataType:   'text'
         })
         .done( function(deleted) {
-            $('#FieldOptionRow_' + {$fid}_optionDeleteId).remove();
+            $('#FieldOptionRow_' + optionDeleteId_{$fid}).remove();
         });
         
     };
-- 
2.17.1