simpletool 0.0.1 → 0.0.2

data/lib/support/phpmyadmin/phpmyadmin/js/makegrid.js

@@ -0,0 +1,1973 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Create advanced table (resize, reorder, and show/hide columns; and also grid editing).
+ * This function is designed mainly for table DOM generated from browsing a table in the database.
+ * For using this function in other table DOM, you may need to:
+ * - add "draggable" class in the table header <th>, in order to make it resizable, sortable or hidable
+ * - have at least one non-"draggable" header in the table DOM for placing column visibility drop-down arrow
+ * - pass the value "false" for the parameter "enableGridEdit"
+ * - adjust other parameter value, to select which features that will be enabled
+ *
+ * @param t the table DOM element
+ * @param enableResize Optional, if false, column resizing feature will be disabled
+ * @param enableReorder Optional, if false, column reordering feature will be disabled
+ * @param enableVisib Optional, if false, show/hide column feature will be disabled
+ * @param enableGridEdit Optional, if false, grid editing feature will be disabled
+ */
+function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdit) {
+    var g = {
+        /***********
+         * Constant
+         ***********/
+        minColWidth: 15,
+
+
+        /***********
+         * Variables, assigned with default value, changed later
+         ***********/
+        actionSpan: 5,              // number of colspan in Actions header in a table
+        tableCreateTime: null,      // table creation time, used for saving column order and visibility to server, only available in "Browse tab"
+
+        // Column reordering variables
+        colOrder: [],      // array of column order
+
+        // Column visibility variables
+        colVisib: [],      // array of column visibility
+        showAllColText: '',         // string, text for "show all" button under column visibility list
+        visibleHeadersCount: 0,     // number of visible data headers
+
+        // Table hint variables
+        reorderHint: '',            // string, hint for column reordering
+        sortHint: '',               // string, hint for column sorting
+        markHint: '',               // string, hint for column marking
+        copyHint: '',               // string, hint for copy column name
+        showReorderHint: false,
+        showSortHint: false,
+        showMarkHint: false,
+
+        // Grid editing
+        isCellEditActive: false,    // true if current focus is in edit cell
+        isEditCellTextEditable: false,  // true if current edit cell is editable in the text input box (not textarea)
+        currentEditCell: null,      // reference to <td> that currently being edited
+        cellEditHint: '',           // hint shown when doing grid edit
+        gotoLinkText: '',           // "Go to link" text
+        wasEditedCellNull: false,   // true if last value of the edited cell was NULL
+        maxTruncatedLen: 0,         // number of characters that can be displayed in a cell
+        saveCellsAtOnce: false,     // $cfg[saveCellsAtOnce]
+        isCellEdited: false,        // true if at least one cell has been edited
+        saveCellWarning: '',        // string, warning text when user want to leave a page with unsaved edited data
+        lastXHR : null,             // last XHR object used in AJAX request
+        isSaving: false,            // true when currently saving edited data, used to handle double posting caused by pressing ENTER in grid edit text box in Chrome browser
+        alertNonUnique: '',         // string, alert shown when saving edited nonunique table
+
+        // Common hidden inputs
+        token: null,
+        server: null,
+        db: null,
+        table: null,
+
+
+        /************
+         * Functions
+         ************/
+
+        /**
+         * Start to resize column. Called when clicking on column separator.
+         *
+         * @param e event
+         * @param obj dragged div object
+         */
+        dragStartRsz: function (e, obj) {
+            var n = $(g.cRsz).find('div').index(obj);    // get the index of separator (i.e., column index)
+            $(obj).addClass('colborder_active');
+            g.colRsz = {
+                x0: e.pageX,
+                n: n,
+                obj: obj,
+                objLeft: $(obj).position().left,
+                objWidth: $(g.t).find('th.draggable:visible:eq(' + n + ') span').outerWidth()
+            };
+            $(document.body).css('cursor', 'col-resize').noSelect();
+            if (g.isCellEditActive) {
+                g.hideEditCell();
+            }
+        },
+
+        /**
+         * Start to reorder column. Called when clicking on table header.
+         *
+         * @param e event
+         * @param obj table header object
+         */
+        dragStartReorder: function (e, obj) {
+            // prepare the cCpy (column copy) and cPointer (column pointer) from the dragged column
+            $(g.cCpy).text($(obj).text());
+            var objPos = $(obj).position();
+            $(g.cCpy).css({
+                top: objPos.top + 20,
+                left: objPos.left,
+                height: $(obj).height(),
+                width: $(obj).width()
+            });
+            $(g.cPointer).css({
+                top: objPos.top
+            });
+
+            // get the column index, zero-based
+            var n = g.getHeaderIdx(obj);
+
+            g.colReorder = {
+                x0: e.pageX,
+                y0: e.pageY,
+                n: n,
+                newn: n,
+                obj: obj,
+                objTop: objPos.top,
+                objLeft: objPos.left
+            };
+
+            $(document.body).css('cursor', 'move').noSelect();
+            if (g.isCellEditActive) {
+                g.hideEditCell();
+            }
+        },
+
+        /**
+         * Handle mousemove event when dragging.
+         *
+         * @param e event
+         */
+        dragMove: function (e) {
+            if (g.colRsz) {
+                var dx = e.pageX - g.colRsz.x0;
+                if (g.colRsz.objWidth + dx > g.minColWidth) {
+                    $(g.colRsz.obj).css('left', g.colRsz.objLeft + dx + 'px');
+                }
+            } else if (g.colReorder) {
+                // dragged column animation
+                var dx = e.pageX - g.colReorder.x0;
+                $(g.cCpy)
+                    .css('left', g.colReorder.objLeft + dx)
+                    .show();
+
+                // pointer animation
+                var hoveredCol = g.getHoveredCol(e);
+                if (hoveredCol) {
+                    var newn = g.getHeaderIdx(hoveredCol);
+                    g.colReorder.newn = newn;
+                    if (newn != g.colReorder.n) {
+                        // show the column pointer in the right place
+                        var colPos = $(hoveredCol).position();
+                        var newleft = newn < g.colReorder.n ?
+                                      colPos.left :
+                                      colPos.left + $(hoveredCol).outerWidth();
+                        $(g.cPointer)
+                            .css({
+                                left: newleft,
+                                visibility: 'visible'
+                            });
+                    } else {
+                        // no movement to other column, hide the column pointer
+                        $(g.cPointer).css('visibility', 'hidden');
+                    }
+                }
+            }
+        },
+
+        /**
+         * Stop the dragging action.
+         *
+         * @param e event
+         */
+        dragEnd: function (e) {
+            if (g.colRsz) {
+                var dx = e.pageX - g.colRsz.x0;
+                var nw = g.colRsz.objWidth + dx;
+                if (nw < g.minColWidth) {
+                    nw = g.minColWidth;
+                }
+                var n = g.colRsz.n;
+                // do the resizing
+                g.resize(n, nw);
+
+                g.reposRsz();
+                g.reposDrop();
+                g.colRsz = false;
+                $(g.cRsz).find('div').removeClass('colborder_active');
+                rearrangeStickyColumns($(t).prev('.sticky_columns'), $(t));
+            } else if (g.colReorder) {
+                // shift columns
+                if (g.colReorder.newn != g.colReorder.n) {
+                    g.shiftCol(g.colReorder.n, g.colReorder.newn);
+                    // assign new position
+                    var objPos = $(g.colReorder.obj).position();
+                    g.colReorder.objTop = objPos.top;
+                    g.colReorder.objLeft = objPos.left;
+                    g.colReorder.n = g.colReorder.newn;
+                    // send request to server to remember the column order
+                    if (g.tableCreateTime) {
+                        g.sendColPrefs();
+                    }
+                    g.refreshRestoreButton();
+                }
+
+                // animate new column position
+                $(g.cCpy).stop(true, true)
+                    .animate({
+                        top: g.colReorder.objTop,
+                        left: g.colReorder.objLeft
+                    }, 'fast')
+                    .fadeOut();
+                $(g.cPointer).css('visibility', 'hidden');
+
+                g.colReorder = false;
+                rearrangeStickyColumns($(t).prev('.sticky_columns'), $(t));
+            }
+            $(document.body).css('cursor', 'inherit').noSelect(false);
+        },
+
+        /**
+         * Resize column n to new width "nw"
+         *
+         * @param n zero-based column index
+         * @param nw new width of the column in pixel
+         */
+        resize: function (n, nw) {
+            $(g.t).find('tr').each(function () {
+                $(this).find('th.draggable:visible:eq(' + n + ') span,' +
+                             'td:visible:eq(' + (g.actionSpan + n) + ') span')
+                       .css('width', nw);
+            });
+        },
+
+        /**
+         * Reposition column resize bars.
+         */
+        reposRsz: function () {
+            $(g.cRsz).find('div').hide();
+            var $firstRowCols = $(g.t).find('tr:first th.draggable:visible');
+            var $resizeHandles = $(g.cRsz).find('div').removeClass('condition');
+            $(g.t).find('table.pma_table').find('thead th:first').removeClass('before-condition');
+            for (var n = 0, l = $firstRowCols.length; n < l; n++) {
+                var $col = $($firstRowCols[n]);
+                var colWidth;
+                if (navigator.userAgent.toLowerCase().indexOf("safari") != -1) {
+                    colWidth = $col.outerWidth();
+                } else {
+                    colWidth = $col.outerWidth(true);
+                }
+                $($resizeHandles[n]).css('left', $col.position().left + colWidth)
+                   .show();
+                if ($col.hasClass('condition')) {
+                    $($resizeHandles[n]).addClass('condition');
+                    if (n > 0) {
+                        $($resizeHandles[n - 1]).addClass('condition');
+                    }
+                }
+            }
+            if ($($resizeHandles[0]).hasClass('condition')) {
+                $(g.t).find('thead th:first').addClass('before-condition');
+            }
+            $(g.cRsz).css('height', $(g.t).height());
+        },
+
+        /**
+         * Shift column from index oldn to newn.
+         *
+         * @param oldn old zero-based column index
+         * @param newn new zero-based column index
+         */
+        shiftCol: function (oldn, newn) {
+            $(g.t).find('tr').each(function () {
+                if (newn < oldn) {
+                    $(this).find('th.draggable:eq(' + newn + '),' +
+                                 'td:eq(' + (g.actionSpan + newn) + ')')
+                           .before($(this).find('th.draggable:eq(' + oldn + '),' +
+                                                'td:eq(' + (g.actionSpan + oldn) + ')'));
+                } else {
+                    $(this).find('th.draggable:eq(' + newn + '),' +
+                                 'td:eq(' + (g.actionSpan + newn) + ')')
+                           .after($(this).find('th.draggable:eq(' + oldn + '),' +
+                                               'td:eq(' + (g.actionSpan + oldn) + ')'));
+                }
+            });
+            // reposition the column resize bars
+            g.reposRsz();
+
+            // adjust the column visibility list
+            if (newn < oldn) {
+                $(g.cList).find('.lDiv div:eq(' + newn + ')')
+                          .before($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
+            } else {
+                $(g.cList).find('.lDiv div:eq(' + newn + ')')
+                          .after($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
+            }
+            // adjust the colOrder
+            var tmp = g.colOrder[oldn];
+            g.colOrder.splice(oldn, 1);
+            g.colOrder.splice(newn, 0, tmp);
+            // adjust the colVisib
+            if (g.colVisib.length > 0) {
+                tmp = g.colVisib[oldn];
+                g.colVisib.splice(oldn, 1);
+                g.colVisib.splice(newn, 0, tmp);
+            }
+        },
+
+        /**
+         * Find currently hovered table column's header (excluding actions column).
+         *
+         * @param e event
+         * @return the hovered column's th object or undefined if no hovered column found.
+         */
+        getHoveredCol: function (e) {
+            var hoveredCol;
+            $headers = $(g.t).find('th.draggable:visible');
+            $headers.each(function () {
+                var left = $(this).offset().left;
+                var right = left + $(this).outerWidth();
+                if (left <= e.pageX && e.pageX <= right) {
+                    hoveredCol = this;
+                }
+            });
+            return hoveredCol;
+        },
+
+        /**
+         * Get a zero-based index from a <th class="draggable"> tag in a table.
+         *
+         * @param obj table header <th> object
+         * @return zero-based index of the specified table header in the set of table headers (visible or not)
+         */
+        getHeaderIdx: function (obj) {
+            return $(obj).parents('tr').find('th.draggable').index(obj);
+        },
+
+        /**
+         * Reposition the columns back to normal order.
+         */
+        restoreColOrder: function () {
+            // use insertion sort, since we already have shiftCol function
+            for (var i = 1; i < g.colOrder.length; i++) {
+                var x = g.colOrder[i];
+                var j = i - 1;
+                while (j >= 0 && x < g.colOrder[j]) {
+                    j--;
+                }
+                if (j != i - 1) {
+                    g.shiftCol(i, j + 1);
+                }
+            }
+            if (g.tableCreateTime) {
+                // send request to server to remember the column order
+                g.sendColPrefs();
+            }
+            g.refreshRestoreButton();
+        },
+
+        /**
+         * Send column preferences (column order and visibility) to the server.
+         */
+        sendColPrefs: function () {
+            if ($(g.t).is('.ajax')) {   // only send preferences if ajax class
+                var post_params = {
+                    ajax_request: true,
+                    db: g.db,
+                    table: g.table,
+                    token: g.token,
+                    server: g.server,
+                    set_col_prefs: true,
+                    table_create_time: g.tableCreateTime
+                };
+                if (g.colOrder.length > 0) {
+                    $.extend(post_params, {col_order: g.colOrder.toString()});
+                }
+                if (g.colVisib.length > 0) {
+                    $.extend(post_params, {col_visib: g.colVisib.toString()});
+                }
+                $.post('sql.php', post_params, function (data) {
+                    if (data.success !== true) {
+                        var $temp_div = $(document.createElement('div'));
+                        $temp_div.html(data.error);
+                        $temp_div.addClass("error");
+                        PMA_ajaxShowMessage($temp_div, false);
+                    }
+                });
+            }
+        },
+
+        /**
+         * Refresh restore button state.
+         * Make restore button disabled if the table is similar with initial state.
+         */
+        refreshRestoreButton: function () {
+            // check if table state is as initial state
+            var isInitial = true;
+            for (var i = 0; i < g.colOrder.length; i++) {
+                if (g.colOrder[i] != i) {
+                    isInitial = false;
+                    break;
+                }
+            }
+            // check if only one visible column left
+            var isOneColumn = g.visibleHeadersCount == 1;
+            // enable or disable restore button
+            if (isInitial || isOneColumn) {
+                $(g.o).find('div.restore_column').hide();
+            } else {
+                $(g.o).find('div.restore_column').show();
+            }
+        },
+
+        /**
+         * Update current hint using the boolean values (showReorderHint, showSortHint, etc.).
+         *
+         */
+        updateHint: function () {
+            var text = '';
+            if (!g.colRsz && !g.colReorder) {     // if not resizing or dragging
+                if (g.visibleHeadersCount > 1) {
+                    g.showReorderHint = true;
+                }
+                if ($(t).find('th.marker').length > 0) {
+                    g.showMarkHint = true;
+                }
+                if (g.showSortHint && g.sortHint) {
+                    text += text.length > 0 ? '<br />' : '';
+                    text += '- ' + g.sortHint;
+                }
+                if (g.showMultiSortHint && g.strMultiSortHint) {
+                    text += text.length > 0 ? '<br />' : '';
+                    text += '- ' + g.strMultiSortHint;
+                }
+                if (g.showMarkHint && g.markHint
+                    && !g.showSortHint // we do not show mark hint, when sort hint is shown
+                    && g.showReorderHint && g.reorderHint
+                ) {
+                    text += text.length > 0 ? '<br />' : '';
+                    text += '- ' + g.reorderHint;
+                    text += text.length > 0 ? '<br />' : '';
+                    text += '- ' + g.markHint;
+                    text += text.length > 0 ? '<br />' : '';
+                    text += '- ' + g.copyHint;
+                }
+            }
+            return text;
+        },
+
+        /**
+         * Toggle column's visibility.
+         * After calling this function and it returns true, afterToggleCol() must be called.
+         *
+         * @return boolean True if the column is toggled successfully.
+         */
+        toggleCol: function (n) {
+            if (g.colVisib[n]) {
+                // can hide if more than one column is visible
+                if (g.visibleHeadersCount > 1) {
+                    $(g.t).find('tr').each(function () {
+                        $(this).find('th.draggable:eq(' + n + '),' +
+                                     'td:eq(' + (g.actionSpan + n) + ')')
+                               .hide();
+                    });
+                    g.colVisib[n] = 0;
+                    $(g.cList).find('.lDiv div:eq(' + n + ') input').prop('checked', false);
+                } else {
+                    // cannot hide, force the checkbox to stay checked
+                    $(g.cList).find('.lDiv div:eq(' + n + ') input').prop('checked', true);
+                    return false;
+                }
+            } else {    // column n is not visible
+                $(g.t).find('tr').each(function () {
+                    $(this).find('th.draggable:eq(' + n + '),' +
+                                 'td:eq(' + (g.actionSpan + n) + ')')
+                           .show();
+                });
+                g.colVisib[n] = 1;
+                $(g.cList).find('.lDiv div:eq(' + n + ') input').prop('checked', true);
+            }
+            return true;
+        },
+
+        /**
+         * This must be called if toggleCol() returns is true.
+         *
+         * This function is separated from toggleCol because, sometimes, we want to toggle
+         * some columns together at one time and do just one adjustment after it, e.g. in showAllColumns().
+         */
+        afterToggleCol: function () {
+            // some adjustments after hiding column
+            g.reposRsz();
+            g.reposDrop();
+            g.sendColPrefs();
+
+            // check visible first row headers count
+            g.visibleHeadersCount = $(g.t).find('tr:first th.draggable:visible').length;
+            g.refreshRestoreButton();
+        },
+
+        /**
+         * Show columns' visibility list.
+         *
+         * @param obj The drop down arrow of column visibility list
+         */
+        showColList: function (obj) {
+            // only show when not resizing or reordering
+            if (!g.colRsz && !g.colReorder) {
+                var pos = $(obj).position();
+                // check if the list position is too right
+                if (pos.left + $(g.cList).outerWidth(true) > $(document).width()) {
+                    pos.left = $(document).width() - $(g.cList).outerWidth(true);
+                }
+                $(g.cList).css({
+                        left: pos.left,
+                        top: pos.top + $(obj).outerHeight(true)
+                    })
+                    .show();
+                $(obj).addClass('coldrop-hover');
+            }
+        },
+
+        /**
+         * Hide columns' visibility list.
+         */
+        hideColList: function () {
+            $(g.cList).hide();
+            $(g.cDrop).find('.coldrop-hover').removeClass('coldrop-hover');
+        },
+
+        /**
+         * Reposition the column visibility drop-down arrow.
+         */
+        reposDrop: function () {
+            var $th = $(t).find('th:not(.draggable)');
+            for (var i = 0; i < $th.length; i++) {
+                var $cd = $(g.cDrop).find('div:eq(' + i + ')');   // column drop-down arrow
+                var pos = $($th[i]).position();
+                $cd.css({
+                        left: pos.left + $($th[i]).width() - $cd.width(),
+                        top: pos.top
+                    });
+            }
+        },
+
+        /**
+         * Show all hidden columns.
+         */
+        showAllColumns: function () {
+            for (var i = 0; i < g.colVisib.length; i++) {
+                if (!g.colVisib[i]) {
+                    g.toggleCol(i);
+                }
+            }
+            g.afterToggleCol();
+        },
+
+        /**
+         * Show edit cell, if it can be shown
+         *
+         * @param cell <td> element to be edited
+         */
+        showEditCell: function (cell) {
+            if ($(cell).is('.grid_edit') &&
+                !g.colRsz && !g.colReorder)
+            {
+                if (!g.isCellEditActive) {
+                    var $cell = $(cell);
+
+                    if (
+                        'string' === $cell.attr('data-type')
+                        || 'blob' === $cell.attr('data-type')
+                    ) {
+                        g.cEdit = g.cEditTextarea;
+                    } else {
+                        g.cEdit = g.cEditStd;
+                    }
+
+                    // remove all edit area and hide it
+                    $(g.cEdit).find('.edit_area').empty().hide();
+                    // reposition the cEdit element
+                    $(g.cEdit).css({
+                            top: $cell.position().top,
+                            left: $cell.position().left
+                        })
+                        .show()
+                        .find('.edit_box')
+                        .css({
+                            width: $cell.outerWidth(),
+                            height: $cell.outerHeight()
+                        });
+                    // fill the cell edit with text from <td>
+                    var value = PMA_getCellValue(cell);
+                    $(g.cEdit).find('.edit_box').val(value);
+
+                    g.currentEditCell = cell;
+                    $(g.cEdit).find('.edit_box').focus();
+                    $(g.cEdit).find('*').removeProp('disabled');
+                }
+            }
+        },
+
+        /**
+         * Remove edit cell and the edit area, if it is shown.
+         *
+         * @param force Optional, force to hide edit cell without saving edited field.
+         * @param data  Optional, data from the POST AJAX request to save the edited field
+         *              or just specify "true", if we want to replace the edited field with the new value.
+         * @param field Optional, the edited <td>. If not specified, the function will
+         *              use currently edited <td> from g.currentEditCell.
+         */
+        hideEditCell: function (force, data, field) {
+            if (g.isCellEditActive && !force) {
+                // cell is being edited, save or post the edited data
+                g.saveOrPostEditedCell();
+                return;
+            }
+
+            // cancel any previous request
+            if (g.lastXHR !== null) {
+                g.lastXHR.abort();
+                g.lastXHR = null;
+            }
+
+            if (data) {
+                if (g.currentEditCell) {    // save value of currently edited cell
+                    // replace current edited field with the new value
+                    var $this_field = $(g.currentEditCell);
+                    var is_null = $this_field.data('value') === null;
+                    if (is_null) {
+                        $this_field.find('span').html('NULL');
+                        $this_field.addClass('null');
+                    } else {
+                        $this_field.removeClass('null');
+                        var value = data.isNeedToRecheck
+                            ? data.truncatableFieldValue
+                            : $this_field.data('value');
+
+                        // Truncates the text.
+                        $this_field.removeClass('truncated');
+                        if (PMA_commonParams.get('pftext') === 'P' && value.length > g.maxTruncatedLen) {
+                            $this_field.addClass('truncated');
+                            value = value.substring(0, g.maxTruncatedLen) + '...';
+                        }
+
+                        //Add <br> before carriage return.
+                        new_html = escapeHtml(value);
+                        new_html = new_html.replace(/\n/g, '<br>\n');
+
+                        //remove decimal places if column type not supported
+                        if (($this_field.attr('data-decimals') == 0) && ( $this_field.attr('data-type').indexOf('time') != -1)) {
+                            new_html = new_html.substring(0, new_html.indexOf('.'));
+                        }
+
+                        //remove addtional decimal places
+                        if (($this_field.attr('data-decimals') > 0) && ( $this_field.attr('data-type').indexOf('time') != -1)){
+                            new_html = new_html.substring(0, new_html.length - (6 - $this_field.attr('data-decimals')));
+                        }
+
+                        var selector = 'span';
+                        if ($this_field.hasClass('hex') && $this_field.find('a').length) {
+                            selector = 'a';
+                        }
+
+                        // Updates the code keeping highlighting (if any).
+                        var $target = $this_field.find(selector);
+                        if (!PMA_updateCode($target, new_html, value)) {
+                            $target.html(new_html);
+                        }
+                    }
+                    if ($this_field.is('.bit')) {
+                        $this_field.find('span').text($this_field.data('value'));
+                    }
+                }
+                if (data.transformations !== undefined) {
+                    $.each(data.transformations, function (cell_index, value) {
+                        var $this_field = $(g.t).find('.to_be_saved:eq(' + cell_index + ')');
+                        $this_field.find('span').html(value);
+                    });
+                }
+                if (data.relations !== undefined) {
+                    $.each(data.relations, function (cell_index, value) {
+                        var $this_field = $(g.t).find('.to_be_saved:eq(' + cell_index + ')');
+                        $this_field.find('span').html(value);
+                    });
+                }
+
+                // refresh the grid
+                g.reposRsz();
+                g.reposDrop();
+            }
+
+            // hide the cell editing area
+            $(g.cEdit).hide();
+            $(g.cEdit).find('.edit_box').blur();
+            g.isCellEditActive = false;
+            g.currentEditCell = null;
+            // destroy datepicker in edit area, if exist
+            var $dp = $(g.cEdit).find('.hasDatepicker');
+            if ($dp.length > 0) {
+                $(document).bind('mousedown', $.datepicker._checkExternalClick);
+                $dp.datepicker('destroy');
+                // change the cursor in edit box back to normal
+                // (the cursor become a hand pointer when we add datepicker)
+                $(g.cEdit).find('.edit_box').css('cursor', 'inherit');
+            }
+        },
+
+        /**
+         * Show drop-down edit area when edit cell is focused.
+         */
+        showEditArea: function () {
+            if (!g.isCellEditActive) {   // make sure the edit area has not been shown
+                g.isCellEditActive = true;
+                g.isEditCellTextEditable = false;
+                /**
+                 * @var $td current edited cell
+                 */
+                var $td = $(g.currentEditCell);
+                /**
+                 * @var $editArea the editing area
+                 */
+                var $editArea = $(g.cEdit).find('.edit_area');
+                /**
+                 * @var where_clause WHERE clause for the edited cell
+                 */
+                var where_clause = $td.parent('tr').find('.where_clause').val();
+                /**
+                 * @var field_name  String containing the name of this field.
+                 * @see getFieldName()
+                 */
+                var field_name = getFieldName($(t), $td);
+                /**
+                 * @var relation_curr_value String current value of the field (for fields that are foreign keyed).
+                 */
+                var relation_curr_value = $td.text();
+                /**
+                 * @var relation_key_or_display_column String relational key if in 'Relational display column' mode,
+                 * relational display column if in 'Relational key' mode (for fields that are foreign keyed).
+                 */
+                var relation_key_or_display_column = $td.find('a').attr('title');
+                /**
+                 * @var curr_value String current value of the field (for fields that are of type enum or set).
+                 */
+                var curr_value = $td.find('span').text();
+
+                // empty all edit area, then rebuild it based on $td classes
+                $editArea.empty();
+
+                // remember this instead of testing more than once
+                var is_null = $td.is('.null');
+
+                // add goto link, if this cell contains a link
+                if ($td.find('a').length > 0) {
+                    var gotoLink = document.createElement('div');
+                    gotoLink.className = 'goto_link';
+                    $(gotoLink).append(g.gotoLinkText + ' ').append($td.find('a').clone());
+                    $editArea.append(gotoLink);
+                }
+
+                g.wasEditedCellNull = false;
+                if ($td.is(':not(.not_null)')) {
+                    // append a null checkbox
+                    $editArea.append('<div class="null_div">Null:<input type="checkbox"></div>');
+
+                    var $checkbox = $editArea.find('.null_div input');
+                    // check if current <td> is NULL
+                    if (is_null) {
+                        $checkbox.prop('checked', true);
+                        g.wasEditedCellNull = true;
+                    }
+
+                    // if the select/editor is changed un-check the 'checkbox_null_<field_name>_<row_index>'.
+                    if ($td.is('.enum, .set')) {
+                        $editArea.on('change', 'select', function (e) {
+                            $checkbox.prop('checked', false);
+                        });
+                    } else if ($td.is('.relation')) {
+                        $editArea.on('change', 'select', function (e) {
+                            $checkbox.prop('checked', false);
+                        });
+                        $editArea.on('click', '.browse_foreign', function (e) {
+                            $checkbox.prop('checked', false);
+                        });
+                    } else {
+                        $(g.cEdit).on('keypress change', '.edit_box', function (e) {
+                            $checkbox.prop('checked', false);
+                        });
+                        // Capture ctrl+v (on IE and Chrome)
+                        $(g.cEdit).on('keydown', '.edit_box', function (e) {
+                            if (e.ctrlKey && e.which == 86) {
+                                $checkbox.prop('checked', false);
+                            }
+                        });
+                        $editArea.on('keydown', 'textarea', function (e) {
+                            $checkbox.prop('checked', false);
+                        });
+                    }
+
+                    // if null checkbox is clicked empty the corresponding select/editor.
+                    $checkbox.click(function (e) {
+                        if ($td.is('.enum')) {
+                            $editArea.find('select').val('');
+                        } else if ($td.is('.set')) {
+                            $editArea.find('select').find('option').each(function () {
+                                var $option = $(this);
+                                $option.prop('selected', false);
+                            });
+                        } else if ($td.is('.relation')) {
+                            // if the dropdown is there to select the foreign value
+                            if ($editArea.find('select').length > 0) {
+                                $editArea.find('select').val('');
+                            }
+                        } else {
+                            $editArea.find('textarea').val('');
+                        }
+                        $(g.cEdit).find('.edit_box').val('');
+                    });
+                }
+
+                //reset the position of the edit_area div after closing datetime picker
+                $(g.cEdit).find('.edit_area').css({'top' :'0','position':''});
+
+                if ($td.is('.relation')) {
+                    //handle relations
+                    $editArea.addClass('edit_area_loading');
+
+                    // initialize the original data
+                    $td.data('original_data', null);
+
+                    /**
+                     * @var post_params Object containing parameters for the POST request
+                     */
+                    var post_params = {
+                        'ajax_request' : true,
+                        'get_relational_values' : true,
+                        'server' : g.server,
+                        'db' : g.db,
+                        'table' : g.table,
+                        'column' : field_name,
+                        'token' : g.token,
+                        'curr_value' : relation_curr_value,
+                        'relation_key_or_display_column' : relation_key_or_display_column
+                    };
+
+                    g.lastXHR = $.post('sql.php', post_params, function (data) {
+                        g.lastXHR = null;
+                        $editArea.removeClass('edit_area_loading');
+                        if ($(data.dropdown).is('select')) {
+                            // save original_data
+                            var value = $(data.dropdown).val();
+                            $td.data('original_data', value);
+                            // 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('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
+
+                        // for 'Browse foreign values' options,
+                        // hide the value next to 'Browse foreign values' link
+                        $editArea.find('span.curr_value').hide();
+                        // handle update for new values selected from new window
+                        $editArea.find('span.curr_value').change(function () {
+                            $(g.cEdit).find('.edit_box').val($(this).text());
+                        });
+                    }); // end $.post()
+
+                    $editArea.show();
+                    $editArea.on('change', 'select', function (e) {
+                        $(g.cEdit).find('.edit_box').val($(this).val());
+                    });
+                    g.isEditCellTextEditable = true;
+                }
+                else if ($td.is('.enum')) {
+                    //handle enum fields
+                    $editArea.addClass('edit_area_loading');
+
+                    /**
+                     * @var post_params Object containing parameters for the POST request
+                     */
+                    var post_params = {
+                        'ajax_request' : true,
+                        'get_enum_values' : true,
+                        'server' : g.server,
+                        'db' : g.db,
+                        'table' : g.table,
+                        'column' : field_name,
+                        'token' : g.token,
+                        'curr_value' : curr_value
+                    };
+                    g.lastXHR = $.post('sql.php', post_params, function (data) {
+                        g.lastXHR = null;
+                        $editArea.removeClass('edit_area_loading');
+                        $editArea.append(data.dropdown);
+                        $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
+                    }); // end $.post()
+
+                    $editArea.show();
+                    $editArea.on('change', 'select', function (e) {
+                        $(g.cEdit).find('.edit_box').val($(this).val());
+                    });
+                }
+                else if ($td.is('.set')) {
+                    //handle set fields
+                    $editArea.addClass('edit_area_loading');
+
+                    /**
+                     * @var post_params Object containing parameters for the POST request
+                     */
+                    var post_params = {
+                        'ajax_request' : true,
+                        'get_set_values' : true,
+                        'server' : g.server,
+                        'db' : g.db,
+                        'table' : g.table,
+                        'column' : field_name,
+                        'token' : g.token,
+                        'curr_value' : curr_value
+                    };
+
+                    g.lastXHR = $.post('sql.php', post_params, function (data) {
+                        g.lastXHR = null;
+                        $editArea.removeClass('edit_area_loading');
+                        $editArea.append(data.select);
+                        $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
+                    }); // end $.post()
+
+                    $editArea.show();
+                    $editArea.on('change', 'select', function (e) {
+                        $(g.cEdit).find('.edit_box').val($(this).val());
+                    });
+                }
+                else if ($td.is('.truncated, .transformed')) {
+                    if ($td.is('.to_be_saved')) {   // cell has been edited
+                        var value = $td.data('value');
+                        $(g.cEdit).find('.edit_box').val(value);
+                        $editArea.append('<textarea></textarea>');
+                        $editArea.find('textarea').val(value);
+                        $editArea
+                            .on('keyup', 'textarea', function (e) {
+                                $(g.cEdit).find('.edit_box').val($(this).val());
+                            });
+                        $(g.cEdit).on('keyup', '.edit_box', function (e) {
+                            $editArea.find('textarea').val($(this).val());
+                        });
+                        $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
+                    } else {
+                        //handle truncated/transformed values values
+                        $editArea.addClass('edit_area_loading');
+
+                        // initialize the original data
+                        $td.data('original_data', null);
+
+                        /**
+                         * @var sql_query   String containing the SQL query used to retrieve value of truncated/transformed data
+                         */
+                        var sql_query = 'SELECT `' + field_name + '` FROM `' + g.table + '` WHERE ' + PMA_urldecode(where_clause);
+
+                        // Make the Ajax call and get the data, wrap it and insert it
+                        g.lastXHR = $.post('sql.php', {
+                            'token' : g.token,
+                            'server' : g.server,
+                            'db' : g.db,
+                            'ajax_request' : true,
+                            'sql_query' : sql_query,
+                            'grid_edit' : true
+                        }, function (data) {
+                            g.lastXHR = null;
+                            $editArea.removeClass('edit_area_loading');
+                            if (typeof data !== 'undefined' && data.success === true) {
+                                $td.data('original_data', data.value);
+                                $(g.cEdit).find('.edit_box').val(data.value);
+                                $editArea.append('<textarea></textarea>');
+                                $editArea.find('textarea').val(data.value);
+                                $editArea
+                                    .on('keyup', 'textarea', function (e) {
+                                        $(g.cEdit).find('.edit_box').val($(this).val());
+                                    });
+                                $(g.cEdit).on('keyup', '.edit_box', function (e) {
+                                    $editArea.find('textarea').val($(this).val());
+                                });
+                                $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
+                            } else {
+                                PMA_ajaxShowMessage(data.error, false);
+                            }
+                        }); // end $.post()
+                        $editArea.show();
+                    }
+                    g.isEditCellTextEditable = true;
+                } else if ($td.is('.timefield, .datefield, .datetimefield, .timestampfield')) {
+                    var $input_field = $(g.cEdit).find('.edit_box');
+
+                    // remember current datetime value in $input_field, if it is not null
+                    var current_datetime_value = !is_null ? $input_field.val() : '';
+                    var datetime_value = current_datetime_value;
+
+                    var showMillisec = false;
+                    var showMicrosec = false;
+                    var timeFormat = 'HH:mm:ss';
+                    // check for decimal places of seconds
+                    if (($td.attr('data-decimals') > 0) && ($td.attr('data-type').indexOf('time') != -1)){
+                        if (datetime_value && datetime_value.indexOf('.') === false) {
+                            datetime_value += '.';
+                        }
+                        if ($td.attr('data-decimals') > 3) {
+                            showMillisec = true;
+                            showMicrosec = true;
+                            timeFormat = 'HH:mm:ss.lc';
+
+                            if (datetime_value) {
+                                datetime_value += '000000';
+                                var datetime_value = datetime_value.substring(0, datetime_value.indexOf('.') + 7);
+                                $input_field.val(datetime_value);
+                            }
+                        } else {
+                            showMillisec = true;
+                            timeFormat = 'HH:mm:ss.l';
+
+                            if (datetime_value) {
+                                datetime_value += '000';
+                                var datetime_value = datetime_value.substring(0, datetime_value.indexOf('.') + 4);
+                                $input_field.val(datetime_value);
+                            }
+                        }
+                    }
+
+                    // add datetime picker
+                    PMA_addDatepicker($input_field, $td.attr('data-type'), {
+                        showMillisec: showMillisec,
+                        showMicrosec: showMicrosec,
+                        timeFormat: timeFormat
+                    });
+
+                    $input_field.datepicker("show");
+                    // unbind the mousedown event to prevent the problem of
+                    // datepicker getting closed, needs to be checked for any
+                    // change in names when updating
+                    $(document).unbind('mousedown', $.datepicker._checkExternalClick);
+
+                    //move ui-datepicker-div inside cEdit div
+                    var datepicker_div = $('#ui-datepicker-div');
+                    datepicker_div.css({'top': 0, 'left': 0, 'position': 'relative'});
+                    $(g.cEdit).append(datepicker_div);
+
+                    if (is_null){
+                        $(g.cEdit).find('.edit_area').hide();
+                    }
+
+                    // cancel any click on the datepicker element
+                    $editArea.find('> *').click(function (e) {
+                        e.stopPropagation();
+                    });
+
+                    g.isEditCellTextEditable = true;
+                } else {
+                    g.isEditCellTextEditable = true;
+                    // only append edit area hint if there is a null checkbox
+                    if ($editArea.children().length > 0) {
+                        $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
+                    }
+                }
+                if ($editArea.children().length > 0 && !is_null) {
+                    $editArea.show();
+                }
+            }
+        },
+
+        /**
+         * Post the content of edited cell.
+         */
+        postEditedCell: function () {
+            if (g.isSaving) {
+                return;
+            }
+            g.isSaving = true;
+            /**
+             * @var relation_fields Array containing the name/value pairs of relational fields
+             */
+            var relation_fields = {};
+            /**
+             * @var relational_display string 'K' if relational key, 'D' if relational display column
+             */
+            var relational_display = $(g.o).find("input[name=relational_display]:checked").val();
+            /**
+             * @var transform_fields    Array containing the name/value pairs for transformed fields
+             */
+            var transform_fields = {};
+            /**
+             * @var transformation_fields   Boolean, if there are any transformed fields in the edited cells
+             */
+            var transformation_fields = false;
+            /**
+             * @var full_sql_query String containing the complete SQL query to update this table
+             */
+            var full_sql_query = '';
+            /**
+             * @var rel_fields_list  String, url encoded representation of {@link relations_fields}
+             */
+            var rel_fields_list = '';
+            /**
+             * @var transform_fields_list  String, url encoded representation of {@link transform_fields}
+             */
+            var transform_fields_list = '';
+            /**
+             * @var where_clause Array containing where clause for updated fields
+             */
+            var full_where_clause = [];
+            /**
+             * @var is_unique   Boolean, whether the rows in this table is unique or not
+             */
+            var is_unique = $(g.t).find('td.edit_row_anchor').is('.nonunique') ? 0 : 1;
+            /**
+             * multi edit variables
+             */
+            var me_fields_name = [];
+            var me_fields_type = [];
+            var me_fields = [];
+            var me_fields_null = [];
+
+            // alert user if edited table is not unique
+            if (!is_unique) {
+                alert(g.alertNonUnique);
+            }
+
+            // loop each edited row
+            $(g.t).find('td.to_be_saved').parents('tr').each(function () {
+                var $tr = $(this);
+                var where_clause = $tr.find('.where_clause').val();
+                if (typeof where_clause === 'undefined') {
+                    where_clause = '';
+                }
+                full_where_clause.push(PMA_urldecode(where_clause));
+                var condition_array = jQuery.parseJSON($tr.find('.condition_array').val());
+
+                /**
+                 * multi edit variables, for current row
+                 * @TODO array indices are still not correct, they should be md5 of field's name
+                 */
+                var fields_name = [];
+                var fields_type = [];
+                var fields = [];
+                var fields_null = [];
+
+                // loop each edited cell in a row
+                $tr.find('.to_be_saved').each(function () {
+                    /**
+                     * @var $this_field    Object referring to the td that is being edited
+                     */
+                    var $this_field = $(this);
+
+                    /**
+                     * @var field_name  String containing the name of this field.
+                     * @see getFieldName()
+                     */
+                    var field_name = getFieldName($(g.t), $this_field);
+
+                    /**
+                     * @var this_field_params   Array temporary storage for the name/value of current field
+                     */
+                    var this_field_params = {};
+
+                    if ($this_field.is('.transformed')) {
+                        transformation_fields =  true;
+                    }
+                    this_field_params[field_name] = $this_field.data('value');
+
+                    /**
+                     * @var is_null String capturing whether 'checkbox_null_<field_name>_<row_index>' is checked.
+                     */
+                    var is_null = this_field_params[field_name] === null;
+
+                    fields_name.push(field_name);
+
+                    if (is_null) {
+                        fields_null.push('on');
+                        fields.push('');
+                    } else {
+                        if ($this_field.is('.bit')) {
+                            fields_type.push('bit');
+                        } else if ($this_field.hasClass('hex')) {
+                            fields_type.push('hex');
+                        }
+                        fields_null.push('');
+                        fields.push($this_field.data('value'));
+
+                        var cell_index = $this_field.index('.to_be_saved');
+                        if ($this_field.is(":not(.relation, .enum, .set, .bit)")) {
+                            if ($this_field.is('.transformed')) {
+                                transform_fields[cell_index] = {};
+                                $.extend(transform_fields[cell_index], this_field_params);
+                            }
+                        } else if ($this_field.is('.relation')) {
+                            relation_fields[cell_index] = {};
+                            $.extend(relation_fields[cell_index], this_field_params);
+                        }
+                    }
+                    // check if edited field appears in WHERE clause
+                    if (where_clause.indexOf(PMA_urlencode(field_name)) > -1) {
+                        var field_str = '`' + g.table + '`.' + '`' + field_name + '`';
+                        for (var field in condition_array) {
+                            if (field.indexOf(field_str) > -1) {
+                                condition_array[field] = is_null ? 'IS NULL' : "= '" + this_field_params[field_name].replace(/'/g, "''") + "'";
+                                break;
+                            }
+                        }
+                    }
+
+                }); // end of loop for every edited cells in a row
+
+                // save new_clause
+                var new_clause = '';
+                for (var field in condition_array) {
+                    new_clause += field + ' ' + condition_array[field] + ' AND ';
+                }
+                new_clause = new_clause.substring(0, new_clause.length - 5); // remove the last AND
+                new_clause = PMA_urlencode(new_clause);
+                $tr.data('new_clause', new_clause);
+                // save condition_array
+                $tr.find('.condition_array').val(JSON.stringify(condition_array));
+
+                me_fields_name.push(fields_name);
+                me_fields_type.push(fields_type);
+                me_fields.push(fields);
+                me_fields_null.push(fields_null);
+
+            }); // end of loop for every edited rows
+
+            rel_fields_list = $.param(relation_fields);
+            transform_fields_list = $.param(transform_fields);
+
+            // Make the Ajax post after setting all parameters
+            /**
+             * @var post_params Object containing parameters for the POST request
+             */
+            var post_params = {'ajax_request' : true,
+                            'sql_query' : full_sql_query,
+                            'token' : g.token,
+                            'server' : g.server,
+                            'db' : g.db,
+                            'table' : g.table,
+                            'clause_is_unique' : is_unique,
+                            'where_clause' : full_where_clause,
+                            'fields[multi_edit]' : me_fields,
+                            'fields_name[multi_edit]' : me_fields_name,
+                            'fields_type[multi_edit]' : me_fields_type,
+                            'fields_null[multi_edit]' : me_fields_null,
+                            'rel_fields_list' : rel_fields_list,
+                            'do_transformations' : transformation_fields,
+                            'transform_fields_list' : transform_fields_list,
+                            'relational_display' : relational_display,
+                            'goto' : 'sql.php',
+                            'submit_type' : 'save'
+                          };
+
+            if (!g.saveCellsAtOnce) {
+                $(g.cEdit).find('*').prop('disabled', true);
+                $(g.cEdit).find('.edit_box').addClass('edit_box_posting');
+            } else {
+                $(g.o).find('div.save_edited').addClass('saving_edited_data')
+                    .find('input').prop('disabled', true);    // disable the save button
+            }
+
+            $.ajax({
+                type: 'POST',
+                url: 'tbl_replace.php',
+                data: post_params,
+                success:
+                    function (data) {
+                        g.isSaving = false;
+                        if (!g.saveCellsAtOnce) {
+                            $(g.cEdit).find('*').removeProp('disabled');
+                            $(g.cEdit).find('.edit_box').removeClass('edit_box_posting');
+                        } else {
+                            $(g.o).find('div.save_edited').removeClass('saving_edited_data')
+                                .find('input').removeProp('disabled');  // enable the save button back
+                        }
+                        if (typeof data !== 'undefined' && data.success === true) {
+                            PMA_ajaxShowMessage(data.message);
+
+                            // update where_clause related data in each edited row
+                            $(g.t).find('td.to_be_saved').parents('tr').each(function () {
+                                var new_clause = $(this).data('new_clause');
+                                var $where_clause = $(this).find('.where_clause');
+                                var old_clause = $where_clause.val();
+                                var decoded_old_clause = PMA_urldecode(old_clause);
+                                var decoded_new_clause = PMA_urldecode(new_clause);
+
+                                $where_clause.val(new_clause);
+                                // update Edit, Copy, and Delete links also
+                                $(this).find('a').each(function () {
+                                    $(this).attr('href', $(this).attr('href').replace(old_clause, new_clause));
+                                    // update delete confirmation in Delete link
+                                    if ($(this).attr('href').indexOf('DELETE') > -1) {
+                                        $(this).removeAttr('onclick')
+                                            .unbind('click')
+                                            .bind('click', function () {
+                                                return confirmLink(this, 'DELETE FROM `' + g.db + '`.`' + g.table + '` WHERE ' +
+                                                       decoded_new_clause + (is_unique ? '' : ' LIMIT 1'));
+                                            });
+                                    }
+                                });
+                                // update the multi edit checkboxes
+                                $(this).find('input[type=checkbox]').each(function () {
+                                    var $checkbox = $(this);
+                                    var checkbox_name = $checkbox.attr('name');
+                                    var checkbox_value = $checkbox.val();
+
+                                    $checkbox.attr('name', checkbox_name.replace(old_clause, new_clause));
+                                    $checkbox.val(checkbox_value.replace(decoded_old_clause, decoded_new_clause));
+                                });
+                            });
+                            // update the display of executed SQL query command
+                            if (typeof data.sql_query != 'undefined') {
+                                //extract query box
+                                var $result_query = $($.parseHTML(data.sql_query));
+                                var sqlOuter = $result_query.find('.sqlOuter').wrap('<p>').parent().html();
+                                var tools = $result_query.find('.tools').wrap('<p>').parent().html();
+                                // sqlOuter and tools will not be present if 'Show SQL queries' configuration is off
+                                if (typeof sqlOuter != 'undefined' && typeof tools != 'undefined') {
+                                    $existing_query = $(g.o).find('.result_query');
+                                    // If two query box exists update query in second else add a second box
+                                    if ($existing_query.find('div.sqlOuter').length > 1) {
+                                        $existing_query.children(":nth-child(4)").remove();
+                                        $existing_query.children(":nth-child(4)").remove();
+                                        $existing_query.append(sqlOuter + tools);
+                                    } else {
+                                        $existing_query.append(sqlOuter + tools);
+                                    }
+                                    PMA_highlightSQL($existing_query);
+                                }
+                            }
+                            // hide and/or update the successfully saved cells
+                            g.hideEditCell(true, data);
+
+                            // remove the "Save edited cells" button
+                            $(g.o).find('div.save_edited').hide();
+                            // update saved fields
+                            $(g.t).find('.to_be_saved')
+                                .removeClass('to_be_saved')
+                                .data('value', null)
+                                .data('original_data', null);
+
+                            g.isCellEdited = false;
+                        } else {
+                            PMA_ajaxShowMessage(data.error, false);
+                            if (!g.saveCellsAtOnce) {
+                                $(g.t).find('.to_be_saved')
+                                    .removeClass('to_be_saved');
+                            }
+                        }
+                    }
+            }); // end $.ajax()
+        },
+
+        /**
+         * Save edited cell, so it can be posted later.
+         */
+        saveEditedCell: function () {
+            /**
+             * @var $this_field    Object referring to the td that is being edited
+             */
+            var $this_field = $(g.currentEditCell);
+            var $test_element = ''; // to test the presence of a element
+
+            var need_to_post = false;
+
+            /**
+             * @var field_name  String containing the name of this field.
+             * @see getFieldName()
+             */
+            var field_name = getFieldName($(g.t), $this_field);
+
+            /**
+             * @var this_field_params   Array temporary storage for the name/value of current field
+             */
+            var this_field_params = {};
+
+            /**
+             * @var is_null String capturing whether 'checkbox_null_<field_name>_<row_index>' is checked.
+             */
+            var is_null = $(g.cEdit).find('input:checkbox').is(':checked');
+            var value;
+
+            if ($(g.cEdit).find('.edit_area').is('.edit_area_loading')) {
+                // the edit area is still loading (retrieving cell data), no need to post
+                need_to_post = false;
+            } else if (is_null) {
+                if (!g.wasEditedCellNull) {
+                    this_field_params[field_name] = null;
+                    need_to_post = true;
+                }
+            } else {
+                if ($this_field.is('.bit')) {
+                    this_field_params[field_name] = $(g.cEdit).find('.edit_box').val();
+                } else if ($this_field.is('.set')) {
+                    $test_element = $(g.cEdit).find('select');
+                    this_field_params[field_name] = $test_element.map(function () {
+                        return $(this).val();
+                    }).get().join(",");
+                } else if ($this_field.is('.relation, .enum')) {
+                    // for relation and enumeration, take the results from edit box value,
+                    // because selected value from drop-down, new window or multiple
+                    // selection list will always be updated to the edit box
+                    this_field_params[field_name] = $(g.cEdit).find('.edit_box').val();
+                } else if ($this_field.hasClass('hex')) {
+                    if ($(g.cEdit).find('.edit_box').val().match(/^[a-f0-9]*$/i) !== null) {
+                        this_field_params[field_name] = $(g.cEdit).find('.edit_box').val();
+                    } else {
+                        var hexError = '<div class="error">' + PMA_messages.strEnterValidHex + '</div>';
+                        PMA_ajaxShowMessage(hexError, false);
+                        this_field_params[field_name] = PMA_getCellValue(g.currentEditCell);
+                    }
+                } else {
+                    this_field_params[field_name] = $(g.cEdit).find('.edit_box').val();
+                }
+                if (g.wasEditedCellNull || this_field_params[field_name] != PMA_getCellValue(g.currentEditCell)) {
+                    need_to_post = true;
+                }
+            }
+
+            if (need_to_post) {
+                $(g.currentEditCell).addClass('to_be_saved')
+                    .data('value', this_field_params[field_name]);
+                if (g.saveCellsAtOnce) {
+                    $(g.o).find('div.save_edited').show();
+                }
+                g.isCellEdited = true;
+            }
+
+            return need_to_post;
+        },
+
+        /**
+         * Save or post currently edited cell, depending on the "saveCellsAtOnce" configuration.
+         */
+        saveOrPostEditedCell: function () {
+            var saved = g.saveEditedCell();
+            if (!g.saveCellsAtOnce) {
+                if (saved) {
+                    g.postEditedCell();
+                } else {
+                    g.hideEditCell(true);
+                }
+            } else {
+                if (saved) {
+                    g.hideEditCell(true, true);
+                } else {
+                    g.hideEditCell(true);
+                }
+            }
+        },
+
+        /**
+         * Initialize column resize feature.
+         */
+        initColResize: function () {
+            // create column resizer div
+            g.cRsz = document.createElement('div');
+            g.cRsz.className = 'cRsz';
+
+            // get data columns in the first row of the table
+            var $firstRowCols = $(g.t).find('tr:first th.draggable');
+
+            // create column borders
+            $firstRowCols.each(function () {
+                var cb = document.createElement('div'); // column border
+                $(cb).addClass('colborder')
+                    .mousedown(function (e) {
+                        g.dragStartRsz(e, this);
+                    });
+                $(g.cRsz).append(cb);
+            });
+            g.reposRsz();
+
+            // attach to global div
+            $(g.gDiv).prepend(g.cRsz);
+        },
+
+        /**
+         * Initialize column reordering feature.
+         */
+        initColReorder: function () {
+            g.cCpy = document.createElement('div');     // column copy, to store copy of dragged column header
+            g.cPointer = document.createElement('div'); // column pointer, used when reordering column
+
+            // adjust g.cCpy
+            g.cCpy.className = 'cCpy';
+            $(g.cCpy).hide();
+
+            // adjust g.cPointer
+            g.cPointer.className = 'cPointer';
+            $(g.cPointer).css('visibility', 'hidden');  // set visibility to hidden instead of calling hide() to force browsers to cache the image in cPointer class
+
+            // assign column reordering hint
+            g.reorderHint = PMA_messages.strColOrderHint;
+
+            // get data columns in the first row of the table
+            var $firstRowCols = $(g.t).find('tr:first th.draggable');
+
+            // initialize column order
+            $col_order = $(g.o).find('.col_order');   // check if column order is passed from PHP
+            if ($col_order.length > 0) {
+                g.colOrder = $col_order.val().split(',');
+                for (var i = 0; i < g.colOrder.length; i++) {
+                    g.colOrder[i] = parseInt(g.colOrder[i], 10);
+                }
+            } else {
+                g.colOrder = [];
+                for (var i = 0; i < $firstRowCols.length; i++) {
+                    g.colOrder.push(i);
+                }
+            }
+
+            // register events
+            $(g.t).find('th.draggable')
+                .mousedown(function (e) {
+                    $(g.o).addClass("turnOffSelect");
+                    if (g.visibleHeadersCount > 1) {
+                        g.dragStartReorder(e, this);
+                    }
+                })
+                .mouseenter(function (e) {
+                    if (g.visibleHeadersCount > 1) {
+                        $(this).css('cursor', 'move');
+                    } else {
+                        $(this).css('cursor', 'inherit');
+                    }
+                })
+                .mouseleave(function (e) {
+                    g.showReorderHint = false;
+                    $(this).tooltip("option", {
+                        content: g.updateHint()
+                    });
+                })
+                .dblclick(function (e) {
+                    e.preventDefault();
+                    $("<div/>")
+                    .prop("title", PMA_messages.strColNameCopyTitle)
+                    .addClass("modal-copy")
+                    .text(PMA_messages.strColNameCopyText)
+                    .append(
+                        $("<input/>")
+                        .prop("readonly", true)
+                        .val($(this).data("column"))
+                        )
+                    .dialog({
+                        resizable: false,
+                        modal: true
+                    })
+                    .find("input").focus().select();
+                });
+            $(g.t).find('th.draggable a')
+                .dblclick(function (e) {
+                    e.stopPropagation();
+                });
+            // restore column order when the restore button is clicked
+            $(g.o).find('div.restore_column').click(function () {
+                g.restoreColOrder();
+            });
+
+            // attach to global div
+            $(g.gDiv).append(g.cPointer);
+            $(g.gDiv).append(g.cCpy);
+
+            // prevent default "dragstart" event when dragging a link
+            $(g.t).find('th a').bind('dragstart', function () {
+                return false;
+            });
+
+            // refresh the restore column button state
+            g.refreshRestoreButton();
+        },
+
+        /**
+         * Initialize column visibility feature.
+         */
+        initColVisib: function () {
+            g.cDrop = document.createElement('div');    // column drop-down arrows
+            g.cList = document.createElement('div');    // column visibility list
+
+            // adjust g.cDrop
+            g.cDrop.className = 'cDrop';
+
+            // adjust g.cList
+            g.cList.className = 'cList';
+            $(g.cList).hide();
+
+            // assign column visibility related hints
+            g.showAllColText = PMA_messages.strShowAllCol;
+
+            // get data columns in the first row of the table
+            var $firstRowCols = $(g.t).find('tr:first th.draggable');
+
+            // initialize column visibility
+            var $col_visib = $(g.o).find('.col_visib');   // check if column visibility is passed from PHP
+            if ($col_visib.length > 0) {
+                g.colVisib = $col_visib.val().split(',');
+                for (var i = 0; i < g.colVisib.length; i++) {
+                    g.colVisib[i] = parseInt(g.colVisib[i], 10);
+                }
+            } else {
+                g.colVisib = [];
+                for (var i = 0; i < $firstRowCols.length; i++) {
+                    g.colVisib.push(1);
+                }
+            }
+
+            // make sure we have more than one column
+            if ($firstRowCols.length > 1) {
+                var $colVisibTh = $(g.t).find('th:not(.draggable)');
+                PMA_tooltip(
+                    $colVisibTh,
+                    'th',
+                    PMA_messages.strColVisibHint
+                );
+
+                // create column visibility drop-down arrow(s)
+                $colVisibTh.each(function () {
+                        var $th = $(this);
+                        var cd = document.createElement('div'); // column drop-down arrow
+                        var pos = $th.position();
+                        $(cd).addClass('coldrop')
+                            .click(function () {
+                                if (g.cList.style.display == 'none') {
+                                    g.showColList(this);
+                                } else {
+                                    g.hideColList();
+                                }
+                            });
+                        $(g.cDrop).append(cd);
+                    });
+
+                // add column visibility control
+                g.cList.innerHTML = '<div class="lDiv"></div>';
+                var $listDiv = $(g.cList).find('div');
+
+                var tempClick = function () {
+                    if (g.toggleCol($(this).index())) {
+                        g.afterToggleCol();
+                    }
+                };
+
+                for (var i = 0; i < $firstRowCols.length; i++) {
+                    var currHeader = $firstRowCols[i];
+                    var listElmt = document.createElement('div');
+                    $(listElmt).text($(currHeader).text())
+                        .prepend('<input type="checkbox" ' + (g.colVisib[i] ? 'checked="checked" ' : '') + '/>');
+                    $listDiv.append(listElmt);
+                    // add event on click
+                    $(listElmt).click(tempClick);
+                }
+                // add "show all column" button
+                var showAll = document.createElement('div');
+                $(showAll).addClass('showAllColBtn')
+                    .text(g.showAllColText);
+                $(g.cList).append(showAll);
+                $(showAll).click(function () {
+                    g.showAllColumns();
+                });
+                // prepend "show all column" button at top if the list is too long
+                if ($firstRowCols.length > 10) {
+                    var clone = showAll.cloneNode(true);
+                    $(g.cList).prepend(clone);
+                    $(clone).click(function () {
+                        g.showAllColumns();
+                    });
+                }
+            }
+
+            // hide column visibility list if we move outside the list
+            $(g.t).find('td, th.draggable').mouseenter(function () {
+                g.hideColList();
+            });
+
+            // attach to global div
+            $(g.gDiv).append(g.cDrop);
+            $(g.gDiv).append(g.cList);
+
+            // some adjustment
+            g.reposDrop();
+        },
+
+        /**
+         * Initialize grid editing feature.
+         */
+        initGridEdit: function () {
+
+            function startGridEditing(e, cell) {
+                if (g.isCellEditActive) {
+                    g.saveOrPostEditedCell();
+                } else {
+                    g.showEditCell(cell);
+                }
+                e.stopPropagation();
+            }
+
+            // create cell edit wrapper element
+            g.cEditStd = document.createElement('div');
+            g.cEdit = g.cEditStd;
+            g.cEditTextarea = document.createElement('div');
+
+            // adjust g.cEditStd
+            g.cEditStd.className = 'cEdit';
+            $(g.cEditStd).html('<input class="edit_box" rows="1" ></input><div class="edit_area" />');
+            $(g.cEditStd).hide();
+
+            // adjust g.cEdit
+            g.cEditTextarea.className = 'cEdit';
+            $(g.cEditTextarea).html('<textarea class="edit_box" rows="1" ></textarea><div class="edit_area" />');
+            $(g.cEditTextarea).hide();
+
+            // assign cell editing hint
+            g.cellEditHint = PMA_messages.strCellEditHint;
+            g.saveCellWarning = PMA_messages.strSaveCellWarning;
+            g.alertNonUnique = PMA_messages.strAlertNonUnique;
+            g.gotoLinkText = PMA_messages.strGoToLink;
+
+            // initialize cell editing configuration
+            g.saveCellsAtOnce = $(g.o).find('.save_cells_at_once').val();
+            g.maxTruncatedLen = PMA_commonParams.get('LimitChars');
+
+            // register events
+            $(g.t).find('td.data.click1')
+                .click(function (e) {
+                    startGridEditing(e, this);
+                    // prevent default action when clicking on "link" in a table
+                    if ($(e.target).is('.grid_edit a')) {
+                        e.preventDefault();
+                    }
+                });
+
+            $(g.t).find('td.data.click2')
+                .click(function (e) {
+                    $cell = $(this);
+                    // In the case of relational link, We want single click on the link
+                    // to goto the link and double click to start grid-editing.
+                    var $link = $(e.target);
+                    if ($link.is('.grid_edit.relation a')) {
+                        e.preventDefault();
+                        // get the click count and increase
+                        var clicks = $cell.data('clicks');
+                        clicks = (typeof clicks === 'undefined') ? 1 : clicks + 1;
+
+                        if (clicks == 1) {
+                            // if there are no previous clicks,
+                            // start the single click timer
+                            timer = setTimeout(function () {
+                                // temporarily remove ajax class so the page loader will not handle it,
+                                // submit and then add it back
+                                $link.removeClass('ajax');
+                                AJAX.requestHandler.call($link[0]);
+                                $link.addClass('ajax');
+                                $cell.data('clicks', 0);
+                            }, 700);
+                            $cell.data('clicks', clicks);
+                            $cell.data('timer', timer);
+                        } else {
+                            // this is a double click, cancel the single click timer
+                            // and make the click count 0
+                            clearTimeout($cell.data('timer'));
+                            $cell.data('clicks', 0);
+                            // start grid-editing
+                            startGridEditing(e, this);
+                        }
+                    }
+                })
+                .dblclick(function (e) {
+                    if ($(e.target).is('.grid_edit a')) {
+                        e.preventDefault();
+                    } else {
+                        startGridEditing(e, this);
+                    }
+                });
+
+            $(g.cEditStd).find('.edit_box').focus(function (e) {
+                g.showEditArea();
+            });
+            $(g.cEditStd).on('keydown', '.edit_box, select', function (e) {
+                if (e.which == 13) {
+                    // post on pressing "Enter"
+                    e.preventDefault();
+                    g.saveOrPostEditedCell();
+                }
+            });
+            $(g.cEditStd).keydown(function (e) {
+                if (!g.isEditCellTextEditable) {
+                    // prevent text editing
+                    e.preventDefault();
+                }
+            });
+            $(g.cEditTextarea).find('.edit_box').focus(function (e) {
+                g.showEditArea();
+            });
+            $(g.cEditTextarea).on('keydown', '.edit_box, select', function (e) {
+                if (e.which == 13 && !e.shiftKey) {
+                    // post on pressing "Enter"
+                    e.preventDefault();
+                    g.saveOrPostEditedCell();
+                }
+            });
+            $(g.cEditTextarea).keydown(function (e) {
+                if (!g.isEditCellTextEditable) {
+                    // prevent text editing
+                    e.preventDefault();
+                }
+            });
+            $('html').click(function (e) {
+                // hide edit cell if the click is not fromDat edit area
+                if ($(e.target).parents().index($(g.cEdit)) == -1 &&
+                    !$(e.target).parents('.ui-datepicker-header').length &&
+                    !$('.browse_foreign_modal.ui-dialog:visible').length
+                ) {
+                    g.hideEditCell();
+                }
+            }).keydown(function (e) {
+                if (e.which == 27 && g.isCellEditActive) {
+
+                    // cancel on pressing "Esc"
+                    g.hideEditCell(true);
+                }
+            });
+            $(g.o).find('div.save_edited').click(function () {
+                g.hideEditCell();
+                g.postEditedCell();
+            });
+            $(window).bind('beforeunload', function (e) {
+                if (g.isCellEdited) {
+                    return g.saveCellWarning;
+                }
+            });
+
+            // attach to global div
+            $(g.gDiv).append(g.cEditStd);
+            $(g.gDiv).append(g.cEditTextarea);
+
+            // add hint for grid editing feature when hovering "Edit" link in each table row
+            if (PMA_messages.strGridEditFeatureHint !== undefined) {
+                PMA_tooltip(
+                    $(g.t).find('.edit_row_anchor a'),
+                    'a',
+                    PMA_messages.strGridEditFeatureHint
+                );
+            }
+        }
+    };
+
+    /******************
+     * Initialize grid
+     ******************/
+
+    // wrap all data cells, except actions cell, with span
+    $(t).find('th, td:not(:has(span))')
+        .wrapInner('<span />');
+
+    // create grid elements
+    g.gDiv = document.createElement('div');     // create global div
+
+    // initialize the table variable
+    g.t = t;
+
+    // enclosing .sqlqueryresults div
+    g.o = $(t).parents('.sqlqueryresults');
+
+    // get data columns in the first row of the table
+    var $firstRowCols = $(t).find('tr:first th.draggable');
+
+    // initialize visible headers count
+    g.visibleHeadersCount = $firstRowCols.filter(':visible').length;
+
+    // assign first column (actions) span
+    if (! $(t).find('tr:first th:first').hasClass('draggable')) {  // action header exist
+        g.actionSpan = $(t).find('tr:first th:first').prop('colspan');
+    } else {
+        g.actionSpan = 0;
+    }
+
+    // assign table create time
+    // table_create_time will only available if we are in "Browse" tab
+    g.tableCreateTime = $(g.o).find('.table_create_time').val();
+
+    // assign the hints
+    g.sortHint = PMA_messages.strSortHint;
+    g.strMultiSortHint = PMA_messages.strMultiSortHint;
+    g.markHint = PMA_messages.strColMarkHint;
+    g.copyHint = PMA_messages.strColNameCopyHint;
+
+    // assign common hidden inputs
+    var $common_hidden_inputs = $(g.o).find('div.common_hidden_inputs');
+    g.token = $common_hidden_inputs.find('input[name=token]').val();
+    g.server = $common_hidden_inputs.find('input[name=server]').val();
+    g.db = $common_hidden_inputs.find('input[name=db]').val();
+    g.table = $common_hidden_inputs.find('input[name=table]').val();
+
+    // add table class
+    $(t).addClass('pma_table');
+
+    // add relative position to global div so that resize handlers are correctly positioned
+    $(g.gDiv).css('position', 'relative');
+
+    // link the global div
+    $(t).before(g.gDiv);
+    $(g.gDiv).append(t);
+
+    // FEATURES
+    enableResize    = enableResize === undefined ? true : enableResize;
+    enableReorder   = enableReorder === undefined ? true : enableReorder;
+    enableVisib     = enableVisib === undefined ? true : enableVisib;
+    enableGridEdit  = enableGridEdit === undefined ? true : enableGridEdit;
+    if (enableResize) {
+        g.initColResize();
+    }
+    if (enableReorder &&
+        $(g.o).find('table.navigation').length > 0)    // disable reordering for result from EXPLAIN or SHOW syntax, which do not have a table navigation panel
+    {
+        g.initColReorder();
+    }
+    if (enableVisib) {
+        g.initColVisib();
+    }
+    if (enableGridEdit &&
+        $(t).is('.ajax'))   // make sure we have the ajax class
+    {
+        g.initGridEdit();
+    }
+
+    // create tooltip for each <th> with draggable class
+    PMA_tooltip(
+            $(t).find("th.draggable"),
+            'th',
+            g.updateHint()
+    );
+
+    // register events for hint tooltip (anchors inside draggable th)
+    $(t).find('th.draggable a')
+        .mouseenter(function (e) {
+            g.showSortHint = true;
+            g.showMultiSortHint = true;
+            $(t).find("th.draggable").tooltip("option", {
+                content: g.updateHint()
+            });
+        })
+        .mouseleave(function (e) {
+            g.showSortHint = false;
+            g.showMultiSortHint = false;
+            $(t).find("th.draggable").tooltip("option", {
+                content: g.updateHint()
+            });
+        });
+
+    // register events for dragging-related feature
+    if (enableResize || enableReorder) {
+        $(document).mousemove(function (e) {
+            g.dragMove(e);
+        });
+        $(document).mouseup(function (e) {
+            $(g.o).removeClass("turnOffSelect");
+            g.dragEnd(e);
+        });
+    }
+
+    // some adjustment
+    $(t).removeClass('data');
+    $(g.gDiv).addClass('data');
+}