1 /* vim: set expandtab sw=4 ts=4 sts=4: */
3 * @fileoverview functions used wherever an sql query form is used
6 * @requires js/functions.js
13 * decode a string URL_encoded
16 * @return string the URL-decoded string
18 function PMA_urldecode(str)
20 return decodeURIComponent(str.replace(/\+/g, '%20'));
23 function PMA_urlencode(str)
25 return encodeURIComponent(str).replace(/\%20/g, '+');
29 * Get the field name for the current field. Required to construct the query
32 * @param $this_field jQuery object that points to the current field's tr
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();
49 field_name = $.trim(field_name);
60 * @description <p>Ajax scripts for sql and browse pages</p>
62 * Actions ajaxified here:
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>
71 * @name document.ready
74 $(document).ready(function() {
75 /* Hides the bookmarkoptions checkboxes when the bookmark label is empty */
76 $('input#bkm_label').keyup(function() {
77 $('input#id_bkm_all_users, input#id_bkm_replace')
79 .toggle($(this).attr('value').length > 0);
83 * Attach the {@link makegrid} function to a custom event, which will be
84 * triggered manually everytime the table of results is reloaded
87 $("#sqlqueryresults").live('makegrid', function() {
88 PMA_makegrid($('#table_results')[0]);
92 * Append the "Show/Hide query box" message to the query input form
95 * @name appendToggleSpan
97 // do not add this link more than once
98 if (! $('#sqlqueryform').find('a').is('#togglequerybox')) {
99 $('<a id="togglequerybox"></a>')
100 .html(PMA_messages['strHideQueryBox'])
101 .appendTo("#sqlqueryform")
102 // initially hidden because at this point, nothing else
103 // appears under the link
106 // Attach the toggling of the query box visibility to a click
107 $("#togglequerybox").bind('click', function() {
109 $link.siblings().slideToggle("fast");
110 if ($link.text() == PMA_messages['strHideQueryBox']) {
111 $link.text(PMA_messages['strShowQueryBox']);
112 // cheap trick to add a spacer between the menu tabs
113 // and "Show query box"; feel free to improve!
114 $('#togglequerybox_spacer').remove();
115 $link.before('<br id="togglequerybox_spacer" />');
117 $link.text(PMA_messages['strHideQueryBox']);
119 // avoid default click action
126 * Event handler for sqlqueryform.ajax button_submit_query
130 $("#button_submit_query").live('click', function(event) {
131 var $form = $(this).closest("form");
132 // the Go button related to query submission was clicked,
133 // instead of the one related to Bookmarks, so empty the
134 // id_bookmark selector to avoid misinterpretation in
135 // import.php about what needs to be done
136 $form.find("select[name=id_bookmark]").attr("value","");
137 // let normal event propagation happen
141 * Ajax Event handler for 'SQL Query Submit'
143 * @see PMA_ajaxShowMessage()
144 * @see $cfg['AjaxEnable']
146 * @name sqlqueryform_submit
148 $("#sqlqueryform.ajax").live('submit', function(event) {
149 event.preventDefault();
152 if (! checkSqlQuery($form[0])) {
156 // remove any div containing a previous error message
157 $('.error').remove();
159 var $msgbox = PMA_ajaxShowMessage();
160 var $sqlqueryresults = $('#sqlqueryresults');
162 PMA_prepareForAjaxRequest($form);
164 $.post($form.attr('action'), $form.serialize() , function(data) {
165 if (data.success == true) {
166 // success happens if the query returns rows or not
168 // fade out previous messages, if any
169 $('.success').fadeOut();
170 $('.sqlquery_message').fadeOut();
171 // show a message that stays on screen
172 if (typeof data.action_bookmark != 'undefined') {
174 if ('1' == data.action_bookmark) {
175 $('#sqlquery').text(data.sql_query);
176 // send to codemirror if possible
177 setQuery(data.sql_query);
180 if ('2' == data.action_bookmark) {
181 $("#id_bookmark option[value='" + data.id_bookmark + "']").remove();
183 $('#sqlqueryform').before(data.message);
184 } else if (typeof data.sql_query != 'undefined') {
185 $('<div class="sqlquery_message"></div>')
186 .html(data.sql_query)
187 .insertBefore('#sqlqueryform');
188 // unnecessary div that came from data.sql_query
189 $('.notice').remove();
191 $('#sqlqueryform').before(data.message);
193 $sqlqueryresults.show();
194 // this happens if a USE command was typed
195 if (typeof data.reload != 'undefined') {
196 // Unbind the submit event before reloading. See bug #3295529
197 $("#sqlqueryform.ajax").die('submit');
198 $form.find('input[name=db]').val(data.db);
199 // need to regenerate the whole upper part
200 $form.find('input[name=ajax_request]').remove();
201 $form.append('<input type="hidden" name="reload" value="true" />');
202 $.post('db_sql.php', $form.serialize(), function(data) {
203 $('body').html(data);
204 }); // end inner post
206 } else if (data.success == false ) {
207 // show an error message that stays on screen
208 $('#sqlqueryform').before(data.error);
209 $sqlqueryresults.hide();
211 // real results are returned
212 // fade out previous messages, if any
213 $('.success').fadeOut();
214 $('.sqlquery_message').fadeOut();
215 var $received_data = $(data);
216 var $zero_row_results = $received_data.find('textarea[name="sql_query"]');
217 // if zero rows are returned from the query execution
218 if ($zero_row_results.length > 0) {
219 $('#sqlquery').val($zero_row_results.val());
220 setQuery($('#sqlquery').val());
225 .trigger('makegrid');
226 $('#togglequerybox').show();
227 if( $('#sqlqueryform input[name="retain_query_box"]').is(':checked') != true ) {
228 if ($("#togglequerybox").siblings(":visible").length > 0) {
229 $("#togglequerybox").trigger('click');
235 PMA_ajaxRemoveMessage($msgbox);
237 }); // end SQL Query submit
240 * Ajax Event handlers for Paginating the results table
244 * Paginate when we click any of the navigation buttons
245 * (only if the element has the ajax class, see $cfg['AjaxEnable'])
247 * @name paginate_nav_button_click
248 * @uses PMA_ajaxShowMessage()
249 * @see $cfg['AjaxEnable']
251 $("input[name=navig].ajax").live('click', function(event) {
253 event.preventDefault();
255 var $msgbox = PMA_ajaxShowMessage();
258 * @var $form Object referring to the form element that paginates the results table
260 var $form = $(this).parent("form");
262 PMA_prepareForAjaxRequest($form);
264 $.post($form.attr('action'), $form.serialize(), function(data) {
265 $("#sqlqueryresults")
267 .trigger('makegrid');
270 PMA_ajaxRemoveMessage($msgbox);
272 }); // end Paginate results table
275 * Paginate results with Page Selector dropdown
277 * @name paginate_dropdown_change
278 * @see $cfg['AjaxEnable']
280 $("#pageselector").live('change', function(event) {
281 var $form = $(this).parent("form");
283 if ($(this).hasClass('ajax')) {
284 event.preventDefault();
286 var $msgbox = PMA_ajaxShowMessage();
288 $.post($form.attr('action'), $form.serialize() + '&ajax_request=true', function(data) {
289 $("#sqlqueryresults")
291 .trigger('makegrid');
293 PMA_ajaxRemoveMessage($msgbox);
299 }); // end Paginate results with Page Selector
302 * Ajax Event handler for sorting the results table
304 * @name table_results_sort_click
305 * @see $cfg['AjaxEnable']
307 $("#table_results.ajax").find("a[title=Sort]").live('click', function(event) {
308 event.preventDefault();
310 var $msgbox = PMA_ajaxShowMessage();
314 $.get($anchor.attr('href'), $anchor.serialize() + '&ajax_request=true', function(data) {
315 $("#sqlqueryresults")
317 .trigger('makegrid');
318 PMA_ajaxRemoveMessage($msgbox);
320 }); //end Sort results table
323 * Ajax Event handler for the display options
325 * @name displayOptionsForm_submit
326 * @see $cfg['AjaxEnable']
328 $("#displayOptionsForm.ajax").live('submit', function(event) {
329 event.preventDefault();
333 $.post($form.attr('action'), $form.serialize() + '&ajax_request=true' , function(data) {
334 $("#sqlqueryresults")
336 .trigger('makegrid');
339 }); //end displayOptionsForm handler
342 * Ajax Event for table row change
344 $("#resultsForm.ajax .mult_submit[value=edit]").live('click', function(event){
345 event.preventDefault();
347 /*Check whether atleast one row is selected for change*/
348 if ($("#table_results tbody tr, #table_results tbody tr td").hasClass("marked")) {
349 var div = $('<div id="change_row_dialog"></div>');
352 * @var button_options Object that stores the options passed to jQueryUI
355 var button_options = {};
356 // in the following function we need to use $(this)
357 button_options[PMA_messages['strCancel']] = function() {$(this).dialog('close').remove();};
359 var button_options_error = {};
360 button_options_error[PMA_messages['strOK']] = function() {$(this).dialog('close').remove();};
361 var $form = $("#resultsForm");
362 var $msgbox = PMA_ajaxShowMessage();
364 $.get( $form.attr('action'), $form.serialize()+"&ajax_request=true&submit_mult=row_edit", function(data) {
365 //in the case of an error, show the error message returned.
366 if (data.success != undefined && data.success == false) {
370 title: PMA_messages['strChangeTbl'],
373 open: PMA_verifyColumnsProperties,
374 close: function(event, ui) {
375 $('#change_row_dialog').remove();
377 buttons : button_options_error
378 }); // end dialog options
383 title: PMA_messages['strChangeTbl'],
386 open: PMA_verifyColumnsProperties,
387 close: function(event, ui) {
388 $('#change_row_dialog').remove();
390 buttons : button_options
392 //Remove the top menu container from the dialog
393 .find("#topmenucontainer").hide()
394 ; // end dialog options
395 $(".insertRowTable").addClass("ajax");
396 $("#buttonYes").addClass("ajax");
398 PMA_ajaxRemoveMessage($msgbox);
401 PMA_ajaxShowMessage(PMA_messages['strNoRowSelected']);
406 * Click action for "Go" button in ajax dialog insertForm -> insertRowTable
408 $("#insertForm .insertRowTable.ajax input[type=submit]").live('click', function(event) {
409 event.preventDefault();
411 * @var the_form object referring to the insert form
413 var $form = $("#insertForm");
414 PMA_prepareForAjaxRequest($form);
415 //User wants to submit the form
416 $.post($form.attr('action'), $form.serialize(), function(data) {
417 if (data.success == true) {
418 PMA_ajaxShowMessage(data.message);
419 if ($("#pageselector").length != 0) {
420 $("#pageselector").trigger('change');
422 $("input[name=navig].ajax").trigger('click');
426 PMA_ajaxShowMessage(data.error, false);
427 $("#table_results tbody tr.marked .multi_checkbox " +
428 ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
429 $("#table_results tbody tr.marked .multi_checkbox " +
430 ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
431 $("#table_results tbody tr" +
432 ", #table_results tbody tr td").removeClass("marked");
434 if ($("#change_row_dialog").length > 0) {
435 $("#change_row_dialog").dialog("close").remove();
437 /**Update the row count at the tableForm*/
438 $("#result_query").remove();
439 $("#sqlqueryresults").prepend(data.sql_query);
440 $("#result_query .notice").remove();
441 $("#result_query").prepend((data.message));
443 }); // end insert table button "Go"
445 /**$("#buttonYes.ajax").live('click'
446 * Click action for #buttonYes button in ajax dialog insertForm
448 $("#buttonYes.ajax").live('click', function(event){
449 event.preventDefault();
451 * @var the_form object referring to the insert form
453 var $form = $("#insertForm");
454 /**Get the submit type and the after insert type in the form*/
455 var selected_submit_type = $("#insertForm").find("#actions_panel .control_at_footer option:selected").attr('value');
456 var selected_after_insert = $("#insertForm").find("#actions_panel select[name=after_insert] option:selected").attr('value');
457 $("#result_query").remove();
458 PMA_prepareForAjaxRequest($form);
459 //User wants to submit the form
460 $.post($form.attr('action'), $form.serialize() , function(data) {
461 if (data.success == true) {
462 PMA_ajaxShowMessage(data.message);
463 if (selected_submit_type == "showinsert") {
464 $("#sqlqueryresults").prepend(data.sql_query);
465 $("#result_query .notice").remove();
466 $("#result_query").prepend(data.message);
467 $("#table_results tbody tr.marked .multi_checkbox " +
468 ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
469 $("#table_results tbody tr.marked .multi_checkbox " +
470 ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
471 $("#table_results tbody tr" +
472 ", #table_results tbody tr td").removeClass("marked");
474 if ($("#pageselector").length != 0) {
475 $("#pageselector").trigger('change');
477 $("input[name=navig].ajax").trigger('click');
479 $("#result_query").remove();
480 $("#sqlqueryresults").prepend(data.sql_query);
481 $("#result_query .notice").remove();
482 $("#result_query").prepend((data.message));
485 PMA_ajaxShowMessage(data.error, false);
486 $("#table_results tbody tr.marked .multi_checkbox " +
487 ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
488 $("#table_results tbody tr.marked .multi_checkbox " +
489 ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
490 $("#table_results tbody tr" +
491 ", #table_results tbody tr td").removeClass("marked");
493 if ($("#change_row_dialog").length > 0) {
494 $("#change_row_dialog").dialog("close").remove();
499 }, 'top.frame_content'); // end $(document).ready()
503 * Starting from some th, change the class of all td under it.
504 * If isAddClass is specified, it will be used to determine whether to add or remove the class.
506 function PMA_changeClassForColumn($this_th, newclass, isAddClass)
508 // index 0 is the th containing the big T
509 var th_index = $this_th.index();
510 var has_big_t = !$this_th.closest('tr').children(':first').hasClass('column_heading');
511 // .eq() is zero-based
515 var $tds = $this_th.closest('table').find('tbody tr').find('td.data:eq('+th_index+')');
516 if (isAddClass == undefined) {
517 $tds.toggleClass(newclass);
519 $tds.toggleClass(newclass, isAddClass);
523 $(document).ready(function() {
525 $('.browse_foreign').live('click', function(e) {
527 window.open(this.href, 'foreigners', 'width=640,height=240,scrollbars=yes,resizable=yes');
529 $anchor.addClass('browse_foreign_clicked');
534 * vertical column highlighting in horizontal mode when hovering over the column header
536 $('.column_heading.pointer').live('hover', function(e) {
537 PMA_changeClassForColumn($(this), 'hover', e.type == 'mouseenter');
541 * vertical column marking in horizontal mode when clicking the column header
543 $('.column_heading.marker').live('click', function() {
544 PMA_changeClassForColumn($(this), 'marked');
548 * create resizable table
550 $("#sqlqueryresults").trigger('makegrid');
556 function makeProfilingChart()
558 if ($('#profilingchart').length == 0) {
562 var data = new Array();
563 $.each(jQuery.parseJSON($('#profilingchart').html()),function(key,value) {
564 data.push([key,parseFloat(value)]);
567 // Prevent the user from seeing the JSON code
568 $('div#profilingchart').html('').show();
570 PMA_createProfilingChart(data);