From 67349402252c873dda5d64c6b6f042639b4e8156 Mon Sep 17 00:00:00 2001 From: Aris Feryanto Date: Sun, 20 Nov 2011 21:42:16 +0800 Subject: [PATCH] Add OK and Cancel button for grid editing --- js/makegrid.js | 48 ++++++++++++++++++--------------- themes/original/css/theme_right.css.php | 4 +++ themes/pmahomme/css/theme_right.css.php | 4 +++ 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/js/makegrid.js b/js/makegrid.js index 8fddbed9b9..b1b3259720 100644 --- a/js/makegrid.js +++ b/js/makegrid.js @@ -731,6 +731,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi if ($td.is(':not(.not_null)')) { // append a null checkbox $editArea.append('
Null :
'); + $editArea.show(); var $checkbox = $editArea.find('.null_div input'); // check if current is NULL if ($td.is('.null')) { @@ -780,6 +781,9 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi }); } + // append the content
for editArea, used for inserting element from AJAX request + $editArea.append('
'); + if ($td.is('.relation')) { //handle relations $editArea.addClass('edit_area_loading'); @@ -812,9 +816,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi // update the text input field, in case where the "Relational display column" is checked $(g.cEdit).find('.edit_box').val(value); } - - $editArea.append(data.dropdown); - $editArea.append('
' + g.cellEditHint + '
'); + $editArea.find('#editAreaContent').append(data.dropdown); }); // end $.post() $editArea.show(); @@ -842,8 +844,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi g.lastXHR = $.post('sql.php', post_params, function(data) { g.lastXHR = null; $editArea.removeClass('edit_area_loading'); - $editArea.append(data.dropdown); - $editArea.append('
' + g.cellEditHint + '
'); + $editArea.find('#editAreaContent').append(data.dropdown); }); // end $.post() $editArea.show(); @@ -872,8 +873,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi g.lastXHR = $.post('sql.php', post_params, function(data) { g.lastXHR = null; $editArea.removeClass('edit_area_loading'); - $editArea.append(data.select); - $editArea.append('
' + g.cellEditHint + '
'); + $editArea.find('#editAreaContent').append(data.select); }); // end $.post() $editArea.show(); @@ -885,7 +885,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi if ($td.is('.to_be_saved')) { // cell has been edited var value = $td.data('value'); $(g.cEdit).find('.edit_box').val(value); - $editArea.append(''); + $editArea.find('#editAreaContent').append(''); $editArea.find('textarea') .val(value) .live('keyup', function(e) { @@ -894,7 +894,6 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi $(g.cEdit).find('.edit_box').live('keyup', function(e) { $editArea.find('textarea').val($(this).val()); }); - $editArea.append('
' + g.cellEditHint + '
'); } else { //handle truncated/transformed values values $editArea.addClass('edit_area_loading'); @@ -926,7 +925,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi $td.data('original_data', data.value); $(g.cEdit).find('.edit_box').val(data.value); - $editArea.append(''); + $editArea.find('#editAreaContent').append(''); $editArea.find('textarea') .val(data.value) .live('keyup', function(e) { @@ -935,7 +934,6 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi $(g.cEdit).find('.edit_box').live('keyup', function(e) { $editArea.find('textarea').val($(this).val()); }); - $editArea.append('
' + g.cellEditHint + '
'); } else { PMA_ajaxShowMessage(data.error); @@ -954,7 +952,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi if ($td.is('.datefield')) { showTimeOption = false; } - PMA_addDatepicker($editArea, { + PMA_addDatepicker($editArea.find('#editAreaContent'), { altField: $input_field, showTimepicker: showTimeOption, onSelect: function(dateText, inst) { @@ -964,28 +962,34 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi }); // cancel any click on the datepicker element - $editArea.find('> *').click(function(e) { + $editArea.find('#editAreaContent').find('> *').click(function(e) { e.stopPropagation(); }); // force to restore modified $input_field value after adding datepicker // (after adding a datepicker, the input field doesn't display the time anymore, only the date) if (!is_null) { - $editArea.datetimepicker('setDate', current_datetime_value); + $editArea.find('#editAreaContent').datetimepicker('setDate', current_datetime_value); } else { $input_field.val(''); } - $editArea.append('
' + g.cellEditHint + '
'); + $editArea.show(); } else { g.isEditCellTextEditable = true; - // only append edit area hint if there is a null checkbox - if ($editArea.children().length > 0) { - $editArea.append('
' + g.cellEditHint + '
'); - } } - // If the edit area
contains at least one child, show the edit area - if ($editArea.children().length > 0) { - $editArea.show(); + // If the edit area
is visible, then add hint, OK and Cancel button + if ($editArea.is(':visible')) { + $editArea.append('
' + g.cellEditHint + '
'); + $editArea.append('
' + + '
'); + $editArea.find('#editArea_btnOk').click(function(e) { + e.preventDefault(); + g.saveOrPostEditedCell(); + }); + $editArea.find('#editArea_btnCancel').click(function(e) { + e.preventDefault(); + g.hideEditCell(true); + }); } // If the g.isEditCellTextEditable == false, disable the editCell if (! g.isEditCellTextEditable) { diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index 1284ae12c1..93c9499e25 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -2475,6 +2475,10 @@ span.CodeMirror-selected { padding: 0.2em 0.3em; } +.cEdit div.buttons { + text-align: right; +} + .saving_edited_data { background: url(getImgPath(); ?>ajax_clock_small.gif) no-repeat left; padding-left: 20px; diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index db300f32d6..b41f77bc16 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -2900,6 +2900,10 @@ span.CodeMirror-selected { padding: 0.2em 0.3em; } +.cEdit div.buttons { + text-align: right; +} + .saving_edited_data { background: url(getImgPath(); ?>ajax_clock_small.gif) no-repeat left; padding-left: 20px; -- 2.11.4.GIT