Disable edit box in grid editing, while edit area is shown
[phpmyadmin/arisferyanto.git] / js / sql.js
bloba7cfe988ea8866d1bfbcd61c288041fe4a923062
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 var $data_a;
12 /**
13  * decode a string URL_encoded
14  *
15  * @param string str
16  * @return string the URL-decoded string
17  */
18 function PMA_urldecode(str)
20     return decodeURIComponent(str.replace(/\+/g, '%20'));
23 function PMA_urlencode(str)
25     return encodeURIComponent(str).replace(/\%20/g, '+');
28 /**
29  * Get the field name for the current field.  Required to construct the query
30  * for grid editing
31  *
32  * @param   $this_field  jQuery object that points to the current field's tr
33  */
34 function getFieldName($this_field)
37     var this_field_index = $this_field.index();
38     // ltr or rtl direction does not impact how the DOM was generated
39     // check if the action column in the left exist
40     var left_action_exist = !$('#table_results').find('th:first').hasClass('draggable');
41     // number of column span for checkbox and Actions
42     var left_action_skip = left_action_exist ? $('#table_results').find('th:first').attr('colspan') - 1 : 0;
43     var field_name = $('#table_results').find('thead').find('th:eq('+ (this_field_index - left_action_skip) + ') a').text();
44     // happens when just one row (headings contain no a)
45     if ("" == field_name) {
46         field_name = $('#table_results').find('thead').find('th:eq('+ (this_field_index - left_action_skip) + ')').text();
47     }
49     field_name = $.trim(field_name);
51     return field_name;
55 /**#@+
56  * @namespace   jQuery
57  */
59 /**
60  * @description <p>Ajax scripts for sql and browse pages</p>
61  *
62  * Actions ajaxified here:
63  * <ul>
64  * <li>Retrieve results of an SQL query</li>
65  * <li>Paginate the results table</li>
66  * <li>Sort the results table</li>
67  * <li>Change table according to display options</li>
68  * <li>Grid editing of data</li>
69  * </ul>
70  *
71  * @name        document.ready
72  * @memberOf    jQuery
73  */
74 $(document).ready(function() {
76     /**
77      * Set a parameter for all Ajax queries made on this page.  Don't let the
78      * web server serve cached pages
79      */
80     $.ajaxSetup({
81         cache: 'false'
82     });
84     /* Hides the bookmarkoptions checkboxes when the bookmark label is empty */
85     $('input#bkm_label').keyup(function() {
86         $('input#id_bkm_all_users, input#id_bkm_replace')
87             .parent()
88             .toggle($(this).attr('value').length > 0);
89     }).trigger('keyup');
91     /**
92      * Attach the {@link makegrid} function to a custom event, which will be
93      * triggered manually everytime the table of results is reloaded
94      * @memberOf    jQuery
95      */
96     $("#sqlqueryresults").live('makegrid', function() {
97         PMA_makegrid($('#table_results')[0]);
98     });
100     /**
101      * Append the "Show/Hide query box" message to the query input form
102      *
103      * @memberOf jQuery
104      * @name    appendToggleSpan
105      */
106     // do not add this link more than once
107     if (! $('#sqlqueryform').find('a').is('#togglequerybox')) {
108         $('<a id="togglequerybox"></a>')
109         .html(PMA_messages['strHideQueryBox'])
110         .appendTo("#sqlqueryform")
111         // initially hidden because at this point, nothing else
112         // appears under the link
113         .hide();
115         // Attach the toggling of the query box visibility to a click
116         $("#togglequerybox").bind('click', function() {
117             var $link = $(this);
118             $link.siblings().slideToggle("fast");
119             if ($link.text() == PMA_messages['strHideQueryBox']) {
120                 $link.text(PMA_messages['strShowQueryBox']);
121                 // cheap trick to add a spacer between the menu tabs
122                 // and "Show query box"; feel free to improve!
123                 $('#togglequerybox_spacer').remove();
124                 $link.before('<br id="togglequerybox_spacer" />');
125             } else {
126                 $link.text(PMA_messages['strHideQueryBox']);
127             }
128             // avoid default click action
129             return false;
130         });
131     }
134     /**
135      * Event handler for sqlqueryform.ajax button_submit_query 
136      *
137      * @memberOf    jQuery
138      */
139     $("#button_submit_query").live('click', function(event) {
140         var $form = $(this).closest("form");
141         // the Go button related to query submission was clicked,
142         // instead of the one related to Bookmarks, so empty the
143         // id_bookmark selector to avoid misinterpretation in 
144         // import.php about what needs to be done
145         $form.find("select[name=id_bookmark]").attr("value","");
146         // let normal event propagation happen
147     });
149     /**
150      * Ajax Event handler for 'SQL Query Submit'
151      *
152      * @see         PMA_ajaxShowMessage()
153      * @see         $cfg['AjaxEnable']
154      * @memberOf    jQuery
155      * @name        sqlqueryform_submit
156      */
157     $("#sqlqueryform.ajax").live('submit', function(event) {
158         event.preventDefault();
160         var $form = $(this);
161         if (! checkSqlQuery($form[0])) {
162             return false;
163         }
165         // remove any div containing a previous error message
166         $('.error').remove();
168         var $msgbox = PMA_ajaxShowMessage();
169         var $sqlqueryresults = $('#sqlqueryresults');
171         PMA_prepareForAjaxRequest($form);
173         $.post($form.attr('action'), $form.serialize() , function(data) {
174             if (data.success == true) {
175                 // success happens if the query returns rows or not
176                 //
177                 // fade out previous messages, if any
178                 $('.success').fadeOut();
179                 $('.sqlquery_message').fadeOut();
180                 // show a message that stays on screen
181                 if (typeof data.action_bookmark != 'undefined') {
182                     // view only
183                     if ('1' == data.action_bookmark) {
184                         $('#sqlquery').text(data.sql_query);
185                         // send to codemirror if possible
186                         setQuery(data.sql_query);
187                     }
188                     // delete
189                     if ('2' == data.action_bookmark) {
190                         $("#id_bookmark option[value='" + data.id_bookmark + "']").remove();
191                     }
192                     $('#sqlqueryform').before(data.message);
193                 } else if (typeof data.sql_query != 'undefined') {
194                     $('<div class="sqlquery_message"></div>')
195                      .html(data.sql_query)
196                      .insertBefore('#sqlqueryform');
197                     // unnecessary div that came from data.sql_query
198                     $('.notice').remove();
199                 } else {
200                     $('#sqlqueryform').before(data.message);
201                 }
202                 $sqlqueryresults.show();
203                 // this happens if a USE command was typed
204                 if (typeof data.reload != 'undefined') {
205                     // Unbind the submit event before reloading. See bug #3295529
206                     $("#sqlqueryform.ajax").die('submit');
207                     $form.find('input[name=db]').val(data.db);
208                     // need to regenerate the whole upper part
209                     $form.find('input[name=ajax_request]').remove();
210                     $form.append('<input type="hidden" name="reload" value="true" />');
211                     $.post('db_sql.php', $form.serialize(), function(data) {
212                         $('body').html(data);
213                     }); // end inner post
214                 }
215             } else if (data.success == false ) {
216                 // show an error message that stays on screen
217                 $('#sqlqueryform').before(data.error);
218                 $sqlqueryresults.hide();
219             }  else {
220                 // real results are returned
221                 // fade out previous messages, if any
222                 $('.success').fadeOut();
223                 $('.sqlquery_message').fadeOut();
224                 var $received_data = $(data);
225                 var $zero_row_results = $received_data.find('textarea[name="sql_query"]');
226                 // if zero rows are returned from the query execution
227                 if ($zero_row_results.length > 0) {
228                     $('#sqlquery').val($zero_row_results.val());
229                 } else {
230                     $sqlqueryresults
231                      .show()
232                      .html(data)
233                      .trigger('makegrid');
234                     $('#togglequerybox').show();
235                     if ($("#togglequerybox").siblings(":visible").length > 0) {
236                         $("#togglequerybox").trigger('click');
237                     }
238                     PMA_init_slider();
239                 }
240             }
241             PMA_ajaxRemoveMessage($msgbox);
242         }); // end $.post()
243     }); // end SQL Query submit
245     /**
246      * Ajax Event handlers for Paginating the results table
247      */
249     /**
250      * Paginate when we click any of the navigation buttons
251      * (only if the element has the ajax class, see $cfg['AjaxEnable'])
252      * @memberOf    jQuery
253      * @name        paginate_nav_button_click
254      * @uses        PMA_ajaxShowMessage()
255      * @see         $cfg['AjaxEnable']
256      */
257     $("input[name=navig].ajax").live('click', function(event) {
258         /** @lends jQuery */
259         event.preventDefault();
261         var $msgbox = PMA_ajaxShowMessage();
263         /**
264          * @var $form    Object referring to the form element that paginates the results table
265          */
266         var $form = $(this).parent("form");
268         PMA_prepareForAjaxRequest($form);
270         $.post($form.attr('action'), $form.serialize(), function(data) {
271             $("#sqlqueryresults")
272              .html(data)
273              .trigger('makegrid');
274             PMA_init_slider();
276             PMA_ajaxRemoveMessage($msgbox);
277         }); // end $.post()
278     }); // end Paginate results table
280     /**
281      * Paginate results with Page Selector dropdown
282      * @memberOf    jQuery
283      * @name        paginate_dropdown_change
284      * @see         $cfg['AjaxEnable']
285      */
286     $("#pageselector").live('change', function(event) {
287         var $form = $(this).parent("form");
289         if ($(this).hasClass('ajax')) {
290             event.preventDefault();
292             var $msgbox = PMA_ajaxShowMessage();
294             $.post($form.attr('action'), $form.serialize() + '&ajax_request=true', function(data) {
295                 $("#sqlqueryresults")
296                  .html(data)
297                  .trigger('makegrid');
298                 PMA_init_slider();
299                 PMA_ajaxRemoveMessage($msgbox);
300             }); // end $.post()
301         } else {
302             $form.submit();
303         }
305     }); // end Paginate results with Page Selector
307     /**
308      * Ajax Event handler for sorting the results table
309      * @memberOf    jQuery
310      * @name        table_results_sort_click
311      * @see         $cfg['AjaxEnable']
312      */
313     $("#table_results.ajax").find("a[title=Sort]").live('click', function(event) {
314         event.preventDefault();
316         var $msgbox = PMA_ajaxShowMessage();
318         $anchor = $(this);
320         $.get($anchor.attr('href'), $anchor.serialize() + '&ajax_request=true', function(data) {
321             $("#sqlqueryresults")
322              .html(data)
323              .trigger('makegrid');
324             PMA_ajaxRemoveMessage($msgbox);
325         }); // end $.get()
326     }); //end Sort results table
328     /**
329      * Ajax Event handler for the display options
330      * @memberOf    jQuery
331      * @name        displayOptionsForm_submit
332      * @see         $cfg['AjaxEnable']
333      */
334     $("#displayOptionsForm.ajax").live('submit', function(event) {
335         event.preventDefault();
337         $form = $(this);
339         $.post($form.attr('action'), $form.serialize() + '&ajax_request=true' , function(data) {
340             $("#sqlqueryresults")
341              .html(data)
342              .trigger('makegrid');
343             PMA_init_slider();
344         }); // end $.post()
345     }); //end displayOptionsForm handler
348  * Ajax Event for table row change
349  * */
350     $("#resultsForm.ajax .mult_submit[value=edit]").live('click', function(event){
351         event.preventDefault();
353         /*Check whether atleast one row is selected for change*/
354         if ($("#table_results tbody tr, #table_results tbody tr td").hasClass("marked")) {
355             var div = $('<div id="change_row_dialog"></div>');
357             /**
358              *  @var    button_options  Object that stores the options passed to jQueryUI
359              *                          dialog
360              */
361             var button_options = {};
362             // in the following function we need to use $(this)
363             button_options[PMA_messages['strCancel']] = function() {$(this).dialog('close').remove();};
365             var button_options_error = {};
366             button_options_error[PMA_messages['strOK']] = function() {$(this).dialog('close').remove();};
367             var $form = $("#resultsForm");
368             var $msgbox = PMA_ajaxShowMessage();
370             $.get( $form.attr('action'), $form.serialize()+"&ajax_request=true&submit_mult=row_edit", function(data) {
371                 //in the case of an error, show the error message returned.
372                 if (data.success != undefined && data.success == false) {
373                     div
374                     .append(data.error)
375                     .dialog({
376                         title: PMA_messages['strChangeTbl'],
377                         height: 230,
378                         width: 900,
379                         open: PMA_verifyColumnsProperties,
380                         close: function(event, ui) {
381                             $('#change_row_dialog').remove();
382                         },
383                         buttons : button_options_error
384                     }); // end dialog options
385                 } else {
386                     div
387                     .append(data)
388                     .dialog({
389                         title: PMA_messages['strChangeTbl'],
390                         height: 600,
391                         width: 900,
392                         open: PMA_verifyColumnsProperties,
393                         close: function(event, ui) {
394                             $('#change_row_dialog').remove();
395                         },
396                         buttons : button_options
397                     })
398                     //Remove the top menu container from the dialog
399                     .find("#topmenucontainer").hide()
400                     ; // end dialog options
401                     $(".insertRowTable").addClass("ajax");
402                     $("#buttonYes").addClass("ajax");
403                 }
404                 PMA_ajaxRemoveMessage($msgbox);
405             }); // end $.get()
406         } else {
407             PMA_ajaxShowMessage(PMA_messages['strNoRowSelected']);
408         }
409     });
412  * Click action for "Go" button in ajax dialog insertForm -> insertRowTable
413  */
414     $("#insertForm .insertRowTable.ajax input[type=submit]").live('click', function(event) {
415         event.preventDefault();
416         /**
417          *  @var    the_form    object referring to the insert form
418          */
419         var $form = $("#insertForm");
420         PMA_prepareForAjaxRequest($form);
421         //User wants to submit the form
422         $.post($form.attr('action'), $form.serialize(), function(data) {
423             if (data.success == true) {
424                 PMA_ajaxShowMessage(data.message);
425                 if ($("#pageselector").length != 0) {
426                     $("#pageselector").trigger('change');
427                 } else {
428                     $("input[name=navig].ajax").trigger('click');
429                 }
431             } else {
432                 PMA_ajaxShowMessage(data.error);
433                 $("#table_results tbody tr.marked .multi_checkbox " +
434                         ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
435                 $("#table_results tbody tr.marked .multi_checkbox " +
436                         ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
437                 $("#table_results tbody tr" +
438                         ", #table_results tbody tr td").removeClass("marked");
439             }
440             if ($("#change_row_dialog").length > 0) {
441                 $("#change_row_dialog").dialog("close").remove();
442             }
443             /**Update the row count at the tableForm*/
444             $("#result_query").remove();
445             $("#sqlqueryresults").prepend(data.sql_query);
446             $("#result_query .notice").remove();
447             $("#result_query").prepend((data.message));
448         }); // end $.post()
449     }); // end insert table button "Go"
451 /**$("#buttonYes.ajax").live('click'
452  * Click action for #buttonYes button in ajax dialog insertForm
453  */
454     $("#buttonYes.ajax").live('click', function(event){
455         event.preventDefault();
456         /**
457          *  @var    the_form    object referring to the insert form
458          */
459         var $form = $("#insertForm");
460         /**Get the submit type and the after insert type in the form*/
461         var selected_submit_type = $("#insertForm").find("#actions_panel .control_at_footer option:selected").attr('value');
462         var selected_after_insert = $("#insertForm").find("#actions_panel select[name=after_insert] option:selected").attr('value');
463         $("#result_query").remove();
464         PMA_prepareForAjaxRequest($form);
465         //User wants to submit the form
466         $.post($form.attr('action'), $form.serialize() , function(data) {
467             if (data.success == true) {
468                 PMA_ajaxShowMessage(data.message);
469                 if (selected_submit_type == "showinsert") {
470                     $("#sqlqueryresults").prepend(data.sql_query);
471                     $("#result_query .notice").remove();
472                     $("#result_query").prepend(data.message);
473                     $("#table_results tbody tr.marked .multi_checkbox " +
474                         ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
475                     $("#table_results tbody tr.marked .multi_checkbox " +
476                         ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
477                     $("#table_results tbody tr" +
478                         ", #table_results tbody tr td").removeClass("marked");
479                 } else {
480                     if ($("#pageselector").length != 0) {
481                         $("#pageselector").trigger('change');
482                     } else {
483                         $("input[name=navig].ajax").trigger('click');
484                     }
485                     $("#result_query").remove();
486                     $("#sqlqueryresults").prepend(data.sql_query);
487                     $("#result_query .notice").remove();
488                     $("#result_query").prepend((data.message));
489                 }
490             } else {
491                 PMA_ajaxShowMessage(data.error);
492                 $("#table_results tbody tr.marked .multi_checkbox " +
493                     ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
494                 $("#table_results tbody tr.marked .multi_checkbox " +
495                     ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
496                 $("#table_results tbody tr" +
497                     ", #table_results tbody tr td").removeClass("marked");
498             }
499             if ($("#change_row_dialog").length > 0) {
500                 $("#change_row_dialog").dialog("close").remove();
501             }
502         }); // end $.post()
503     });
505 }, 'top.frame_content'); // end $(document).ready()
509  * Starting from some th, change the class of all td under it.
510  * If isAddClass is specified, it will be used to determine whether to add or remove the class.
511  */
512 function PMA_changeClassForColumn($this_th, newclass, isAddClass)
514     // index 0 is the th containing the big T
515     var th_index = $this_th.index();
516     var has_big_t = !$this_th.closest('tr').children(':first').hasClass('column_heading');
517     // .eq() is zero-based
518     if (has_big_t) {
519         th_index--;
520     }
521     var $tds = $this_th.closest('table').find('tbody tr').find('td.data:eq('+th_index+')');
522     if (isAddClass == undefined) {
523         $tds.toggleClass(newclass);
524     } else {
525         $tds.toggleClass(newclass, isAddClass);
526     }
529 $(document).ready(function() {
531     $('.browse_foreign').live('click', function(e) {
532         e.preventDefault();
533         window.open(this.href, 'foreigners', 'width=640,height=240,scrollbars=yes,resizable=yes');
534         $anchor = $(this);
535         $anchor.addClass('browse_foreign_clicked');
536         return false;
537     });
539     /**
540      * vertical column highlighting in horizontal mode when hovering over the column header
541      */
542     $('.column_heading.pointer').live('hover', function(e) {
543         PMA_changeClassForColumn($(this), 'hover', e.type == 'mouseenter');
544         });
546     /**
547      * vertical column marking in horizontal mode when clicking the column header
548      */
549     $('.column_heading.marker').live('click', function() {
550         PMA_changeClassForColumn($(this), 'marked');
551         });
553     /**
554      * create resizable table
555      */
556     $("#sqlqueryresults").trigger('makegrid');
560  * Profiling Chart
561  */
562 function makeProfilingChart()
564     if ($('#profilingchart').length == 0) {
565         return;
566     }
568     var data = new Array();
569     $.each(jQuery.parseJSON($('#profilingchart').html()),function(key,value) {
570         data.push([key,parseFloat(value)]);
571     });
573     // Prevent the user from seeing the JSON code
574     $('div#profilingchart').html('').show();
576     PMA_createProfilingChart(data);
580 /**#@- */