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
14 * decode a string URL_encoded
17 * @return string the URL-decoded string
19 function PMA_urldecode(str)
21 if (typeof str !== 'undefined') {
22 return decodeURIComponent(str.replace(/\+/g, '%20'));
27 * endecode a string URL_decoded
30 * @return string the URL-encoded string
32 function PMA_urlencode(str)
34 if (typeof str !== 'undefined') {
35 return encodeURIComponent(str).replace(/\%20/g, '+');
40 * Get the field name for the current field. Required to construct the query
43 * @param $table_results enclosing results table
44 * @param $this_field jQuery object that points to the current field's tr
46 function getFieldName($table_results, $this_field)
49 var this_field_index = $this_field.index();
50 // ltr or rtl direction does not impact how the DOM was generated
51 // check if the action column in the left exist
52 var left_action_exist = !$table_results.find('th:first').hasClass('draggable');
53 // number of column span for checkbox and Actions
54 var left_action_skip = left_action_exist ? $table_results.find('th:first').attr('colspan') - 1 : 0;
56 // If this column was sorted, the text of the a element contains something
57 // like <small>1</small> that is useful to indicate the order in case
58 // of a sort on multiple columns; however, we dont want this as part
59 // of the column name so we strip it ( .clone() to .end() )
60 var field_name = $table_results
62 .find('th:eq(' + (this_field_index - left_action_skip) + ') a')
63 .clone() // clone the element
64 .children() // select all the children
65 .remove() // remove all of them
66 .end() // go back to the selected element
67 .text(); // grab the text
68 // happens when just one row (headings contain no a)
69 if (field_name === '') {
70 var $heading = $table_results.find('thead').find('th:eq(' + (this_field_index - left_action_skip) + ')').children('span');
71 // may contain column comment enclosed in a span - detach it temporarily to read the column name
72 var $tempColComment = $heading.children().detach();
73 field_name = $heading.text();
74 // re-attach the column comment
75 $heading.append($tempColComment);
78 field_name = $.trim(field_name);
84 * Unbind all event handlers before tearing down a page
86 AJAX.registerTeardown('sql.js', function () {
87 $(document).off('click', 'a.delete_row.ajax');
88 $(document).off('submit', '.bookmarkQueryForm');
89 $('input#bkm_label').unbind('keyup');
90 $(document).off('makegrid', ".sqlqueryresults");
91 $(document).off('stickycolumns', ".sqlqueryresults");
92 $("#togglequerybox").unbind('click');
93 $(document).off('click', "#button_submit_query");
94 $("input[name=bookmark_variable]").unbind("keypress");
95 $(document).off('submit', "#sqlqueryform.ajax");
96 $(document).off('click', "input[name=navig].ajax");
97 $(document).off('submit', "form[name='displayOptionsForm'].ajax");
98 $(document).off('mouseenter', 'th.column_heading.pointer');
99 $(document).off('mouseleave', 'th.column_heading.pointer');
100 $(document).off('click', 'th.column_heading.marker');
101 $(window).unbind('scroll');
102 $(document).off("keyup", ".filter_rows");
103 if (codemirror_editor) {
104 codemirror_editor.off('change');
106 $('#sqlquery').off('input propertychange');
108 $('body').off('click', '.navigation .showAllRows');
109 $('body').off('click','a.browse_foreign');
110 $('body').off('click', '#simulate_dml');
111 $('body').off('keyup', '#sqlqueryform');
112 $('body').off('click', 'form[name="resultsForm"].ajax button[name="submit_mult"], form[name="resultsForm"].ajax input[name="submit_mult"]');
116 * @description <p>Ajax scripts for sql and browse pages</p>
118 * Actions ajaxified here:
120 * <li>Retrieve results of an SQL query</li>
121 * <li>Paginate the results table</li>
122 * <li>Sort the results table</li>
123 * <li>Change table according to display options</li>
124 * <li>Grid editing of data</li>
125 * <li>Saving a bookmark</li>
128 * @name document.ready
131 AJAX.registerOnload('sql.js', function () {
134 if (codemirror_editor) {
135 codemirror_editor.on('change', function () {
136 var query = codemirror_editor.getValue();
138 $.cookie('auto_saved_sql', query);
142 $('#sqlquery').on('input propertychange', function () {
143 var query = $('#sqlquery').val();
145 $.cookie('auto_saved_sql', query);
151 // Delete row from SQL results
152 $(document).on('click', 'a.delete_row.ajax', function (e) {
154 var question = PMA_sprintf(PMA_messages.strDoYouReally, escapeHtml($(this).closest('td').find('div').text()));
156 $link.PMA_confirm(question, $link.attr('href'), function (url) {
157 $msgbox = PMA_ajaxShowMessage();
158 $.get(url, {'ajax_request': true, 'is_js_confirmed': true}, function (data) {
160 PMA_ajaxShowMessage(data.message);
161 $link.closest('tr').remove();
163 PMA_ajaxShowMessage(data.error, false);
169 // Ajaxification for 'Bookmark this SQL query'
170 $(document).on('submit', '.bookmarkQueryForm', function (e) {
172 PMA_ajaxShowMessage();
173 $.post($(this).attr('action'), 'ajax_request=1&' + $(this).serialize(), function (data) {
175 PMA_ajaxShowMessage(data.message);
177 PMA_ajaxShowMessage(data.error, false);
182 /* Hides the bookmarkoptions checkboxes when the bookmark label is empty */
183 $('input#bkm_label').keyup(function () {
184 $('input#id_bkm_all_users, input#id_bkm_replace')
186 .toggle($(this).val().length > 0);
190 * Attach the {@link makegrid} function to a custom event, which will be
191 * triggered manually everytime the table of results is reloaded
194 $(document).on('makegrid', ".sqlqueryresults", function () {
195 $('.table_results').each(function () {
201 * Attach a custom event for sticky column headings which will be
202 * triggered manually everytime the table of results is reloaded
205 $(document).on('stickycolumns', ".sqlqueryresults", function () {
206 $(".sticky_columns").remove();
207 $(".table_results").each(function () {
208 var $table_results = $(this);
209 //add sticky columns div
210 var $stick_columns = initStickyColumns($table_results);
211 rearrangeStickyColumns($stick_columns, $table_results);
212 //adjust sticky columns on scroll
213 $(window).bind('scroll', function() {
214 handleStickyColumns($stick_columns, $table_results);
220 * Append the "Show/Hide query box" message to the query input form
223 * @name appendToggleSpan
225 // do not add this link more than once
226 if (! $('#sqlqueryform').find('a').is('#togglequerybox')) {
227 $('<a id="togglequerybox"></a>')
228 .html(PMA_messages.strHideQueryBox)
229 .appendTo("#sqlqueryform")
230 // initially hidden because at this point, nothing else
231 // appears under the link
234 // Attach the toggling of the query box visibility to a click
235 $("#togglequerybox").bind('click', function () {
237 $link.siblings().slideToggle("fast");
238 if ($link.text() == PMA_messages.strHideQueryBox) {
239 $link.text(PMA_messages.strShowQueryBox);
240 // cheap trick to add a spacer between the menu tabs
241 // and "Show query box"; feel free to improve!
242 $('#togglequerybox_spacer').remove();
243 $link.before('<br id="togglequerybox_spacer" />');
245 $link.text(PMA_messages.strHideQueryBox);
247 // avoid default click action
254 * Event handler for sqlqueryform.ajax button_submit_query
258 $(document).on('click', "#button_submit_query", function (event) {
259 $(".success,.error").hide();
260 //hide already existing error or success message
261 var $form = $(this).closest("form");
262 // the Go button related to query submission was clicked,
263 // instead of the one related to Bookmarks, so empty the
264 // id_bookmark selector to avoid misinterpretation in
265 // import.php about what needs to be done
266 $form.find("select[name=id_bookmark]").val("");
267 // let normal event propagation happen
271 * Event handler for hitting enter on sqlqueryform bookmark_variable
272 * (the Variable textfield in Bookmarked SQL query section)
276 $("input[name=bookmark_variable]").bind("keypress", function (event) {
277 // force the 'Enter Key' to implicitly click the #button_submit_bookmark
278 var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
279 if (keycode == 13) { // keycode for enter key
280 // When you press enter in the sqlqueryform, which
281 // has 2 submit buttons, the default is to run the
282 // #button_submit_query, because of the tabindex
284 // This submits #button_submit_bookmark instead,
285 // because when you are in the Bookmarked SQL query
286 // section and hit enter, you expect it to do the
287 // same action as the Go button in that section.
288 $("#button_submit_bookmark").click();
296 * Ajax Event handler for 'SQL Query Submit'
298 * @see PMA_ajaxShowMessage()
300 * @name sqlqueryform_submit
302 $(document).on('submit', "#sqlqueryform.ajax", function (event) {
303 event.preventDefault();
306 if (codemirror_editor) {
307 $form[0].elements.sql_query.value = codemirror_editor.getValue();
309 if (! checkSqlQuery($form[0])) {
313 // remove any div containing a previous error message
314 $('div.error').remove();
316 var $msgbox = PMA_ajaxShowMessage();
317 var $sqlqueryresultsouter = $('#sqlqueryresultsouter');
319 PMA_prepareForAjaxRequest($form);
321 $.post($form.attr('action'), $form.serialize() + '&ajax_page_request=true', function (data) {
322 if (typeof data !== 'undefined' && data.success === true) {
323 // success happens if the query returns rows or not
325 // show a message that stays on screen
326 if (typeof data.action_bookmark != 'undefined') {
328 if ('1' == data.action_bookmark) {
329 $('#sqlquery').text(data.sql_query);
330 // send to codemirror if possible
331 setQuery(data.sql_query);
334 if ('2' == data.action_bookmark) {
335 $("#id_bookmark option[value='" + data.id_bookmark + "']").remove();
336 // if there are no bookmarked queries now (only the empty option),
337 // remove the bookmark section
338 if ($('#id_bookmark option').length == 1) {
339 $('#fieldsetBookmarkOptions').hide();
340 $('#fieldsetBookmarkOptionsFooter').hide();
344 $sqlqueryresultsouter
347 PMA_highlightSQL($sqlqueryresultsouter);
350 AJAX.cache.menus.replace(data._menu);
351 AJAX.cache.menus.add(data._menuHash, data._menu);
352 } else if (data._menuHash) {
353 AJAX.cache.menus.replace(AJAX.cache.menus.get(data._menuHash));
357 PMA_commonParams.setAll(data._params);
360 if (typeof data.ajax_reload != 'undefined') {
361 if (data.ajax_reload.reload) {
362 if (data.ajax_reload.table_name) {
363 PMA_commonParams.set('table', data.ajax_reload.table_name);
364 PMA_commonActions.refreshMain();
366 PMA_reloadNavigation();
369 } else if (typeof data.reload != 'undefined') {
370 // this happens if a USE or DROP command was typed
371 PMA_commonActions.setDb(data.db);
375 url = 'table_sql.php';
380 url = 'server_sql.php';
382 PMA_commonActions.refreshMain(url, function () {
383 $('#sqlqueryresultsouter')
386 PMA_highlightSQL($('#sqlqueryresultsouter'));
390 $('.sqlqueryresults').trigger('makegrid').trigger('stickycolumns');
391 $('#togglequerybox').show();
394 if (typeof data.action_bookmark == 'undefined') {
395 if ($('#sqlqueryform input[name="retain_query_box"]').is(':checked') !== true) {
396 if ($("#togglequerybox").siblings(":visible").length > 0) {
397 $("#togglequerybox").trigger('click');
401 } else if (typeof data !== 'undefined' && data.success === false) {
402 // show an error message that stays on screen
403 $sqlqueryresultsouter
407 PMA_ajaxRemoveMessage($msgbox);
409 }); // end SQL Query submit
412 * Ajax Event handler for the display options
414 * @name displayOptionsForm_submit
416 $(document).on('submit', "form[name='displayOptionsForm'].ajax", function (event) {
417 event.preventDefault();
421 var $msgbox = PMA_ajaxShowMessage();
422 $.post($form.attr('action'), $form.serialize() + '&ajax_request=true', function (data) {
423 PMA_ajaxRemoveMessage($msgbox);
424 var $sqlqueryresults = $form.parents(".sqlqueryresults");
428 .trigger('stickycolumns');
430 PMA_highlightSQL($sqlqueryresults);
432 }); //end displayOptionsForm handler
434 // Filter row handling. --STARTS--
435 $(document).on("keyup", ".filter_rows", function () {
436 var unique_id = $(this).data("for");
437 var $target_table = $(".table_results[data-uniqueId='" + unique_id + "']");
438 var $header_cells = $target_table.find("th[data-column]");
439 var target_columns = Array();
440 // To handle colspan=4, in case of edit,copy etc options.
441 var dummy_th = ($(".edit_row_anchor").length !== 0 ?
442 '<th class="hide dummy_th"></th><th class="hide dummy_th"></th><th class="hide dummy_th"></th>'
444 // Selecting columns that will be considered for filtering and searching.
445 $header_cells.each(function () {
446 target_columns.push($.trim($(this).text()));
449 var phrase = $(this).val();
450 // Set same value to both Filter rows fields.
451 $(".filter_rows[data-for='" + unique_id + "']").not(this).val(phrase);
453 $target_table.find("thead > tr").prepend(dummy_th);
454 $.uiTableFilter($target_table, phrase, target_columns);
455 $target_table.find("th.dummy_th").remove();
457 // Filter row handling. --ENDS--
459 // Prompt to confirm on Show All
460 $('body').on('click', '.navigation .showAllRows', function (e) {
462 $form = $(this).parents('form');
464 if (! $(this).is(':checked')) { // already showing all rows
467 $form.PMA_confirm(PMA_messages.strShowAllRowsWarning, $form.attr('action'), function (url) {
472 function submitShowAllForm() {
473 var submitData = $form.serialize() + '&ajax_request=true&ajax_page_request=true';
474 PMA_ajaxShowMessage();
475 $.post($form.attr('action'), submitData, AJAX.responseHandler);
479 $('body').on('keyup', '#sqlqueryform', function () {
480 PMA_handleSimulateQueryButton();
484 * Ajax event handler for 'Simulate DML'.
486 $('body').on('click', '#simulate_dml', function () {
487 var $form = $('#sqlqueryform');
489 var delimiter = $('#id_sql_delimiter').val();
490 var db_name = $form.find('input[name="db"]').val();
492 if (codemirror_editor) {
493 query = codemirror_editor.getValue();
495 query = $('#sqlquery').val();
498 if (query.length === 0) {
499 alert(PMA_messages.strFormEmpty);
500 $('#sqlquery').focus();
504 var $msgbox = PMA_ajaxShowMessage();
507 url: $form.attr('action'),
509 token: $form.find('input[name="token"]').val(),
514 sql_delimiter: delimiter
516 success: function (response) {
517 PMA_ajaxRemoveMessage($msgbox);
518 if (response.success) {
519 var dialog_content = '<div class="preview_sql">';
520 if (response.sql_data) {
521 var len = response.sql_data.length;
522 for (var i=0; i<len; i++) {
523 dialog_content += '<strong>' + PMA_messages.strSQLQuery +
524 '</strong>' + response.sql_data[i].sql_query +
525 PMA_messages.strMatchedRows +
526 ' <a href="' + response.sql_data[i].matched_rows_url +
527 '">' + response.sql_data[i].matched_rows + '</a><br>';
529 dialog_content += '<hr>';
533 dialog_content += response.message;
535 dialog_content += '</div>';
536 $dialog_content = $(dialog_content);
537 var button_options = {};
538 button_options[PMA_messages.strClose] = function () {
539 $(this).dialog('close');
541 var $response_dialog = $('<div />').append($dialog_content).dialog({
545 buttons: button_options,
546 title: PMA_messages.strSimulateDML,
548 PMA_highlightSQL($(this));
555 PMA_ajaxShowMessage(response.error);
558 error: function (response) {
559 PMA_ajaxShowMessage(PMA_messages.strErrorProcessingRequest);
565 * Handles multi submits of results browsing page such as edit, delete and export
567 $('body').on('click', 'form[name="resultsForm"].ajax button[name="submit_mult"], form[name="resultsForm"].ajax input[name="submit_mult"]', function (e) {
569 var $button = $(this);
570 var $form = $button.parent('form');
571 var submitData = $form.serialize() + '&ajax_request=true&ajax_page_request=true&submit_mult=' + $button.val();
572 PMA_ajaxShowMessage();
573 $.post($form.attr('action'), submitData, AJAX.responseHandler);
578 * Starting from some th, change the class of all td under it.
579 * If isAddClass is specified, it will be used to determine whether to add or remove the class.
581 function PMA_changeClassForColumn($this_th, newclass, isAddClass)
583 // index 0 is the th containing the big T
584 var th_index = $this_th.index();
585 var has_big_t = $this_th.closest('tr').children(':first').hasClass('column_action');
586 // .eq() is zero-based
590 var $tds = $this_th.parents(".table_results").find('tbody tr').find('td.data:eq(' + th_index + ')');
591 if (isAddClass === undefined) {
592 $tds.toggleClass(newclass);
594 $tds.toggleClass(newclass, isAddClass);
599 * Handles browse foreign values modal dialog
601 * @param object $this_a reference to the browse foreign value link
603 function browseForeignDialog($this_a)
605 var formId = '#browse_foreign_form';
606 var showAllId = '#foreign_showAll';
607 var tableId = '#browse_foreign_table';
608 var filterId = '#input_foreign_filter';
610 $.get($this_a.attr('href'), {'ajax_request': true}, function (data) {
611 // Creates browse foreign value dialog
612 $dialog = $('<div>').append(data.message).dialog({
613 title: PMA_messages.strBrowseForeignValues,
614 width: Math.min($(window).width() - 100, 700),
615 dialogClass: 'browse_foreign_modal',
616 close: function (ev, ui) {
617 // remove event handlers attached to elements related to dialog
618 $(tableId).off('click', 'td a.foreign_value');
619 $(formId).off('click', showAllId);
620 $(formId).off('submit');
621 // remove dialog itself
624 create: function () {
625 $(this).css('maxHeight', $(window).height() - 100);
629 }).done(function () {
631 $(tableId).on('click', 'td a.foreign_value', function () {
632 var $input = $this_a.prev('input[type=text]');
633 // Check if input exists or get CEdit edit_box
634 if ($input.length === 0 ) {
635 $input = $this_a.closest('.edit_area').prev('.edit_box');
637 // Set selected value as input value
638 $input.val($(this).data('key'));
639 $dialog.dialog('close');
641 $(formId).on('click', showAllId, function () {
644 $(formId).on('submit', function (e) {
646 // if filter value is not equal to old value
647 // then reset page number to 1
648 if ($(filterId).val() != $(filterId).data('old')) {
649 $(formId).find('select[name=pos]').val('0');
651 var postParams = $(this).serializeArray();
652 // if showAll button was clicked to submit form then
653 // add showAll button parameter to form
656 name: $(showAllId).attr('name'),
657 value: $(showAllId).val()
660 // updates values in dialog
661 $.post($(this).attr('action') + '?ajax_request=1', postParams, function (data) {
662 var $obj = $('<div>').html(data.message);
663 $(formId).html($obj.find(formId).html());
664 $(tableId).html($obj.find(tableId).html());
671 AJAX.registerOnload('sql.js', function () {
672 $('body').on('click', 'a.browse_foreign', function (e) {
674 browseForeignDialog($(this));
678 * vertical column highlighting in horizontal mode when hovering over the column header
680 $(document).on('mouseenter', 'th.column_heading.pointer', function (e) {
681 PMA_changeClassForColumn($(this), 'hover', true);
683 $(document).on('mouseleave', 'th.column_heading.pointer', function (e) {
684 PMA_changeClassForColumn($(this), 'hover', false);
688 * vertical column marking in horizontal mode when clicking the column header
690 $(document).on('click', 'th.column_heading.marker', function () {
691 PMA_changeClassForColumn($(this), 'marked');
695 * create resizable table
697 $(".sqlqueryresults").trigger('makegrid').trigger('stickycolumns');
703 function makeProfilingChart()
705 if ($('#profilingchart').length === 0 ||
706 $('#profilingchart').html().length !== 0 ||
707 !$.jqplot || !$.jqplot.Highlighter || !$.jqplot.PieRenderer
713 $.each(jQuery.parseJSON($('#profilingChartData').html()), function (key, value) {
714 data.push([key, parseFloat(value)]);
717 // Remove chart and data divs contents
718 $('#profilingchart').html('').show();
719 $('#profilingChartData').html('');
721 PMA_createProfilingChartJqplot('profilingchart', data);
725 * initialize profiling data tables
727 function initProfilingTables()
729 if (!$.tablesorter) {
733 $('#profiletable').tablesorter({
736 textExtraction: function (node) {
737 if (node.children.length > 0) {
738 return node.children[0].innerHTML;
740 return node.innerHTML;
745 $('#profilesummarytable').tablesorter({
748 textExtraction: function (node) {
749 if (node.children.length > 0) {
750 return node.children[0].innerHTML;
752 return node.innerHTML;
759 * Set position, left, top, width of sticky_columns div
761 function setStickyColumnsPosition($sticky_columns, $table_results, position, top, left, margin_left) {
763 .css("position", position)
765 .css("left", left ? left : "auto")
766 .css("margin-left", margin_left ? margin_left : "0px")
767 .css("width", $table_results.width());
771 * Initialize sticky columns
773 function initStickyColumns($table_results) {
774 var $sticky_columns = $('<table class="sticky_columns"></table>')
775 .insertBefore($table_results)
776 .css("position", "fixed")
777 .css("z-index", "99")
778 .css("width", $table_results.width())
779 .css("margin-left", $('#page_content').css("margin-left"))
780 .css("top", $('#floating_menubar').height())
781 .css("display", "none");
782 return $sticky_columns;
786 * Arrange/Rearrange columns in sticky header
788 function rearrangeStickyColumns($sticky_columns, $table_results) {
789 var $originalHeader = $table_results.find("thead");
790 var $originalColumns = $originalHeader.find("tr:first").children();
791 var $clonedHeader = $originalHeader.clone();
792 // clone width per cell
793 $clonedHeader.find("tr:first").children().width(function(i,val) {
794 var width = $originalColumns.eq(i).width();
795 var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
801 $sticky_columns.empty().append($clonedHeader);
805 * Adjust sticky columns on horizontal/vertical scroll for all tables
807 function handleAllStickyColumns() {
808 $('.sticky_columns').each(function () {
809 handleStickyColumns($(this), $(this).next('.table_results'));
814 * Adjust sticky columns on horizontal/vertical scroll
816 function handleStickyColumns($sticky_columns, $table_results) {
817 var currentScrollX = $(window).scrollLeft();
818 var windowOffset = $(window).scrollTop();
819 var tableStartOffset = $table_results.offset().top;
820 var tableEndOffset = tableStartOffset + $table_results.height();
821 if (windowOffset >= tableStartOffset && windowOffset <= tableEndOffset) {
822 //for horizontal scrolling
823 if(prevScrollX != currentScrollX) {
824 prevScrollX = currentScrollX;
825 setStickyColumnsPosition($sticky_columns, $table_results, "absolute", $('#floating_menubar').height() + windowOffset - tableStartOffset);
826 //for vertical scrolling
828 setStickyColumnsPosition($sticky_columns, $table_results, "fixed", $('#floating_menubar').height(), $("#pma_navigation").width() - currentScrollX, $('#page_content').css("margin-left"));
830 $sticky_columns.show();
832 $sticky_columns.hide();
836 AJAX.registerOnload('sql.js', function () {
837 makeProfilingChart();
838 initProfilingTables();