Translation update done using Pootle.
[phpmyadmin/madhuracj.git] / js / makegrid.js
blobe13ec7eecee2850c65f106a353aa2b01adc0b1c1
1 /**
2  * Create advanced table (resize, reorder, and show/hide columns; and also grid editing).
3  * This function is designed mainly for table DOM generated from browsing a table in the database.
4  * For using this function in other table DOM, you may need to:
5  * - add "draggable" class in the table header <th>, in order to make it resizable, sortable or hidable
6  * - have at least one non-"draggable" header in the table DOM for placing column visibility drop-down arrow
7  * - pass the value "false" for the parameter "enableGridEdit"
8  * - adjust other parameter value, to select which features that will be enabled
9  *
10  * @param t the table DOM element
11  * @param enableResize Optional, if false, column resizing feature will be disabled
12  * @param enableReorder Optional, if false, column reordering feature will be disabled
13  * @param enableVisib Optional, if false, show/hide column feature will be disabled
14  * @param enableGridEdit Optional, if false, grid editing feature will be disabled
15  */
16 function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdit) {
17     var g = {
18         /***********
19          * Constant
20          ***********/
21         minColWidth: 15,
24         /***********
25          * Variables, assigned with default value, changed later
26          ***********/
27         actionSpan: 5,              // number of colspan in Actions header in a table
28         tableCreateTime: null,      // table creation time, used for saving column order and visibility to server, only available in "Browse tab"
30         // Column reordering variables
31         colOrder: new Array(),      // array of column order
33         // Column visibility variables
34         colVisib: new Array(),      // array of column visibility
35         showAllColText: '',         // string, text for "show all" button under column visibility list
36         visibleHeadersCount: 0,     // number of visible data headers
38         // Table hint variables
39         qtip: null,                 // qtip API
40         reorderHint: '',            // string, hint for column reordering
41         sortHint: '',               // string, hint for column sorting
42         markHint: '',               // string, hint for column marking
43         colVisibHint: '',           // string, hint for column visibility drop-down
44         showReorderHint: false,
45         showSortHint: false,
46         showMarkHint: false,
47         showColVisibHint: false,
49         // Grid editing
50         isCellEditActive: false,    // true if current focus is in edit cell
51         isEditCellTextEditable: false,  // true if current edit cell is editable in the text input box (not textarea)
52         currentEditCell: null,      // reference to <td> that currently being edited
53         cellEditHint: '',           // hint shown when doing grid edit
54         gotoLinkText: '',           // "Go to link" text
55         wasEditedCellNull: false,   // true if last value of the edited cell was NULL
56         maxTruncatedLen: 0,         // number of characters that can be displayed in a cell
57         saveCellsAtOnce: false,     // $cfg[saveCellsAtOnce]
58         isCellEdited: false,        // true if at least one cell has been edited
59         saveCellWarning: '',        // string, warning text when user want to leave a page with unsaved edited data
60         lastXHR : null,             // last XHR object used in AJAX request
61         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
62         alertNonUnique: '',         // string, alert shown when saving edited nonunique table
64         // Common hidden inputs
65         token: null,
66         server: null,
67         db: null,
68         table: null,
71         /************
72          * Functions
73          ************/
75         /**
76          * Start to resize column. Called when clicking on column separator.
77          *
78          * @param e event
79          * @param obj dragged div object
80          */
81         dragStartRsz: function(e, obj) {
82             var n = $(g.cRsz).find('div').index(obj);    // get the index of separator (i.e., column index)
83             $(obj).addClass('colborder_active');
84             g.colRsz = {
85                 x0: e.pageX,
86                 n: n,
87                 obj: obj,
88                 objLeft: $(obj).position().left,
89                 objWidth: $(g.t).find('th.draggable:visible:eq(' + n + ') span').outerWidth()
90             };
91             $('body').css('cursor', 'col-resize');
92             $('body').noSelect();
93             if (g.isCellEditActive) {
94                 g.hideEditCell();
95             }
96         },
98         /**
99          * Start to reorder column. Called when clicking on table header.
100          *
101          * @param e event
102          * @param obj table header object
103          */
104         dragStartReorder: function(e, obj) {
105             // prepare the cCpy (column copy) and cPointer (column pointer) from the dragged column
106             $(g.cCpy).text($(obj).text());
107             var objPos = $(obj).position();
108             $(g.cCpy).css({
109                 top: objPos.top + 20,
110                 left: objPos.left,
111                 height: $(obj).height(),
112                 width: $(obj).width()
113             });
114             $(g.cPointer).css({
115                 top: objPos.top
116             });
118             // get the column index, zero-based
119             var n = g.getHeaderIdx(obj);
121             g.colReorder = {
122                 x0: e.pageX,
123                 y0: e.pageY,
124                 n: n,
125                 newn: n,
126                 obj: obj,
127                 objTop: objPos.top,
128                 objLeft: objPos.left
129             };
130             g.hideHint();
131             $('body').css('cursor', 'move');
132             $('body').noSelect();
133             if (g.isCellEditActive) {
134                 g.hideEditCell();
135             }
136         },
138         /**
139          * Handle mousemove event when dragging.
140          *
141          * @param e event
142          */
143         dragMove: function(e) {
144             if (g.colRsz) {
145                 var dx = e.pageX - g.colRsz.x0;
146                 if (g.colRsz.objWidth + dx > g.minColWidth) {
147                     $(g.colRsz.obj).css('left', g.colRsz.objLeft + dx + 'px');
148                 }
149             } else if (g.colReorder) {
150                 // dragged column animation
151                 var dx = e.pageX - g.colReorder.x0;
152                 $(g.cCpy)
153                     .css('left', g.colReorder.objLeft + dx)
154                     .show();
156                 // pointer animation
157                 var hoveredCol = g.getHoveredCol(e);
158                 if (hoveredCol) {
159                     var newn = g.getHeaderIdx(hoveredCol);
160                     g.colReorder.newn = newn;
161                     if (newn != g.colReorder.n) {
162                         // show the column pointer in the right place
163                         var colPos = $(hoveredCol).position();
164                         var newleft = newn < g.colReorder.n ?
165                                       colPos.left :
166                                       colPos.left + $(hoveredCol).outerWidth();
167                         $(g.cPointer)
168                             .css({
169                                 left: newleft,
170                                 visibility: 'visible'
171                             });
172                     } else {
173                         // no movement to other column, hide the column pointer
174                         $(g.cPointer).css('visibility', 'hidden');
175                     }
176                 }
177             }
178         },
180         /**
181          * Stop the dragging action.
182          *
183          * @param e event
184          */
185         dragEnd: function(e) {
186             if (g.colRsz) {
187                 var dx = e.pageX - g.colRsz.x0;
188                 var nw = g.colRsz.objWidth + dx;
189                 if (nw < g.minColWidth) {
190                     nw = g.minColWidth;
191                 }
192                 var n = g.colRsz.n;
193                 // do the resizing
194                 g.resize(n, nw);
196                 g.reposRsz();
197                 g.reposDrop();
198                 g.colRsz = false;
199                 $(g.cRsz).find('div').removeClass('colborder_active');
200             } else if (g.colReorder) {
201                 // shift columns
202                 if (g.colReorder.newn != g.colReorder.n) {
203                     g.shiftCol(g.colReorder.n, g.colReorder.newn);
204                     // assign new position
205                     var objPos = $(g.colReorder.obj).position();
206                     g.colReorder.objTop = objPos.top;
207                     g.colReorder.objLeft = objPos.left;
208                     g.colReorder.n = g.colReorder.newn;
209                     // send request to server to remember the column order
210                     if (g.tableCreateTime) {
211                         g.sendColPrefs();
212                     }
213                     g.refreshRestoreButton();
214                 }
216                 // animate new column position
217                 $(g.cCpy).stop(true, true)
218                     .animate({
219                         top: g.colReorder.objTop,
220                         left: g.colReorder.objLeft
221                     }, 'fast')
222                     .fadeOut();
223                 $(g.cPointer).css('visibility', 'hidden');
225                 g.colReorder = false;
226             }
227             $('body').css('cursor', 'inherit');
228             $('body').noSelect(false);
229         },
231         /**
232          * Resize column n to new width "nw"
233          *
234          * @param n zero-based column index
235          * @param nw new width of the column in pixel
236          */
237         resize: function(n, nw) {
238             $(g.t).find('tr').each(function() {
239                 $(this).find('th.draggable:visible:eq(' + n + ') span,' +
240                              'td:visible:eq(' + (g.actionSpan + n) + ') span')
241                        .css('width', nw);
242             });
243         },
245         /**
246          * Reposition column resize bars.
247          */
248         reposRsz: function() {
249             $(g.cRsz).find('div').hide();
250             var $firstRowCols = $(g.t).find('tr:first th.draggable:visible');
251             var $resizeHandles = $(g.cRsz).find('div').removeClass('condition');
252             $('.pma_table').find('thead th:first').removeClass('before-condition');
253             for (var n = 0; n < $firstRowCols.length; n++) {
254                 var $col = $($firstRowCols[n]);
255                 $($resizeHandles[n]).css('left', $col.position().left + $col.outerWidth(true))
256                    .show();
257                 if ($($firstRowCols[n]).hasClass('condition')) {
258                     $($resizeHandles[n]).addClass('condition');
259                     if (n > 0) {
260                         $($resizeHandles[n-1]).addClass('condition');
261                     }
262                 }
263             }
264             if ($($resizeHandles[0]).hasClass('condition')) {
265                 $('.pma_table').find('thead th:first').addClass('before-condition');
266             }
267             $(g.cRsz).css('height', $(g.t).height());
268         },
270         /**
271          * Shift column from index oldn to newn.
272          *
273          * @param oldn old zero-based column index
274          * @param newn new zero-based column index
275          */
276         shiftCol: function(oldn, newn) {
277             $(g.t).find('tr').each(function() {
278                 if (newn < oldn) {
279                     $(this).find('th.draggable:eq(' + newn + '),' +
280                                  'td:eq(' + (g.actionSpan + newn) + ')')
281                            .before($(this).find('th.draggable:eq(' + oldn + '),' +
282                                                 'td:eq(' + (g.actionSpan + oldn) + ')'));
283                 } else {
284                     $(this).find('th.draggable:eq(' + newn + '),' +
285                                  'td:eq(' + (g.actionSpan + newn) + ')')
286                            .after($(this).find('th.draggable:eq(' + oldn + '),' +
287                                                'td:eq(' + (g.actionSpan + oldn) + ')'));
288                 }
289             });
290             // reposition the column resize bars
291             g.reposRsz();
293             // adjust the column visibility list
294             if (newn < oldn) {
295                 $(g.cList).find('.lDiv div:eq(' + newn + ')')
296                           .before($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
297             } else {
298                 $(g.cList).find('.lDiv div:eq(' + newn + ')')
299                           .after($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
300             }
301             // adjust the colOrder
302             var tmp = g.colOrder[oldn];
303             g.colOrder.splice(oldn, 1);
304             g.colOrder.splice(newn, 0, tmp);
305             // adjust the colVisib
306             if (g.colVisib.length > 0) {
307                 var tmp = g.colVisib[oldn];
308                 g.colVisib.splice(oldn, 1);
309                 g.colVisib.splice(newn, 0, tmp);
310             }
311         },
313         /**
314          * Find currently hovered table column's header (excluding actions column).
315          *
316          * @param e event
317          * @return the hovered column's th object or undefined if no hovered column found.
318          */
319         getHoveredCol: function(e) {
320             var hoveredCol;
321             $headers = $(g.t).find('th.draggable:visible');
322             $headers.each(function() {
323                 var left = $(this).offset().left;
324                 var right = left + $(this).outerWidth();
325                 if (left <= e.pageX && e.pageX <= right) {
326                     hoveredCol = this;
327                 }
328             });
329             return hoveredCol;
330         },
332         /**
333          * Get a zero-based index from a <th class="draggable"> tag in a table.
334          *
335          * @param obj table header <th> object
336          * @return zero-based index of the specified table header in the set of table headers (visible or not)
337          */
338         getHeaderIdx: function(obj) {
339             return $(obj).parents('tr').find('th.draggable').index(obj);
340         },
342         /**
343          * Reposition the columns back to normal order.
344          */
345         restoreColOrder: function() {
346             // use insertion sort, since we already have shiftCol function
347             for (var i = 1; i < g.colOrder.length; i++) {
348                 var x = g.colOrder[i];
349                 var j = i - 1;
350                 while (j >= 0 && x < g.colOrder[j]) {
351                     j--;
352                 }
353                 if (j != i - 1) {
354                     g.shiftCol(i, j + 1);
355                 }
356             }
357             if (g.tableCreateTime) {
358                 // send request to server to remember the column order
359                 g.sendColPrefs();
360             }
361             g.refreshRestoreButton();
362         },
364         /**
365          * Send column preferences (column order and visibility) to the server.
366          */
367         sendColPrefs: function() {
368             if ($(g.t).is('.ajax')) {   // only send preferences if AjaxEnable is true
369                 var post_params = {
370                     ajax_request: true,
371                     db: g.db,
372                     table: g.table,
373                     token: g.token,
374                     server: g.server,
375                     set_col_prefs: true,
376                     table_create_time: g.tableCreateTime
377                 };
378                 if (g.colOrder.length > 0) {
379                     $.extend(post_params, { col_order: g.colOrder.toString() });
380                 }
381                 if (g.colVisib.length > 0) {
382                     $.extend(post_params, { col_visib: g.colVisib.toString() });
383                 }
384                 $.post('sql.php', post_params, function(data) {
385                     if (data.success != true) {
386                         var $temp_div = $(document.createElement('div'));
387                         $temp_div.html(data.error);
388                         $temp_div.addClass("error");
389                         PMA_ajaxShowMessage($temp_div, false);
390                     }
391                 });
392             }
393         },
395         /**
396          * Refresh restore button state.
397          * Make restore button disabled if the table is similar with initial state.
398          */
399         refreshRestoreButton: function() {
400             // check if table state is as initial state
401             var isInitial = true;
402             for (var i = 0; i < g.colOrder.length; i++) {
403                 if (g.colOrder[i] != i) {
404                     isInitial = false;
405                     break;
406                 }
407             }
408             // check if only one visible column left
409             var isOneColumn = g.visibleHeadersCount == 1;
410             // enable or disable restore button
411             if (isInitial || isOneColumn) {
412                 $('.restore_column').hide();
413             } else {
414                 $('.restore_column').show();
415             }
416         },
418         /**
419          * Update current hint using the boolean values (showReorderHint, showSortHint, etc.).
420          * It will hide the hint if all the boolean values is false.
421          *
422          * @param e event
423          */
424         updateHint: function(e) {
425             if (!g.colRsz && !g.colReorder) {     // if not resizing or dragging
426                 var text = '';
427                 if (g.showReorderHint && g.reorderHint) {
428                     text += g.reorderHint;
429                 }
430                 if (g.showSortHint && g.sortHint) {
431                     text += text.length > 0 ? '<br />' : '';
432                     text += g.sortHint;
433                 }
434                 if (g.showMarkHint && g.markHint &&
435                     !g.showSortHint      // we do not show mark hint, when sort hint is shown
436                 ) {
437                     text += text.length > 0 ? '<br />' : '';
438                     text += g.markHint;
439                 }
440                 if (g.showColVisibHint && g.colVisibHint) {
441                     text += text.length > 0 ? '<br />' : '';
442                     text += g.colVisibHint;
443                 }
445                 // hide the hint if no text and the event is mouseenter
446                 if (g.qtip) {
447                     g.qtip.disable(!text && e.type == 'mouseenter');
448                     g.qtip.updateContent(text, false);
449                 }
450             } else {
451                 g.hideHint();
452             }
453         },
455         hideHint: function() {
456             if (g.qtip) {
457                 g.qtip.hide();
458                 g.qtip.disable(true);
459             }
460         },
462         /**
463          * Toggle column's visibility.
464          * After calling this function and it returns true, afterToggleCol() must be called.
465          *
466          * @return boolean True if the column is toggled successfully.
467          */
468         toggleCol: function(n) {
469             if (g.colVisib[n]) {
470                 // can hide if more than one column is visible
471                 if (g.visibleHeadersCount > 1) {
472                     $(g.t).find('tr').each(function() {
473                         $(this).find('th.draggable:eq(' + n + '),' +
474                                      'td:eq(' + (g.actionSpan + n) + ')')
475                                .hide();
476                     });
477                     g.colVisib[n] = 0;
478                     $(g.cList).find('.lDiv div:eq(' + n + ') input').removeAttr('checked');
479                 } else {
480                     // cannot hide, force the checkbox to stay checked
481                     $(g.cList).find('.lDiv div:eq(' + n + ') input').attr('checked', 'checked');
482                     return false;
483                 }
484             } else {    // column n is not visible
485                 $(g.t).find('tr').each(function() {
486                     $(this).find('th.draggable:eq(' + n + '),' +
487                                  'td:eq(' + (g.actionSpan + n) + ')')
488                            .show();
489                 });
490                 g.colVisib[n] = 1;
491                 $(g.cList).find('.lDiv div:eq(' + n + ') input').attr('checked', 'checked');
492             }
493             return true;
494         },
496         /**
497          * This must be called if toggleCol() returns is true.
498          *
499          * This function is separated from toggleCol because, sometimes, we want to toggle
500          * some columns together at one time and do just one adjustment after it, e.g. in showAllColumns().
501          */
502         afterToggleCol: function() {
503             // some adjustments after hiding column
504             g.reposRsz();
505             g.reposDrop();
506             g.sendColPrefs();
508             // check visible first row headers count
509             g.visibleHeadersCount = $(g.t).find('tr:first th.draggable:visible').length;
510             g.refreshRestoreButton();
511         },
513         /**
514          * Show columns' visibility list.
515          *
516          * @param obj The drop down arrow of column visibility list
517          */
518         showColList: function(obj) {
519             // only show when not resizing or reordering
520             if (!g.colRsz && !g.colReorder) {
521                 var pos = $(obj).position();
522                 // check if the list position is too right
523                 if (pos.left + $(g.cList).outerWidth(true) > $(document).width()) {
524                     pos.left = $(document).width() - $(g.cList).outerWidth(true);
525                 }
526                 $(g.cList).css({
527                         left: pos.left,
528                         top: pos.top + $(obj).outerHeight(true)
529                     })
530                     .show();
531                 $(obj).addClass('coldrop-hover');
532             }
533         },
535         /**
536          * Hide columns' visibility list.
537          */
538         hideColList: function() {
539             $(g.cList).hide();
540             $(g.cDrop).find('.coldrop-hover').removeClass('coldrop-hover');
541         },
543         /**
544          * Reposition the column visibility drop-down arrow.
545          */
546         reposDrop: function() {
547             var $th = $(t).find('th:not(.draggable)');
548             for (var i = 0; i < $th.length; i++) {
549                 var $cd = $(g.cDrop).find('div:eq(' + i + ')');   // column drop-down arrow
550                 var pos = $($th[i]).position();
551                 $cd.css({
552                         left: pos.left + $($th[i]).width() - $cd.width(),
553                         top: pos.top
554                     });
555             }
556         },
558         /**
559          * Show all hidden columns.
560          */
561         showAllColumns: function() {
562             for (var i = 0; i < g.colVisib.length; i++) {
563                 if (!g.colVisib[i]) {
564                     g.toggleCol(i);
565                 }
566             }
567             g.afterToggleCol();
568         },
570         /**
571          * Show edit cell, if it can be shown
572          *
573          * @param cell <td> element to be edited
574          */
575         showEditCell: function(cell) {
576             if ($(cell).is('.grid_edit') &&
577                 !g.colRsz && !g.colReorder)
578             {
579                 if (!g.isCellEditActive) {
580                     var $cell = $(cell);
581                     // remove all edit area and hide it
582                     $(g.cEdit).find('.edit_area').empty().hide();
583                     // reposition the cEdit element
584                     $(g.cEdit).css({
585                             top: $cell.position().top,
586                             left: $cell.position().left
587                         })
588                         .show()
589                         .find('.edit_box')
590                         .css({
591                             width: $cell.outerWidth(),
592                             height: $cell.outerHeight()
593                         });
594                     // fill the cell edit with text from <td>
595                     var value = PMA_getCellValue(cell);
596                     $(g.cEdit).find('.edit_box').val(value);
598                     g.currentEditCell = cell;
599                     $(g.cEdit).find('.edit_box').focus();
600                     $(g.cEdit).find('*').removeAttr('disabled');
601                 }
602             }
603         },
605         /**
606          * Remove edit cell and the edit area, if it is shown.
607          *
608          * @param force Optional, force to hide edit cell without saving edited field.
609          * @param data  Optional, data from the POST AJAX request to save the edited field
610          *              or just specify "true", if we want to replace the edited field with the new value.
611          * @param field Optional, the edited <td>. If not specified, the function will
612          *              use currently edited <td> from g.currentEditCell.
613          */
614         hideEditCell: function(force, data, field) {
615             if (g.isCellEditActive && !force) {
616                 // cell is being edited, save or post the edited data
617                 g.saveOrPostEditedCell();
618                 return;
619             }
621             // cancel any previous request
622             if (g.lastXHR != null) {
623                 g.lastXHR.abort();
624                 g.lastXHR = null;
625             }
627             if (data) {
628                 if (g.currentEditCell) {    // save value of currently edited cell
629                     // replace current edited field with the new value
630                     var $this_field = $(g.currentEditCell);
631                     var is_null = $this_field.data('value') == null;
632                     if (is_null) {
633                         $this_field.find('span').html('NULL');
634                         $this_field.addClass('null');
635                     } else {
636                         $this_field.removeClass('null');
637                         var new_html = $this_field.data('value');
638                         if ($this_field.is('.truncated')) {
639                             if (new_html.length > g.maxTruncatedLen) {
640                                 new_html = new_html.substring(0, g.maxTruncatedLen) + '...';
641                             }
642                         }
643                         $this_field.find('span').text(new_html);
644                     }
645                 }
646                 if (data.transformations != undefined) {
647                     $.each(data.transformations, function(cell_index, value) {
648                         var $this_field = $(g.t).find('.to_be_saved:eq(' + cell_index + ')');
649                         $this_field.find('span').html(value);
650                     });
651                 }
652                 if (data.relations != undefined) {
653                     $.each(data.relations, function(cell_index, value) {
654                         var $this_field = $(g.t).find('.to_be_saved:eq(' + cell_index + ')');
655                         $this_field.find('span').html(value);
656                     });
657                 }
659                 // refresh the grid
660                 g.reposRsz();
661                 g.reposDrop();
662             }
664             // hide the cell editing area
665             $(g.cEdit).hide();
666             $(g.cEdit).find('.edit_box').blur();
667             g.isCellEditActive = false;
668             g.currentEditCell = null;
669             // destroy datepicker in edit area, if exist
670             var $dp = $(g.cEdit).find('.hasDatepicker');
671             if ($dp.length > 0) {
672                 $dp.datepicker('destroy');
673                 // change the cursor in edit box back to normal
674                 // (the cursor become a hand pointer when we add datepicker)
675                 $(g.cEdit).find('.edit_box').css('cursor', 'inherit');
676             }
677         },
679         /**
680          * Show drop-down edit area when edit cell is focused.
681          */
682         showEditArea: function() {
683             if (!g.isCellEditActive) {   // make sure the edit area has not been shown
684                 g.isCellEditActive = true;
685                 g.isEditCellTextEditable = false;
686                 /**
687                  * @var $td current edited cell
688                  */
689                 var $td = $(g.currentEditCell);
690                 /**
691                  * @var $editArea the editing area
692                  */
693                 var $editArea = $(g.cEdit).find('.edit_area');
694                 /**
695                  * @var where_clause WHERE clause for the edited cell
696                  */
697                 var where_clause = $td.parent('tr').find('.where_clause').val();
698                 /**
699                  * @var field_name  String containing the name of this field.
700                  * @see getFieldName()
701                  */
702                 var field_name = getFieldName($td);
703                 /**
704                  * @var relation_curr_value String current value of the field (for fields that are foreign keyed).
705                  */
706                 var relation_curr_value = $td.text();
707                 /**
708                  * @var relation_key_or_display_column String relational key if in 'Relational display column' mode,
709                  * relational display column if in 'Relational key' mode (for fields that are foreign keyed).
710                  */
711                 var relation_key_or_display_column = $td.find('a').attr('title');
712                 /**
713                  * @var curr_value String current value of the field (for fields that are of type enum or set).
714                  */
715                 var curr_value = $td.find('span').text();
717                 // empty all edit area, then rebuild it based on $td classes
718                 $editArea.empty();
720                 // add goto link, if this cell contains a link
721                 if ($td.find('a').length > 0) {
722                     var gotoLink = document.createElement('div');
723                     gotoLink.className = 'goto_link';
724                     $(gotoLink).append(g.gotoLinkText + ': ')
725                         .append($td.find('a').clone());
726                     $editArea.append(gotoLink);
727                 }
729                 g.wasEditedCellNull = false;
730                 if ($td.is(':not(.not_null)')) {
731                     // append a null checkbox
732                     $editArea.append('<div class="null_div">Null :<input type="checkbox"></div>');
733                     var $checkbox = $editArea.find('.null_div input');
734                     // check if current <td> is NULL
735                     if ($td.is('.null')) {
736                         $checkbox.attr('checked', true);
737                         g.wasEditedCellNull = true;
738                     }
740                     // if the select/editor is changed un-check the 'checkbox_null_<field_name>_<row_index>'.
741                     if ($td.is('.enum, .set')) {
742                         $editArea.find('select').live('change', function(e) {
743                             $checkbox.attr('checked', false);
744                         });
745                     } else if ($td.is('.relation')) {
746                         $editArea.find('select').live('change', function(e) {
747                             $checkbox.attr('checked', false);
748                         });
749                         $editArea.find('.browse_foreign').live('click', function(e) {
750                             $checkbox.attr('checked', false);
751                         });
752                     } else {
753                         $(g.cEdit).find('.edit_box').live('keypress change', function(e) {
754                             $checkbox.attr('checked', false);
755                         });
756                         $editArea.find('textarea').live('keydown', function(e) {
757                             $checkbox.attr('checked', false);
758                         });
759                     }
761                     // if null checkbox is clicked empty the corresponding select/editor.
762                     $checkbox.click(function(e) {
763                         if ($td.is('.enum')) {
764                             $editArea.find('select').attr('value', '');
765                         } else if ($td.is('.set')) {
766                             $editArea.find('select').find('option').each(function() {
767                                 var $option = $(this);
768                                 $option.attr('selected', false);
769                             });
770                         } else if ($td.is('.relation')) {
771                             // if the dropdown is there to select the foreign value
772                             if ($editArea.find('select').length > 0) {
773                                 $editArea.find('select').attr('value', '');
774                             }
775                         } else {
776                             $editArea.find('textarea').val('');
777                         }
778                         $(g.cEdit).find('.edit_box').val('');
779                     });
780                 }
782                 if ($td.is('.relation')) {
783                     //handle relations
784                     $editArea.addClass('edit_area_loading');
786                     // initialize the original data
787                     $td.data('original_data', null);
789                     /**
790                      * @var post_params Object containing parameters for the POST request
791                      */
792                     var post_params = {
793                         'ajax_request' : true,
794                         'get_relational_values' : true,
795                         'server' : g.server,
796                         'db' : g.db,
797                         'table' : g.table,
798                         'column' : field_name,
799                         'token' : g.token,
800                         'curr_value' : relation_curr_value,
801                         'relation_key_or_display_column' : relation_key_or_display_column
802                     };
804                     g.lastXHR = $.post('sql.php', post_params, function(data) {
805                         g.lastXHR = null;
806                         $editArea.removeClass('edit_area_loading');
807                         if ($(data.dropdown).is('select')) {
808                             // save original_data
809                             var value = $(data.dropdown).val();
810                             $td.data('original_data', value);
811                             // update the text input field, in case where the "Relational display column" is checked
812                             $(g.cEdit).find('.edit_box').val(value);
813                         }
815                         $editArea.append(data.dropdown);
816                         $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
817                     }); // end $.post()
819                     $editArea.show();
820                     $editArea.find('select').live('change', function(e) {
821                         $(g.cEdit).find('.edit_box').val($(this).val());
822                     });
823                 }
824                 else if($td.is('.enum')) {
825                     //handle enum fields
826                     $editArea.addClass('edit_area_loading');
828                     /**
829                      * @var post_params Object containing parameters for the POST request
830                      */
831                     var post_params = {
832                             'ajax_request' : true,
833                             'get_enum_values' : true,
834                             'server' : g.server,
835                             'db' : g.db,
836                             'table' : g.table,
837                             'column' : field_name,
838                             'token' : g.token,
839                             'curr_value' : curr_value
840                     };
841                     g.lastXHR = $.post('sql.php', post_params, function(data) {
842                         g.lastXHR = null;
843                         $editArea.removeClass('edit_area_loading');
844                         $editArea.append(data.dropdown);
845                         $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
846                     }); // end $.post()
848                     $editArea.show();
849                     $editArea.find('select').live('change', function(e) {
850                         $(g.cEdit).find('.edit_box').val($(this).val());
851                     });
852                 }
853                 else if($td.is('.set')) {
854                     //handle set fields
855                     $editArea.addClass('edit_area_loading');
857                     /**
858                      * @var post_params Object containing parameters for the POST request
859                      */
860                     var post_params = {
861                             'ajax_request' : true,
862                             'get_set_values' : true,
863                             'server' : g.server,
864                             'db' : g.db,
865                             'table' : g.table,
866                             'column' : field_name,
867                             'token' : g.token,
868                             'curr_value' : curr_value
869                     };
871                     g.lastXHR = $.post('sql.php', post_params, function(data) {
872                         g.lastXHR = null;
873                         $editArea.removeClass('edit_area_loading');
874                         $editArea.append(data.select);
875                         $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
876                     }); // end $.post()
878                     $editArea.show();
879                     $editArea.find('select').live('change', function(e) {
880                         $(g.cEdit).find('.edit_box').val($(this).val());
881                     });
882                 }
883                 else if($td.is('.truncated, .transformed')) {
884                     if ($td.is('.to_be_saved')) {   // cell has been edited
885                         var value = $td.data('value');
886                         $(g.cEdit).find('.edit_box').val(value);
887                         $editArea.append('<textarea></textarea>');
888                         $editArea.find('textarea')
889                             .val(value)
890                             .live('keyup', function(e) {
891                                 $(g.cEdit).find('.edit_box').val($(this).val());
892                             });
893                         $(g.cEdit).find('.edit_box').live('keyup', function(e) {
894                             $editArea.find('textarea').val($(this).val());
895                         });
896                         $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
897                     } else {
898                         //handle truncated/transformed values values
899                         $editArea.addClass('edit_area_loading');
901                         // initialize the original data
902                         $td.data('original_data', null);
904                         /**
905                          * @var sql_query   String containing the SQL query used to retrieve value of truncated/transformed data
906                          */
907                         var sql_query = 'SELECT `' + field_name + '` FROM `' + g.table + '` WHERE ' + PMA_urldecode(where_clause);
909                         // Make the Ajax call and get the data, wrap it and insert it
910                         g.lastXHR = $.post('sql.php', {
911                             'token' : g.token,
912                             'server' : g.server,
913                             'db' : g.db,
914                             'ajax_request' : true,
915                             'sql_query' : sql_query,
916                             'grid_edit' : true
917                         }, function(data) {
918                             g.lastXHR = null;
919                             $editArea.removeClass('edit_area_loading');
920                             if(data.success == true) {
921                                 if ($td.is('.truncated')) {
922                                     // get the truncated data length
923                                     g.maxTruncatedLen = $(g.currentEditCell).text().length - 3;
924                                 }
926                                 $td.data('original_data', data.value);
927                                 $(g.cEdit).find('.edit_box').val(data.value);
928                                 $editArea.append('<textarea></textarea>');
929                                 $editArea.find('textarea')
930                                     .val(data.value)
931                                     .live('keyup', function(e) {
932                                         $(g.cEdit).find('.edit_box').val($(this).val());
933                                     });
934                                 $(g.cEdit).find('.edit_box').live('keyup', function(e) {
935                                     $editArea.find('textarea').val($(this).val());
936                                 });
937                                 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
938                             }
939                             else {
940                                 PMA_ajaxShowMessage(data.error, false);
941                             }
942                         }); // end $.post()
943                         $editArea.show();
944                     }
945                     g.isEditCellTextEditable = true;
946                 } else if ($td.is('.datefield, .datetimefield, .timestampfield')) {
947                     var $input_field = $(g.cEdit).find('.edit_box');
948                     
949                     // remember current datetime value in $input_field, if it is not null
950                     var is_null = $td.is('.null');
951                     var current_datetime_value = !is_null ? $input_field.val() : '';
952                     
953                     var showTimeOption = true;
954                     if ($td.is('.datefield')) {
955                         showTimeOption = false;
956                     }
957                     PMA_addDatepicker($editArea, {
958                         altField: $input_field,
959                         showTimepicker: showTimeOption,
960                         onSelect: function(dateText, inst) {
961                             // remove null checkbox if it exists
962                             $(g.cEdit).find('.null_div input[type=checkbox]').attr('checked', false);
963                         }
964                     });
965                     
966                     // cancel any click on the datepicker element
967                     $editArea.find('> *').click(function(e) {
968                         e.stopPropagation();
969                     });
970                     
971                     // force to restore modified $input_field value after adding datepicker
972                     // (after adding a datepicker, the input field doesn't display the time anymore, only the date)
973                     if (!is_null) {
974                         $editArea.datetimepicker('setDate', current_datetime_value);
975                     } else {
976                         $input_field.val('');
977                     }
978                     $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
979                 } else {
980                     g.isEditCellTextEditable = true;
981                     // only append edit area hint if there is a null checkbox
982                     if ($editArea.children().length > 0) {
983                         $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
984                     }
985                 }
986                 if ($editArea.children().length > 0) {
987                     $editArea.show();
988                 }
989             }
990         },
992         /**
993          * Post the content of edited cell.
994          */
995         postEditedCell: function() {
996             if (g.isSaving) {
997                 return;
998             }
999             g.isSaving = true;
1001             /**
1002              * @var relation_fields Array containing the name/value pairs of relational fields
1003              */
1004             var relation_fields = {};
1005             /**
1006              * @var relational_display string 'K' if relational key, 'D' if relational display column
1007              */
1008             var relational_display = $("#relational_display_K").attr('checked') ? 'K' : 'D';
1009             /**
1010              * @var transform_fields    Array containing the name/value pairs for transformed fields
1011              */
1012             var transform_fields = {};
1013             /**
1014              * @var transformation_fields   Boolean, if there are any transformed fields in the edited cells
1015              */
1016             var transformation_fields = false;
1017             /**
1018              * @var full_sql_query String containing the complete SQL query to update this table
1019              */
1020             var full_sql_query = '';
1021             /**
1022              * @var rel_fields_list  String, url encoded representation of {@link relations_fields}
1023              */
1024             var rel_fields_list = '';
1025             /**
1026              * @var transform_fields_list  String, url encoded representation of {@link transform_fields}
1027              */
1028             var transform_fields_list = '';
1029             /**
1030              * @var where_clause Array containing where clause for updated fields
1031              */
1032             var full_where_clause = Array();
1033             /**
1034              * @var is_unique   Boolean, whether the rows in this table is unique or not
1035              */
1036             var is_unique = $('.edit_row_anchor').is('.nonunique') ? 0 : 1;
1037             /**
1038              * multi edit variables
1039              */
1040             var me_fields_name = Array();
1041             var me_fields = Array();
1042             var me_fields_null = Array();
1044             // alert user if edited table is not unique
1045             if (!is_unique) {
1046                 alert(g.alertNonUnique);
1047             }
1049             // loop each edited row
1050             $('.to_be_saved').parents('tr').each(function() {
1051                 var $tr = $(this);
1052                 var where_clause = $tr.find('.where_clause').val();
1053                 full_where_clause.push(PMA_urldecode(where_clause));
1054                 var condition_array = jQuery.parseJSON($tr.find('.condition_array').val());
1056                 /**
1057                  * multi edit variables, for current row
1058                  * @TODO array indices are still not correct, they should be md5 of field's name
1059                  */
1060                 var fields_name = Array();
1061                 var fields = Array();
1062                 var fields_null = Array();
1064                 // loop each edited cell in a row
1065                 $tr.find('.to_be_saved').each(function() {
1066                     /**
1067                      * @var $this_field    Object referring to the td that is being edited
1068                      */
1069                     var $this_field = $(this);
1071                     /**
1072                      * @var field_name  String containing the name of this field.
1073                      * @see getFieldName()
1074                      */
1075                     var field_name = getFieldName($this_field);
1077                     /**
1078                      * @var this_field_params   Array temporary storage for the name/value of current field
1079                      */
1080                     var this_field_params = {};
1082                     if($this_field.is('.transformed')) {
1083                         transformation_fields =  true;
1084                     }
1085                     this_field_params[field_name] = $this_field.data('value');
1087                     /**
1088                      * @var is_null String capturing whether 'checkbox_null_<field_name>_<row_index>' is checked.
1089                      */
1090                     var is_null = this_field_params[field_name] === null;
1092                     fields_name.push(field_name);
1094                     if (is_null) {
1095                         fields_null.push('on');
1096                         fields.push('');
1097                     } else {
1098                         fields_null.push('');
1099                         fields.push($this_field.data('value'));
1101                         var cell_index = $this_field.index('.to_be_saved');
1102                         if($this_field.is(":not(.relation, .enum, .set, .bit)")) {
1103                             if($this_field.is('.transformed')) {
1104                                 transform_fields[cell_index] = {};
1105                                 $.extend(transform_fields[cell_index], this_field_params);
1106                             }
1107                         } else if($this_field.is('.relation')) {
1108                             relation_fields[cell_index] = {};
1109                             $.extend(relation_fields[cell_index], this_field_params);
1110                         }
1111                     }
1112                     // check if edited field appears in WHERE clause
1113                     if (where_clause.indexOf(PMA_urlencode(field_name)) > -1) {
1114                         var field_str = '`' + g.table + '`.' + '`' + field_name + '`';
1115                         for (var field in condition_array) {
1116                             if (field.indexOf(field_str) > -1) {
1117                                 condition_array[field] = is_null ? 'IS NULL' : "= '" + this_field_params[field_name].replace(/'/g,"''") + "'";
1118                                 break;
1119                             }
1120                         }
1121                     }
1123                 }); // end of loop for every edited cells in a row
1125                 // save new_clause
1126                 var new_clause = '';
1127                 for (var field in condition_array) {
1128                     new_clause += field + ' ' + condition_array[field] + ' AND ';
1129                 }
1130                 new_clause = new_clause.substring(0, new_clause.length - 5); // remove the last AND
1131                 new_clause = PMA_urlencode(new_clause);
1132                 $tr.data('new_clause', new_clause);
1133                 // save condition_array
1134                 $tr.find('.condition_array').val(JSON.stringify(condition_array));
1136                 me_fields_name.push(fields_name);
1137                 me_fields.push(fields);
1138                 me_fields_null.push(fields_null);
1140             }); // end of loop for every edited rows
1142             rel_fields_list = $.param(relation_fields);
1143             transform_fields_list = $.param(transform_fields);
1145             // Make the Ajax post after setting all parameters
1146             /**
1147              * @var post_params Object containing parameters for the POST request
1148              */
1149             var post_params = {'ajax_request' : true,
1150                             'sql_query' : full_sql_query,
1151                             'token' : g.token,
1152                             'server' : g.server,
1153                             'db' : g.db,
1154                             'table' : g.table,
1155                             'clause_is_unique' : is_unique,
1156                             'where_clause' : full_where_clause,
1157                             'fields[multi_edit]' : me_fields,
1158                             'fields_name[multi_edit]' : me_fields_name,
1159                             'fields_null[multi_edit]' : me_fields_null,
1160                             'rel_fields_list' : rel_fields_list,
1161                             'do_transformations' : transformation_fields,
1162                             'transform_fields_list' : transform_fields_list,
1163                             'relational_display' : relational_display,
1164                             'goto' : 'sql.php',
1165                             'submit_type' : 'save'
1166                           };
1168             if (!g.saveCellsAtOnce) {
1169                 $(g.cEdit).find('*').attr('disabled', 'disabled');
1170                 var $editArea = $(g.cEdit).find('.edit_area');
1171                 $(g.cEdit).find('.edit_box').addClass('edit_box_posting');
1172             } else {
1173                 $('.save_edited').addClass('saving_edited_data')
1174                     .find('input').attr('disabled', 'disabled');    // disable the save button
1175             }
1177             $.ajax({
1178                 type: 'POST',
1179                 url: 'tbl_replace.php',
1180                 data: post_params,
1181                 success:
1182                     function(data) {
1183                         g.isSaving = false;
1184                         if (!g.saveCellsAtOnce) {
1185                             $(g.cEdit).find('*').removeAttr('disabled');
1186                             $(g.cEdit).find('.edit_box').removeClass('edit_box_posting');
1187                         } else {
1188                             $('.save_edited').removeClass('saving_edited_data')
1189                                 .find('input').removeAttr('disabled');  // enable the save button back
1190                         }
1191                         if(data.success == true) {
1192                             PMA_ajaxShowMessage(data.message);
1193                             // update where_clause related data in each edited row
1194                             $('.to_be_saved').parents('tr').each(function() {
1195                                 var new_clause = $(this).data('new_clause');
1196                                 var $where_clause = $(this).find('.where_clause');
1197                                 var old_clause = $where_clause.attr('value');
1198                                 var decoded_old_clause = PMA_urldecode(old_clause);
1199                                 var decoded_new_clause = PMA_urldecode(new_clause);
1201                                 $where_clause.attr('value', new_clause);
1202                                 // update Edit, Copy, and Delete links also
1203                                 $(this).find('a').each(function() {
1204                                     $(this).attr('href', $(this).attr('href').replace(old_clause, new_clause));
1205                                     // update delete confirmation in Delete link
1206                                     if ($(this).attr('href').indexOf('DELETE') > -1) {
1207                                         $(this).removeAttr('onclick')
1208                                             .unbind('click')
1209                                             .bind('click', function() {
1210                                                 return confirmLink(this, 'DELETE FROM `' + g.db + '`.`' + g.table + '` WHERE ' +
1211                                                        decoded_new_clause + (is_unique ? '' : ' LIMIT 1'));
1212                                             });
1213                                     }
1214                                 });
1215                                 // update the multi edit checkboxes
1216                                 $(this).find('input[type=checkbox]').each(function() {
1217                                     var $checkbox = $(this);
1218                                     var checkbox_name = $checkbox.attr('name');
1219                                     var checkbox_value = $checkbox.attr('value');
1221                                     $checkbox.attr('name', checkbox_name.replace(old_clause, new_clause));
1222                                     $checkbox.attr('value', checkbox_value.replace(decoded_old_clause, decoded_new_clause));
1223                                 });
1224                             });
1225                             // update the display of executed SQL query command
1226                             $('#result_query').remove();
1227                             if (typeof data.sql_query != 'undefined') {
1228                                 // display feedback
1229                                 $('#sqlqueryresults').prepend(data.sql_query);
1230                             }
1231                             // hide and/or update the successfully saved cells
1232                             g.hideEditCell(true, data);
1234                             // remove the "Save edited cells" button
1235                             $('.save_edited').hide();
1236                             // update saved fields
1237                             $(g.t).find('.to_be_saved')
1238                                 .removeClass('to_be_saved')
1239                                 .data('value', null)
1240                                 .data('original_data', null);
1242                             g.isCellEdited = false;
1243                         } else {
1244                             PMA_ajaxShowMessage(data.error, false);
1245                         }
1246                     }
1247             }); // end $.ajax()
1248         },
1250         /**
1251          * Save edited cell, so it can be posted later.
1252          */
1253         saveEditedCell: function() {
1254             /**
1255              * @var $this_field    Object referring to the td that is being edited
1256              */
1257             var $this_field = $(g.currentEditCell);
1258             var $test_element = ''; // to test the presence of a element
1260             var need_to_post = false;
1262             /**
1263              * @var field_name  String containing the name of this field.
1264              * @see getFieldName()
1265              */
1266             var field_name = getFieldName($this_field);
1268             /**
1269              * @var this_field_params   Array temporary storage for the name/value of current field
1270              */
1271             var this_field_params = {};
1273             /**
1274              * @var is_null String capturing whether 'checkbox_null_<field_name>_<row_index>' is checked.
1275              */
1276             var is_null = $(g.cEdit).find('input:checkbox').is(':checked');
1277             var value;
1279             if ($(g.cEdit).find('.edit_area').is('.edit_area_loading')) {
1280                 // the edit area is still loading (retrieving cell data), no need to post
1281                 need_to_post = false;
1282             } else if (is_null) {
1283                 if (!g.wasEditedCellNull) {
1284                     this_field_params[field_name] = null;
1285                     need_to_post = true;
1286                 }
1287             } else {
1288                 if ($this_field.is('.bit')) {
1289                     this_field_params[field_name] = '0b' + $(g.cEdit).find('.edit_box').val();
1290                 } else if ($this_field.is('.set')) {
1291                     $test_element = $(g.cEdit).find('select');
1292                     this_field_params[field_name] = $test_element.map(function(){
1293                         return $(this).val();
1294                     }).get().join(",");
1295                 } else if ($this_field.is('.relation, .enum')) {
1296                     // results from a drop-down
1297                     $test_element = $(g.cEdit).find('select');
1298                     if ($test_element.length != 0) {
1299                         this_field_params[field_name] = $test_element.val();
1300                     }
1302                     // results from Browse foreign value
1303                     $test_element = $(g.cEdit).find('span.curr_value');
1304                     if ($test_element.length != 0) {
1305                         this_field_params[field_name] = $test_element.text();
1306                     }
1307                 } else {
1308                     this_field_params[field_name] = $(g.cEdit).find('.edit_box').val();
1309                 }
1310                 if (g.wasEditedCellNull || this_field_params[field_name] != PMA_getCellValue(g.currentEditCell)) {
1311                     need_to_post = true;
1312                 }
1313             }
1315             if (need_to_post) {
1316                 $(g.currentEditCell).addClass('to_be_saved')
1317                     .data('value', this_field_params[field_name]);
1318                 if (g.saveCellsAtOnce) {
1319                     $('.save_edited').show();
1320                 }
1321                 g.isCellEdited = true;
1322             }
1324             return need_to_post;
1325         },
1327         /**
1328          * Save or post currently edited cell, depending on the "saveCellsAtOnce" configuration.
1329          */
1330         saveOrPostEditedCell: function() {
1331             var saved = g.saveEditedCell();
1332             if (!g.saveCellsAtOnce) {
1333                 if (saved) {
1334                     g.postEditedCell();
1335                 } else {
1336                     g.hideEditCell(true);
1337                 }
1338             } else {
1339                 if (saved) {
1340                     g.hideEditCell(true, true);
1341                 } else {
1342                     g.hideEditCell(true);
1343                 }
1344             }
1345         },
1347         /**
1348          * Initialize column resize feature.
1349          */
1350         initColResize: function() {
1351             // create column resizer div
1352             g.cRsz = document.createElement('div');
1353             g.cRsz.className = 'cRsz';
1355             // get data columns in the first row of the table
1356             var $firstRowCols = $(g.t).find('tr:first th.draggable');
1358             // create column borders
1359             $firstRowCols.each(function() {
1360                 var cb = document.createElement('div'); // column border
1361                 $(cb).addClass('colborder')
1362                     .mousedown(function(e) {
1363                         g.dragStartRsz(e, this);
1364                     });
1365                 $(g.cRsz).append(cb);
1366             });
1367             g.reposRsz();
1369             // attach to global div
1370             $(g.gDiv).prepend(g.cRsz);
1371         },
1373         /**
1374          * Initialize column reordering feature.
1375          */
1376         initColReorder: function() {
1377             g.cCpy = document.createElement('div');     // column copy, to store copy of dragged column header
1378             g.cPointer = document.createElement('div'); // column pointer, used when reordering column
1380             // adjust g.cCpy
1381             g.cCpy.className = 'cCpy';
1382             $(g.cCpy).hide();
1384             // adjust g.cPointer
1385             g.cPointer.className = 'cPointer';
1386             $(g.cPointer).css('visibility', 'hidden');  // set visibility to hidden instead of calling hide() to force browsers to cache the image in cPointer class
1388             // assign column reordering hint
1389             g.reorderHint = PMA_messages['strColOrderHint'];
1391             // get data columns in the first row of the table
1392             var $firstRowCols = $(g.t).find('tr:first th.draggable');
1394             // initialize column order
1395             $col_order = $('#col_order');   // check if column order is passed from PHP
1396             if ($col_order.length > 0) {
1397                 g.colOrder = $col_order.val().split(',');
1398                 for (var i = 0; i < g.colOrder.length; i++) {
1399                     g.colOrder[i] = parseInt(g.colOrder[i]);
1400                 }
1401             } else {
1402                 g.colOrder = new Array();
1403                 for (var i = 0; i < $firstRowCols.length; i++) {
1404                     g.colOrder.push(i);
1405                 }
1406             }
1408             // register events
1409             $(t).find('th.draggable')
1410                 .mousedown(function(e) {
1411                     if (g.visibleHeadersCount > 1) {
1412                         g.dragStartReorder(e, this);
1413                     }
1414                 })
1415                 .mouseenter(function(e) {
1416                     if (g.visibleHeadersCount > 1) {
1417                         g.showReorderHint = true;
1418                         $(this).css('cursor', 'move');
1419                     } else {
1420                         $(this).css('cursor', 'inherit');
1421                     }
1422                 })
1423                 .mouseleave(function(e) {
1424                     g.showReorderHint = false;
1425                 });
1426             // restore column order when the restore button is clicked
1427             $('.restore_column').click(function() {
1428                 g.restoreColOrder();
1429             });
1431             // attach to global div
1432             $(g.gDiv).append(g.cPointer);
1433             $(g.gDiv).append(g.cCpy);
1435             // prevent default "dragstart" event when dragging a link
1436             $(t).find('th a').bind('dragstart', function() {
1437                 return false;
1438             });
1440             // refresh the restore column button state
1441             g.refreshRestoreButton();
1442         },
1444         /**
1445          * Initialize column visibility feature.
1446          */
1447         initColVisib: function() {
1448             g.cDrop = document.createElement('div');    // column drop-down arrows
1449             g.cList = document.createElement('div');    // column visibility list
1451             // adjust g.cDrop
1452             g.cDrop.className = 'cDrop';
1454             // adjust g.cList
1455             g.cList.className = 'cList';
1456             $(g.cList).hide();
1458             // assign column visibility related hints
1459             g.colVisibHint = PMA_messages['strColVisibHint'];
1460             g.showAllColText = PMA_messages['strShowAllCol'];
1462             // get data columns in the first row of the table
1463             var $firstRowCols = $(g.t).find('tr:first th.draggable');
1465             // initialize column visibility
1466             var $col_visib = $('#col_visib');   // check if column visibility is passed from PHP
1467             if ($col_visib.length > 0) {
1468                 g.colVisib = $col_visib.val().split(',');
1469                 for (var i = 0; i < g.colVisib.length; i++) {
1470                     g.colVisib[i] = parseInt(g.colVisib[i]);
1471                 }
1472             } else {
1473                 g.colVisib = new Array();
1474                 for (var i = 0; i < $firstRowCols.length; i++) {
1475                     g.colVisib.push(1);
1476                 }
1477             }
1479             // make sure we have more than one column
1480             if ($firstRowCols.length > 1) {
1481                 var $colVisibTh = $(g.t).find('th:not(.draggable)');
1482                 PMA_createqTip($colVisibTh);
1484                 // create column visibility drop-down arrow(s)
1485                 $colVisibTh.each(function() {
1486                         var $th = $(this);
1487                         var cd = document.createElement('div'); // column drop-down arrow
1488                         var pos = $th.position();
1489                         $(cd).addClass('coldrop')
1490                             .click(function() {
1491                                 if (g.cList.style.display == 'none') {
1492                                     g.showColList(this);
1493                                 } else {
1494                                     g.hideColList();
1495                                 }
1496                             });
1497                         $(g.cDrop).append(cd);
1498                     })
1499                     .mouseenter(function(e) {
1500                         g.showColVisibHint = true;
1501                     })
1502                     .mouseleave(function(e) {
1503                         g.showColVisibHint = false;
1504                     });
1506                 // add column visibility control
1507                 g.cList.innerHTML = '<div class="lDiv"></div>';
1508                 var $listDiv = $(g.cList).find('div');
1509                 for (var i = 0; i < $firstRowCols.length; i++) {
1510                     var currHeader = $firstRowCols[i];
1511                     var listElmt = document.createElement('div');
1512                     $(listElmt).text($(currHeader).text())
1513                         .prepend('<input type="checkbox" ' + (g.colVisib[i] ? 'checked="checked" ' : '') + '/>');
1514                     $listDiv.append(listElmt);
1515                     // add event on click
1516                     $(listElmt).click(function() {
1517                         if ( g.toggleCol($(this).index()) ) {
1518                             g.afterToggleCol();
1519                         }
1520                     });
1521                 }
1522                 // add "show all column" button
1523                 var showAll = document.createElement('div');
1524                 $(showAll).addClass('showAllColBtn')
1525                     .text(g.showAllColText);
1526                 $(g.cList).append(showAll);
1527                 $(showAll).click(function() {
1528                     g.showAllColumns();
1529                 });
1530                 // prepend "show all column" button at top if the list is too long
1531                 if ($firstRowCols.length > 10) {
1532                     var clone = showAll.cloneNode(true);
1533                     $(g.cList).prepend(clone);
1534                     $(clone).click(function() {
1535                         g.showAllColumns();
1536                     });
1537                 }
1538             }
1540             // hide column visibility list if we move outside the list
1541             $(t).find('td, th.draggable').mouseenter(function() {
1542                 g.hideColList();
1543             });
1545             // attach to global div
1546             $(g.gDiv).append(g.cDrop);
1547             $(g.gDiv).append(g.cList);
1549             // some adjustment
1550             g.reposDrop();
1551         },
1553         /**
1554          * Initialize grid editing feature.
1555          */
1556         initGridEdit: function() {
1557             // create cell edit wrapper element
1558             g.cEdit = document.createElement('div');
1560             // adjust g.cEdit
1561             g.cEdit.className = 'cEdit';
1562             $(g.cEdit).html('<textarea class="edit_box" rows="1" ></textarea><div class="edit_area" />');
1563             $(g.cEdit).hide();
1565             // assign cell editing hint
1566             g.cellEditHint = PMA_messages['strCellEditHint'];
1567             g.saveCellWarning = PMA_messages['strSaveCellWarning'];
1568             g.alertNonUnique = PMA_messages['strAlertNonUnique'];
1569             g.gotoLinkText = PMA_messages['strGoToLink'];
1571             // initialize cell editing configuration
1572             g.saveCellsAtOnce = $('#save_cells_at_once').val();
1574             // register events
1575             $(t).find('td.data')
1576                 .click(function(e) {
1577                     if (g.isCellEditActive) {
1578                         g.saveOrPostEditedCell();
1579                         e.stopPropagation();
1580                     } else {
1581                         g.showEditCell(this);
1582                         e.stopPropagation();
1583                     }
1584                     // prevent default action when clicking on "link" in a table
1585                     if ($(e.target).is('a')) {
1586                         e.preventDefault();
1587                     }
1588                 });
1589             $(g.cEdit).find('.edit_box').focus(function(e) {
1590                 g.showEditArea();
1591             });
1592             $(g.cEdit).find('.edit_box, select').live('keydown', function(e) {
1593                 if (e.which == 13) {
1594                     // post on pressing "Enter"
1595                     e.preventDefault();
1596                     g.saveOrPostEditedCell();
1597                 }
1598             });
1599             $(g.cEdit).keydown(function(e) {
1600                 if (!g.isEditCellTextEditable) {
1601                     // prevent text editing
1602                     e.preventDefault();
1603                 }
1604             });
1605             $('html').click(function(e) {
1606                 // hide edit cell if the click is not from g.cEdit
1607                 if ($(e.target).parents().index(g.cEdit) == -1) {
1608                     g.hideEditCell();
1609                 }
1610             });
1611             $('html').keydown(function(e) {
1612                 if (e.which == 27 && g.isCellEditActive) {
1614                     // cancel on pressing "Esc"
1615                     g.hideEditCell(true);
1616                 }
1617             });
1618             $('.save_edited').click(function() {
1619                 g.hideEditCell();
1620                 g.postEditedCell();
1621             });
1622             $(window).bind('beforeunload', function(e) {
1623                 if (g.isCellEdited) {
1624                     return g.saveCellWarning;
1625                 }
1626             });
1628             // attach to global div
1629             $(g.gDiv).append(g.cEdit);
1631             // add hint for grid editing feature when hovering "Edit" link in each table row
1632             PMA_createqTip($(g.t).find('.edit_row_anchor a'), PMA_messages['strGridEditFeatureHint']);
1633         }
1634     };
1636     /******************
1637      * Initialize grid
1638      ******************/
1640     // wrap all data cells, except actions cell, with span
1641     $(t).find('th, td:not(:has(span))')
1642         .wrapInner('<span />');
1644     // create grid elements
1645     g.gDiv = document.createElement('div');     // create global div
1647     // initialize the table variable
1648     g.t = t;
1650     // get data columns in the first row of the table
1651     var $firstRowCols = $(t).find('tr:first th.draggable');
1653     // initialize visible headers count
1654     g.visibleHeadersCount = $firstRowCols.filter(':visible').length;
1656     // assign first column (actions) span
1657     if (! $(t).find('tr:first th:first').hasClass('draggable')) {  // action header exist
1658         g.actionSpan = $(t).find('tr:first th:first').prop('colspan');
1659     } else {
1660         g.actionSpan = 0;
1661     }
1663     // assign table create time
1664     // #table_create_time will only available if we are in "Browse" tab
1665     g.tableCreateTime = $('#table_create_time').val();
1667     // assign the hints
1668     g.sortHint = PMA_messages['strSortHint'];
1669     g.markHint = PMA_messages['strColMarkHint'];
1671     // assign common hidden inputs
1672     var $common_hidden_inputs = $('.common_hidden_inputs');
1673     g.token = $common_hidden_inputs.find('input[name=token]').val();
1674     g.server = $common_hidden_inputs.find('input[name=server]').val();
1675     g.db = $common_hidden_inputs.find('input[name=db]').val();
1676     g.table = $common_hidden_inputs.find('input[name=table]').val();
1678     // add table class
1679     $(t).addClass('pma_table');
1681     // add relative position to global div so that resize handlers are correctly positioned
1682     $(g.gDiv).css('position', 'relative');
1684     // link the global div
1685     $(t).before(g.gDiv);
1686     $(g.gDiv).append(t);
1688     // FEATURES
1689     enableResize    = enableResize == undefined ? true : enableResize;
1690     enableReorder   = enableReorder == undefined ? true : enableReorder;
1691     enableVisib     = enableVisib == undefined ? true : enableVisib;
1692     enableGridEdit  = enableGridEdit == undefined ? true : enableGridEdit;
1693     if (enableResize) {
1694         g.initColResize();
1695     }
1696     if (enableReorder &&
1697         $('.navigation').length > 0)    // disable reordering for result from EXPLAIN or SHOW syntax, which do not have a table navigation panel
1698     {
1699         g.initColReorder();
1700     }
1701     if (enableVisib) {
1702         g.initColVisib();
1703     }
1704     if (enableGridEdit &&
1705         $(t).is('.ajax'))   // make sure AjaxEnable is enabled in Settings
1706     {
1707         g.initGridEdit();
1708     }
1710     // create qtip for each <th> with draggable class
1711     PMA_createqTip($(t).find('th.draggable'));
1713     // register events for hint tooltip
1714     $(t).find('th.draggable a')
1715         .attr('title', '')          // hide default tooltip for sorting
1716         .mouseenter(function(e) {
1717             g.showSortHint = true;
1718             g.updateHint(e);
1719         })
1720         .mouseleave(function(e) {
1721             g.showSortHint = false;
1722             g.updateHint(e);
1723         });
1724     $(t).find('th.marker')
1725         .mouseenter(function(e) {
1726             g.showMarkHint = true;
1727         })
1728         .mouseleave(function(e) {
1729             g.showMarkHint = false;
1730         });
1731     // register events for dragging-related feature
1732     if (enableResize || enableReorder) {
1733         $(document).mousemove(function(e) {
1734             g.dragMove(e);
1735         });
1736         $(document).mouseup(function(e) {
1737             g.dragEnd(e);
1738         });
1739     }
1741     // bind event to update currently hovered qtip API
1742     $(t).find('th')
1743         .mouseenter(function(e) {
1744             g.qtip = $(this).qtip('api');
1745             g.updateHint(e);
1746         })
1747         .mouseleave(function(e) {
1748             g.updateHint(e);
1749         });
1751     // some adjustment
1752     $(t).removeClass('data');
1753     $(g.gDiv).addClass('data');