Start implementing conditional Ajax (in results page)
[phpmyadmin/mlewandow.git] / js / sql.js
blobe83cee8d42ac21a2f67a378e9e2d8d599945accc
1 /* vim: set expandtab sw=4 ts=4 sts=4: */
2 /**
3  * @fileoverview    functions used wherever an sql query form is used
4  *
5  * @requires    jQuery
6  * @requires    js/functions.js
7  *
8  */
10 /**
11  * decode a string URL_encoded
12  *
13  * @param string str
14  * @return string the URL-decoded string
15  */
16 function PMA_urldecode(str) {
17     return decodeURIComponent(str.replace(/\+/g, '%20'));
20 /**
21  * Get the field name for the current field.  Required to construct the query
22  * for inline editing
23  *
24  * @param   $this_field  jQuery object that points to the current field's tr
25  * @param   disp_mode    string
26  */
27 function getFieldName($this_field, disp_mode) {
29     if(disp_mode == 'vertical') {
30         var field_name = $this_field.siblings('th').find('a').text();
31         // happens when just one row (headings contain no a)
32         if ("" == field_name) {
33             field_name = $this_field.siblings('th').text();
34         }
35     }
36     else {
37         var this_field_index = $this_field.index();
38         // ltr or rtl direction does not impact how the DOM was generated
39         //
40         // 4 columns to account for the checkbox, edit, delete and appended inline edit anchors but index is zero-based so substract 3
41         var field_name = $('#table_results').find('thead').find('th:nth('+ (this_field_index-3 )+') a').text();
42         // happens when just one row (headings contain no a)
43         if ("" == field_name) {
44             field_name = $('#table_results').find('thead').find('th:nth('+ (this_field_index-3 )+')').text();
45         }
46     }
48     field_name = $.trim(field_name);
50     return field_name;
53 /**
54  * The function that iterates over each row in the table_results and appends a
55  * new inline edit anchor to each table row.
56  *
57  */
58 function appendInlineAnchor() {
59     var disp_mode = $("#top_direction_dropdown").val();
61     if (disp_mode == 'vertical') {
62         // there can be one or two tr containing this class, depending
63         // on the ModifyDeleteAtLeft and ModifyDeleteAtRight cfg parameters 
64         $('#table_results tr')
65             .find('.edit_row_anchor')
66             .removeClass('.edit_row_anchor')
67             .parent().each(function() {
68             var $this_tr = $(this);
69             var $cloned_tr = $this_tr.clone();
71             var $img_object = $cloned_tr.find('img:first').attr('title', PMA_messages['strInlineEdit']);
72             var img_src = $img_object.attr('src').replace(/b_edit/,'b_inline_edit');
73             $img_object.attr('src', img_src);
75             $cloned_tr.find('td')
76              .addClass('inline_edit_anchor')
77              .find('a').attr('href', '#')
78              .find('span')
79              .text(' ' + PMA_messages['strInlineEdit'])
80              .prepend($img_object);
82             $cloned_tr.insertAfter($this_tr);
83         });
85         $("#table_results").find('tr').find(':checkbox').closest('tr').find('th')
86          .attr('rowspan', '4');
87     }
88     else {
89         $('.edit_row_anchor').each(function() {
91             $this_td = $(this)
92             $this_td.removeClass('edit_row_anchor');
94             var $cloned_anchor = $this_td.clone();
96             var $img_object = $cloned_anchor.find('img').attr('title', PMA_messages['strInlineEdit']);
97             var img_src = $img_object.attr('src').replace(/b_edit/,'b_inline_edit');
98             $img_object.attr('src', img_src);
100             $cloned_anchor.addClass('inline_edit_anchor')
101             .find('a').attr('href', '#')
102             .find('span')
103             .text(' ' + PMA_messages['strInlineEdit'])
104             .prepend($img_object);
106             $this_td.after($cloned_anchor);
107         });
109         $('#rowsDeleteForm').find('thead, tbody').find('th').each(function() {
110             var $this_th = $(this);
111             if ($this_th.attr('colspan') == 3) {
112                 $this_th.attr('colspan', '4')
113             }
114         });
115     }
118 /**#@+
119  * @namespace   jQuery
120  */
123  * @description <p>Ajax scripts for sql and browse pages</p>
125  * Actions ajaxified here:
126  * <ul>
127  * <li>Retrieve results of an SQL query</li>
128  * <li>Paginate the results table</li>
129  * <li>Sort the results table</li>
130  * <li>Change table according to display options</li>
131  * <li>Inline editing of data</li>
132  * </ul>
134  * @name        document.ready
135  * @memberOf    jQuery
136  */
137 $(document).ready(function() {
139     /**
140      * Set a parameter for all Ajax queries made on this page.  Don't let the
141      * web server serve cached pages
142      */
143     $.ajaxSetup({
144         cache: 'false'
145     });
147     /**
148      * current value of the direction in which the table is displayed
149      * @type    String
150      * @fieldOf jQuery
151      * @name    disp_mode
152      */
153     var disp_mode = $("#top_direction_dropdown").val();
155     /**
156      * Update value of {@link jQuery.disp_mode} everytime the direction dropdown changes value
157      * @memberOf    jQuery
158      * @name        direction_dropdown_change
159      */
160     $("#top_direction_dropdown, #bottom_direction_dropdown").live('change', function(event) {
161         disp_mode = $(this).val();
162     })
164     /**
165      * Attach the {@link appendInlineAnchor} function to a custom event, which
166      * will be triggered manually everytime the table of results is reloaded
167      * @memberOf    jQuery
168      */
169     $("#sqlqueryresults").live('appendAnchor',function() {
170         appendInlineAnchor();
171     })
173     /**
174      * Trigger the appendAnchor event to prepare the first table for inline edit
175      * (see $GLOBALS['cfg']['AjaxEnable'])
176      * @memberOf    jQuery
177      * @name        sqlqueryresults_trigger
178      */
179     $("#sqlqueryresults.ajax").trigger('appendAnchor');
181     /**
182      * Append the "Show/Hide query box" message to the query input form
183      *
184      * @memberOf jQuery
185      * @name    appendToggleSpan
186      */
187     // do not add this link more than once
188     if (! $('#sqlqueryform').find('a').is('#togglequerybox')) {
189         $('<a id="togglequerybox"></a>')
190         .html(PMA_messages['strHideQueryBox'])
191         .appendTo("#sqlqueryform");
193         // Attach the toggling of the query box visibility to a click
194         $("#togglequerybox").bind('click', function() {
195             var $link = $(this)
196             $link.siblings().slideToggle("medium");
197             if ($link.text() == PMA_messages['strHideQueryBox']) {
198                 $link.text(PMA_messages['strShowQueryBox']);
199             } else {
200                 $link.text(PMA_messages['strHideQueryBox']);
201             }
202             // avoid default click action
203             return false;
204         })
205     }
206     
207     /**
208      * Ajax Event handler for 'SQL Query Submit'
209      *
210      * @see         PMA_ajaxShowMessage()
211      * @memberOf    jQuery
212      * @name        sqlqueryform_submit
213      */
214     $("#sqlqueryform").live('submit', function(event) {
215         event.preventDefault();
216         // remove any div containing a previous error message
217         $('.error').remove();
219         $form = $(this);
220         PMA_ajaxShowMessage();
222             if (! $form.find('input:hidden').is('#ajax_request_hidden')) {
223                 $form.append('<input type="hidden" id="ajax_request_hidden" name="ajax_request" value="true" />');
224             }
226         $.post($(this).attr('action'), $(this).serialize() , function(data) {
227             if(data.success == true) {
228                 // fade out previous success message, if any 
229                 $('.success').fadeOut();
230                 // show a message that stays on screen 
231                 $('#sqlqueryform').before(data.message);
232                 $('#sqlqueryresults').show();
233                 // this happens if a USE command was typed
234                 if (typeof data.reload != 'undefined') {
235                     $form.find('input[name=db]').val(data.db);
236                     // need to regenerate the whole upper part
237                     $form.find('input[name=ajax_request]').remove();
238                     $form.append('<input type="hidden" name="reload" value="true" />');
239                     $.post('db_sql.php', $form.serialize(), function(data) {
240                         $('body').html(data);
241                     }); // end inner post
242                 }
243             }
244             else if (data.success == false ) {
245                 // show an error message that stays on screen 
246                 $('#sqlqueryform').before(data.error);
247                 $('#sqlqueryresults').hide();
248             }
249             else {
250                 // real results are returned
251                 $('#sqlqueryresults').show();
252                 $("#sqlqueryresults").html(data);
253                 $("#sqlqueryresults").trigger('appendAnchor');
254                 if($("#togglequerybox").siblings(":visible").length > 0) {
255                     $("#togglequerybox").trigger('click');
256                 }
257             }
258         }) // end $.post()
259     }) // end SQL Query submit
261     /**
262      * Ajax Event handlers for Paginating the results table
263      */
265     /**
266      * Paginate when we click any of the navigation buttons
267      * (only if the element has the ajax class, see $cfg['AjaxEnable'])
268      * @memberOf    jQuery
269      * @name        paginate_nav_button_click
270      * @uses        PMA_ajaxShowMessage()
271      */
272     $("input[name=navig].ajax").live('click', function(event) {
273         /** @lends jQuery */
274         event.preventDefault();
276         PMA_ajaxShowMessage();
277         
278         /**
279          * @var $the_form    Object referring to the form element that paginates the results table
280          */
281         var $the_form = $(this).parent("form");
283         $the_form.append('<input type="hidden" name="ajax_request" value="true" />');
285         $.post($the_form.attr('action'), $the_form.serialize(), function(data) {
286             $("#sqlqueryresults").html(data);
287             $("#sqlqueryresults").trigger('appendAnchor');
288         }) // end $.post()
289     })// end Paginate results table
291     /**
292      * Paginate results with Page Selector dropdown
293      * @memberOf    jQuery
294      * @name        paginate_dropdown_change
295      */
296     $("#pageselector").live('change', function(event) {
297         var $the_form = $(this).parent("form");
299         // see $cfg['AjaxEnable']
300         if ($(this).hasClass('ajax')) {
301             event.preventDefault();
303             PMA_ajaxShowMessage();
305             $.post($the_form.attr('action'), $the_form.serialize() + '&ajax_request=true', function(data) {
306                 $("#sqlqueryresults").html(data);
307                 $("#sqlqueryresults").trigger('appendAnchor');
308             }) // end $.post()
309         } else {
310             $the_form.submit();
311         }
313     })// end Paginate results with Page Selector
315     /**
316      * Ajax Event handler for sorting the results table
317      * @memberOf    jQuery
318      * @name        table_results_sort_click
319      */
320     $("#table_results").find("a[title=Sort]").live('click', function(event) {
321         event.preventDefault();
323         PMA_ajaxShowMessage();
325         $.get($(this).attr('href'), $(this).serialize() + '&ajax_request=true', function(data) {
326             $("#sqlqueryresults").html(data);
327             $("#sqlqueryresults").trigger('appendAnchor');
328         }) // end $.get()
329     })//end Sort results table
331     /**
332      * Ajax Event handler for the display options
333      * @memberOf    jQuery
334      * @name        displayOptionsForm_submit
335      */
336     $("#displayOptionsForm").live('submit', function(event) {
337         event.preventDefault();
339         $.post($(this).attr('action'), $(this).serialize() + '&ajax_request=true' , function(data) {
340             $("#sqlqueryresults").html(data);
341             $("#sqlqueryresults").trigger('appendAnchor');
342         }) // end $.post()
343     })
344     //end displayOptionsForm handler
346     /**
347      * Ajax Event handlers for Inline Editing
348      */
350     /**
351      * On click, replace the fields of current row with an input/textarea
352      * @memberOf    jQuery
353      * @name        inline_edit_start
354      * @see         PMA_ajaxShowMessage()
355      * @see         getFieldName()
356      */
357     $(".inline_edit_anchor").live('click', function(event) {
358         /** @lends jQuery */
359         event.preventDefault();
361         $(this).removeClass('inline_edit_anchor').addClass('inline_edit_active');
363         // Initialize some variables
364         if(disp_mode == 'vertical') {
365             /**
366              * @var this_row_index  Index of the current <td> in the parent <tr>
367              *                      Current <td> is the inline edit anchor.
368              */
369             var this_row_index = $(this).index();
370             /**
371              * @var $input_siblings  Object referring to all inline editable events from same row
372              */
373             var $input_siblings = $(this).parents('tbody').find('tr').find('.inline_edit:nth('+this_row_index+')');
374             /**
375              * @var where_clause    String containing the WHERE clause to select this row
376              */
377             var where_clause = $(this).parents('tbody').find('tr').find('.where_clause:nth('+this_row_index+')').val();
378         }
379         else {
380             var $input_siblings = $(this).parent('tr').find('.inline_edit');
381             var where_clause = $(this).parent('tr').find('.where_clause').val();
382         }
384         $input_siblings.each(function() {
385             /** @lends jQuery */
386             /**
387              * @var data_value  Current value of this field
388              */
389             var data_value = $(this).html();
391             // We need to retrieve the value from the server for truncated/relation fields
392             // Find the field name
393             
394             /**
395              * @var this_field  Object referring to this field (<td>)
396              */
397             var $this_field = $(this);
398             /**
399              * @var field_name  String containing the name of this field.
400              * @see getFieldName()
401              */
402             var field_name = getFieldName($this_field, disp_mode);
404             // In each input sibling, wrap the current value in a textarea
405             // and store the current value in a hidden span
406             if($this_field.is(':not(.truncated, .transformed, .relation, .enum, .null)')) {
407                 // handle non-truncated, non-transformed, non-relation values
408                 // We don't need to get any more data, just wrap the value
409                 $this_field.html('<textarea>'+data_value+'</textarea>')
410                 .append('<span class="original_data">'+data_value+'</span>');
411                 $(".original_data").hide();
412             }
413             else if($this_field.is('.truncated, .transformed')) {
414                 /** @lends jQuery */
415                 //handle truncated/transformed values values
417                 /**
418                  * @var sql_query   String containing the SQL query used to retrieve value of truncated/transformed data
419                  */
420                 var sql_query = 'SELECT ' + field_name + ' FROM ' + window.parent.table + ' WHERE ' + where_clause;
422                 // Make the Ajax call and get the data, wrap it and insert it
423                 $.post('sql.php', {
424                     'token' : window.parent.token,
425                     'db' : window.parent.db,
426                     'ajax_request' : true,
427                     'sql_query' : sql_query,
428                     'inline_edit' : true
429                 }, function(data) {
430                     if(data.success == true) {
431                         $this_field.html('<textarea>'+data.value+'</textarea>')
432                         .append('<span class="original_data">'+data_value+'</span>');
433                         $(".original_data").hide();
434                     }
435                     else {
436                         PMA_ajaxShowMessage(data.error);
437                     }
438                 }) // end $.post()
439             }
440             else if($this_field.is('.relation')) {
441                 /** @lends jQuery */
442                 //handle relations
444                 /**
445                  * @var curr_value  String containing the current value of this relational field
446                  */
447                 var curr_value = $this_field.find('a').text();
449                 /**
450                  * @var post_params Object containing parameters for the POST request
451                  */
452                 var post_params = {
453                         'ajax_request' : true,
454                         'get_relational_values' : true,
455                         'db' : window.parent.db,
456                         'table' : window.parent.table,
457                         'column' : field_name,
458                         'token' : window.parent.token,
459                         'curr_value' : curr_value
460                 }
462                 $.post('sql.php', post_params, function(data) {
463                     $this_field.html(data.dropdown)
464                     .append('<span class="original_data">'+data_value+'</span>');
465                     $(".original_data").hide();
466                 }) // end $.post()
467             }
468             else if($this_field.is('.enum')) {
469                 /** @lends jQuery */
470                 //handle enum fields
471                 /**
472                  * @var curr_value  String containing the current value of this relational field
473                  */
474                 var curr_value = $this_field.text();
476                 /**
477                  * @var post_params Object containing parameters for the POST request
478                  */
479                 var post_params = {
480                         'ajax_request' : true,
481                         'get_enum_values' : true,
482                         'db' : window.parent.db,
483                         'table' : window.parent.table,
484                         'column' : field_name,
485                         'token' : window.parent.token,
486                         'curr_value' : curr_value
487                 }
489                 $.post('sql.php', post_params, function(data) {
490                     $this_field.html(data.dropdown)
491                     .append('<span class="original_data">'+data_value+'</span>');
492                     $(".original_data").hide();
493                 }) // end $.post()
494             }
495             else if($this_field.is('.null')) {
496                 //handle null fields
497                 $this_field.html('<textarea></textarea>')
498                 .append('<span class="original_data">NULL</span>');
499                 $(".original_data").hide();
500             }
501         })
502     }) // End On click, replace the current field with an input/textarea
504     /**
505      * After editing, clicking again should post data
506      *
507      * @memberOf    jQuery
508      * @name        inline_edit_save
509      * @see         PMA_ajaxShowMessage()
510      * @see         getFieldName()
511      */
512     $(".inline_edit_active").live('click', function(event) {
513         /** @lends jQuery */
514         event.preventDefault();
516         /**
517          * @var $this_td    Object referring to the td containing the 
518          * "Inline Edit" link that was clicked to save the row that is 
519          * being edited
520          *
521          */
522         var $this_td = $(this);
524         var $test_element = ''; // to test the presence of a element
526         // Initialize variables
527         if(disp_mode == 'vertical') {
528             /**
529              * @var this_td_index  Index of the current <td> in the parent <tr>
530              *                      Current <td> is the inline edit anchor.
531              */
532             var this_td_index = $this_td.index();
533             /**
534              * @var $input_siblings  Object referring to all inline editable events from same row
535              */
536             var $input_siblings = $this_td.parents('tbody').find('tr').find('.inline_edit:nth('+this_td_index+')');
537             /**
538              * @var where_clause    String containing the WHERE clause to select this row
539              */
540             var where_clause = $this_td.parents('tbody').find('tr').find('.where_clause:nth('+this_td_index+')').val();
541         }
542         else {
543             var $input_siblings = $this_td.parent('tr').find('.inline_edit');
544             var where_clause = $this_td.parent('tr').find('.where_clause').val();
545         }
547         /**
548          * @var nonunique   Boolean, whether this row is unique or not
549          */
550         if($this_td.is('.nonunique')) {
551             var nonunique = 0;
552         }
553         else {
554             var nonunique = 1;
555         }
557         // Collect values of all fields to submit, we don't know which changed
558         /**
559          * @var params_to_submit    Array containing the name/value pairs of all fields
560          */
561         var params_to_submit = {};
562         /**
563          * @var relation_fields Array containing the name/value pairs of relational fields
564          */
565         var relation_fields = {};
566         /**
567          * @var transform_fields    Array containing the name/value pairs for transformed fields
568          */
569         var transform_fields = {};
570         /**
571          * @var transformation_fields   Boolean, if there are any transformed fields in this row
572          */
573         var transformation_fields = false;
575         $input_siblings.each(function() {
576             /** @lends jQuery */
577             /**
578              * @var this_field  Object referring to this field (<td>)
579              */
580             var $this_field = $(this);
581             /**
582              * @var field_name  String containing the name of this field.
583              * @see getFieldName()
584              */
585             var field_name = getFieldName($this_field, disp_mode);
587             /**
588              * @var this_field_params   Array temporary storage for the name/value of current field
589              */
590             var this_field_params = {};
592             if($this_field.is('.transformed')) {
593                 transformation_fields =  true;
594             }
596             if($this_field.is(":not(.relation, .enum)")) {
597                 this_field_params[field_name] = $this_field.find('textarea').val();
598                 if($this_field.is('.transformed')) {
599                     $.extend(transform_fields, this_field_params);
600                 }
601             }
602             else {
603                 // results from a drop-down
604                 $test_element = $this_field.find('select');
605                 if ($test_element.length != 0) {
606                     this_field_params[field_name] = $test_element.val();
607                 }
609                 // results from Browse foreign value
610                 $test_element = $this_field.find('span.curr_value');
611                 if ($test_element.length != 0) {
612                     this_field_params[field_name] = $test_element.text();
613                 }
615                 if($this_field.is('.relation')) {
616                     $.extend(relation_fields, this_field_params);
617                 }
618             }
620             $.extend(params_to_submit, this_field_params);
621         })
623         /**
624          * @var sql_query   String containing the SQL query to update this row
625          */
626         var sql_query = 'UPDATE ' + window.parent.table + ' SET ';
628         $.each(params_to_submit, function(key, value) {
629             if(value.length == 0) {
630                 value = 'NULL'
631             }
632            sql_query += ' ' + key + "='" + value.replace(/'/g, "''") + "' , ";
633         })
634         //Remove the last ',' appended in the above loop
635         sql_query = sql_query.replace(/,\s$/, '');
636         sql_query += ' WHERE ' + PMA_urldecode(where_clause);
638         /**
639          * @var rel_fields_list  String, url encoded representation of {@link relations_fields}
640          */
641         var rel_fields_list = $.param(relation_fields);
643         /**
644          * @var transform_fields_list  String, url encoded representation of {@link transform_fields}
645          */
646         var transform_fields_list = $.param(transform_fields);
648         // Make the Ajax post after setting all parameters
649         /**
650          * @var post_params Object containing parameters for the POST request
651          */
652         var post_params = {'ajax_request' : true,
653                             'sql_query' : sql_query,
654                             'disp_direction' : disp_mode,
655                             'token' : window.parent.token,
656                             'db' : window.parent.db,
657                             'table' : window.parent.table,
658                             'clause_is_unique' : nonunique,
659                             'where_clause' : where_clause,
660                             'rel_fields_list' : rel_fields_list,
661                             'do_transformations' : transformation_fields,
662                             'transform_fields_list' : transform_fields_list,
663                             'goto' : 'sql.php',
664                             'submit_type' : 'save'
665                           };
667         $.post('tbl_replace.php', post_params, function(data) {
668             if(data.success == true) {
669                 PMA_ajaxShowMessage(data.message);
670                 $this_td.removeClass('inline_edit_active').addClass('inline_edit_anchor');
672                 $input_siblings.each(function() {
673                     // Inline edit post has been successful.
674                     $this_sibling = $(this);
675                     if($this_sibling.is(':not(.relation, .enum)')) {
676                         /**
677                          * @var new_html    String containing value of the data field after edit
678                          */
679                         var new_html = $this_sibling.find('textarea').val();
681                         if($this_sibling.is('.transformed')) {
682                             var field_name = getFieldName($this_sibling, disp_mode);
683                             $.each(data.transformations, function(key, value) {
684                                 if(key == field_name) {
685                                     if($this_sibling.is('.text_plain, .application_octetstream')) {
686                                         new_html = value;
687                                         return false;
688                                     }
689                                     else {
690                                         var new_value = $this_sibling.find('textarea').val();
691                                         new_html = $(value).append(new_value);
692                                         return false;
693                                     }
694                                 }
695                             })
696                         }
697                     }
698                     else {
699                         var new_html = '';
700                         var new_value = '';
701                         $test_element = $this_sibling.find('select');
702                         if ($test_element.length != 0) {
703                             new_value = $test_element.val();
704                         }
706                         $test_element = $this_sibling.find('span.curr_value');
707                         if ($test_element.length != 0) {
708                             new_value = $test_element.text();
709                         }
711                         
712                         if($this_sibling.is('.relation')) {
713                             var field_name = getFieldName($this_sibling, disp_mode);
714                             $.each(data.relations, function(key, value) {
715                                 if(key == field_name) {
716                                     new_html = $(value).append(new_value);
717                                     return false;
718                                 }
719                             })
720                         } 
721                         if($this_sibling.is('.enum')) {
722                             new_html = new_value;
723                         }
724                     }
725                     $this_sibling.html(new_html);
726                 })
727             }
728             else {
729                 PMA_ajaxShowMessage(data.error);
730             };
731         }) // end $.post()
732     }) // End After editing, clicking again should post data
733 }, 'top.frame_content') // end $(document).ready()
736  * Starting from some th, change the class of all td under it
737  */
738 function PMA_changeClassForColumn($this_th, newclass) {
739     // index 0 is the th containing the big T
740     var th_index = $this_th.index();
741     // .eq() is zero-based
742     th_index--;
743     var $tr_with_data = $this_th.closest('table').find('tbody tr ').has('td.data');
744     $tr_with_data.each(function() {
745         $(this).find('td.data:eq('+th_index+')').toggleClass(newclass);
746     });
749 $(document).ready(function() {
751     $('.browse_foreign').live('click', function(e) {
752         e.preventDefault();
753         window.open(this.href, 'foreigners', 'width=640,height=240,scrollbars=yes,resizable=yes');
754         $anchor = $(this);
755         $anchor.addClass('browse_foreign_clicked');
756         return false;
757     });
759     /**
760      * vertical column highlighting in horizontal mode when hovering over the column header
761      */
762     $('.column_heading').live('hover', function() {
763         PMA_changeClassForColumn($(this), 'hover'); 
764         });
766     /**
767      * vertical column marking in horizontal mode when clicking the column header
768      */
769     $('.column_heading').live('click', function() {
770         PMA_changeClassForColumn($(this), 'marked'); 
771         });
774 /**#@- */