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() {
77 * Set a parameter for all Ajax queries made on this page. Don't let the
78 * web server serve cached pages
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')
88 .toggle($(this).attr('value').length
> 0);
92 * Attach the {@link makegrid} function to a custom event, which will be
93 * triggered manually everytime the table of results is reloaded
96 $("#sqlqueryresults").live('makegrid', function() {
97 PMA_makegrid($('#table_results')[0]);
101 * Append the "Show/Hide query box" message to the query input form
104 * @name appendToggleSpan
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
115 // Attach the toggling of the query box visibility to a click
116 $("#togglequerybox").bind('click', function() {
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" />');
126 $link
.text(PMA_messages
['strHideQueryBox']);
128 // avoid default click action
134 * Ajax Event handler for 'SQL Query Submit'
136 * @see PMA_ajaxShowMessage()
137 * @see $cfg['AjaxEnable']
139 * @name sqlqueryform_submit
141 $("#sqlqueryform.ajax").live('submit', function(event
) {
142 event
.preventDefault();
145 if (! checkSqlQuery($form
[0])) {
149 // remove any div containing a previous error message
150 $('.error').remove();
152 var $msgbox
= PMA_ajaxShowMessage();
153 var $sqlqueryresults
= $('#sqlqueryresults');
155 PMA_prepareForAjaxRequest($form
);
157 $.post($form
.attr('action'), $form
.serialize() , function(data
) {
158 if (data
.success
== true) {
159 // fade out previous messages, if any
160 $('.success').fadeOut();
161 $('.sqlquery_message').fadeOut();
162 // show a message that stays on screen
163 if (typeof data
.sql_query
!= 'undefined') {
164 $('<div class="sqlquery_message"></div>')
165 .html(data
.sql_query
)
166 .insertBefore('#sqlqueryform');
167 // unnecessary div that came from data.sql_query
168 $('.notice').remove();
170 $('#sqlqueryform').before(data
.message
);
172 $sqlqueryresults
.show();
173 // this happens if a USE command was typed
174 if (typeof data
.reload
!= 'undefined') {
175 // Unbind the submit event before reloading. See bug #3295529
176 $("#sqlqueryform.ajax").die('submit');
177 $form
.find('input[name=db]').val(data
.db
);
178 // need to regenerate the whole upper part
179 $form
.find('input[name=ajax_request]').remove();
180 $form
.append('<input type="hidden" name="reload" value="true" />');
181 $.post('db_sql.php', $form
.serialize(), function(data
) {
182 $('body').html(data
);
183 }); // end inner post
186 else if (data
.success
== false ) {
187 // show an error message that stays on screen
188 $('#sqlqueryform').before(data
.error
);
189 $sqlqueryresults
.hide();
192 // real results are returned
193 // fade out previous messages, if any
194 $('.success').fadeOut();
195 $('.sqlquery_message').fadeOut();
196 var $received_data
= $(data
);
197 var $zero_row_results
= $received_data
.find('textarea[name="sql_query"]');
198 // if zero rows are returned from the query execution
199 if ($zero_row_results
.length
> 0) {
200 $('#sqlquery').val($zero_row_results
.val());
205 .trigger('makegrid');
206 $('#togglequerybox').show();
207 if ($("#togglequerybox").siblings(":visible").length
> 0) {
208 $("#togglequerybox").trigger('click');
213 PMA_ajaxRemoveMessage($msgbox
);
216 }) // end SQL Query submit
219 * Ajax Event handlers for Paginating the results table
223 * Paginate when we click any of the navigation buttons
224 * (only if the element has the ajax class, see $cfg['AjaxEnable'])
226 * @name paginate_nav_button_click
227 * @uses PMA_ajaxShowMessage()
228 * @see $cfg['AjaxEnable']
230 $("input[name=navig].ajax").live('click', function(event
) {
232 event
.preventDefault();
234 var $msgbox
= PMA_ajaxShowMessage();
237 * @var $form Object referring to the form element that paginates the results table
239 var $form
= $(this).parent("form");
241 PMA_prepareForAjaxRequest($form
);
243 $.post($form
.attr('action'), $form
.serialize(), function(data
) {
244 $("#sqlqueryresults")
246 .trigger('makegrid');
249 PMA_ajaxRemoveMessage($msgbox
);
251 })// end Paginate results table
254 * Paginate results with Page Selector dropdown
256 * @name paginate_dropdown_change
257 * @see $cfg['AjaxEnable']
259 $("#pageselector").live('change', function(event
) {
260 var $form
= $(this).parent("form");
262 if ($(this).hasClass('ajax')) {
263 event
.preventDefault();
265 var $msgbox
= PMA_ajaxShowMessage();
267 $.post($form
.attr('action'), $form
.serialize() + '&ajax_request=true', function(data
) {
268 $("#sqlqueryresults")
270 .trigger('makegrid');
272 PMA_ajaxRemoveMessage($msgbox
);
278 })// end Paginate results with Page Selector
281 * Ajax Event handler for sorting the results table
283 * @name table_results_sort_click
284 * @see $cfg['AjaxEnable']
286 $("#table_results.ajax").find("a[title=Sort]").live('click', function(event
) {
287 event
.preventDefault();
289 var $msgbox
= PMA_ajaxShowMessage();
293 $.get($anchor
.attr('href'), $anchor
.serialize() + '&ajax_request=true', function(data
) {
294 $("#sqlqueryresults")
296 .trigger('makegrid');
297 PMA_ajaxRemoveMessage($msgbox
);
299 })//end Sort results table
302 * Ajax Event handler for the display options
304 * @name displayOptionsForm_submit
305 * @see $cfg['AjaxEnable']
307 $("#displayOptionsForm.ajax").live('submit', function(event
) {
308 event
.preventDefault();
312 $.post($form
.attr('action'), $form
.serialize() + '&ajax_request=true' , function(data
) {
313 $("#sqlqueryresults")
315 .trigger('makegrid');
319 //end displayOptionsForm handler
322 * Ajax Event for table row change
324 $("#resultsForm.ajax .mult_submit[value=edit]").live('click', function(event
){
325 event
.preventDefault();
327 /*Check whether atleast one row is selected for change*/
328 if ($("#table_results tbody tr, #table_results tbody tr td").hasClass("marked")) {
329 var div
= $('<div id="change_row_dialog"></div>');
332 * @var button_options Object that stores the options passed to jQueryUI
335 var button_options
= {};
336 // in the following function we need to use $(this)
337 button_options
[PMA_messages
['strCancel']] = function() {$(this).dialog('close').remove();}
339 var button_options_error
= {};
340 button_options_error
[PMA_messages
['strOK']] = function() {$(this).dialog('close').remove();}
341 var $form
= $("#resultsForm");
342 var $msgbox
= PMA_ajaxShowMessage();
344 $.get( $form
.attr('action'), $form
.serialize()+"&ajax_request=true&submit_mult=row_edit", function(data
) {
345 //in the case of an error, show the error message returned.
346 if (data
.success
!= undefined && data
.success
== false) {
350 title
: PMA_messages
['strChangeTbl'],
353 open
: PMA_verifyTypeOfAllColumns
,
354 close: function(event
, ui
) {
355 $('#change_row_dialog').remove();
357 buttons
: button_options_error
358 })// end dialog options
363 title
: PMA_messages
['strChangeTbl'],
366 open
: PMA_verifyTypeOfAllColumns
,
367 close: function(event
, ui
) {
368 $('#change_row_dialog').remove();
370 buttons
: button_options
372 //Remove the top menu container from the dialog
373 .find("#topmenucontainer").hide()
374 ; // end dialog options
375 $(".insertRowTable").addClass("ajax");
376 $("#buttonYes").addClass("ajax");
378 PMA_ajaxRemoveMessage($msgbox
);
381 PMA_ajaxShowMessage(PMA_messages
['strNoRowSelected']);
386 * Click action for "Go" button in ajax dialog insertForm -> insertRowTable
388 $("#insertForm .insertRowTable.ajax input[value=Go]").live('click', function(event
) {
389 event
.preventDefault();
391 * @var the_form object referring to the insert form
393 var $form
= $("#insertForm");
394 PMA_prepareForAjaxRequest($form
);
395 //User wants to submit the form
396 $.post($form
.attr('action'), $form
.serialize(), function(data
) {
397 if (data
.success
== true) {
398 PMA_ajaxShowMessage(data
.message
);
399 if ($("#pageselector").length
!= 0) {
400 $("#pageselector").trigger('change');
402 $("input[name=navig].ajax").trigger('click');
406 PMA_ajaxShowMessage(data
.error
);
407 $("#table_results tbody tr.marked .multi_checkbox " +
408 ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
409 $("#table_results tbody tr.marked .multi_checkbox " +
410 ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
411 $("#table_results tbody tr" +
412 ", #table_results tbody tr td").removeClass("marked");
414 if ($("#change_row_dialog").length
> 0) {
415 $("#change_row_dialog").dialog("close").remove();
417 /**Update the row count at the tableForm*/
418 $("#result_query").remove();
419 $("#sqlqueryresults").prepend(data
.sql_query
);
420 $("#result_query .notice").remove();
421 $("#result_query").prepend((data
.message
));
423 }) // end insert table button "Go"
425 /**$("#buttonYes.ajax").live('click'
426 * Click action for #buttonYes button in ajax dialog insertForm
428 $("#buttonYes.ajax").live('click', function(event
){
429 event
.preventDefault();
431 * @var the_form object referring to the insert form
433 var $form
= $("#insertForm");
434 /**Get the submit type and the after insert type in the form*/
435 var selected_submit_type
= $("#insertForm").find("#actions_panel .control_at_footer option:selected").attr('value');
436 var selected_after_insert
= $("#insertForm").find("#actions_panel select[name=after_insert] option:selected").attr('value');
437 $("#result_query").remove();
438 PMA_prepareForAjaxRequest($form
);
439 //User wants to submit the form
440 $.post($form
.attr('action'), $form
.serialize() , function(data
) {
441 if (data
.success
== true) {
442 PMA_ajaxShowMessage(data
.message
);
443 if (selected_submit_type
== "showinsert") {
444 $("#sqlqueryresults").prepend(data
.sql_query
);
445 $("#result_query .notice").remove();
446 $("#result_query").prepend(data
.message
);
447 $("#table_results tbody tr.marked .multi_checkbox " +
448 ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
449 $("#table_results tbody tr.marked .multi_checkbox " +
450 ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
451 $("#table_results tbody tr" +
452 ", #table_results tbody tr td").removeClass("marked");
454 if ($("#pageselector").length
!= 0) {
455 $("#pageselector").trigger('change');
457 $("input[name=navig].ajax").trigger('click');
459 $("#result_query").remove();
460 $("#sqlqueryresults").prepend(data
.sql_query
);
461 $("#result_query .notice").remove();
462 $("#result_query").prepend((data
.message
));
465 PMA_ajaxShowMessage(data
.error
);
466 $("#table_results tbody tr.marked .multi_checkbox " +
467 ", #table_results tbody tr td.marked .multi_checkbox").prop("checked", false);
468 $("#table_results tbody tr.marked .multi_checkbox " +
469 ", #table_results tbody tr td.marked .multi_checkbox").removeClass("last_clicked");
470 $("#table_results tbody tr" +
471 ", #table_results tbody tr td").removeClass("marked");
473 if ($("#change_row_dialog").length
> 0) {
474 $("#change_row_dialog").dialog("close").remove();
479 }, 'top.frame_content') // end $(document).ready()
483 * Starting from some th, change the class of all td under it.
484 * If isAddClass is specified, it will be used to determine whether to add or remove the class.
486 function PMA_changeClassForColumn($this_th
, newclass
, isAddClass
)
488 // index 0 is the th containing the big T
489 var th_index
= $this_th
.index();
490 var has_big_t
= !$this_th
.closest('tr').children(':first').hasClass('column_heading');
491 // .eq() is zero-based
495 var $tds
= $this_th
.closest('table').find('tbody tr').find('td.data:eq('+th_index
+')');
496 if (isAddClass
== undefined) {
497 $tds
.toggleClass(newclass
);
499 $tds
.toggleClass(newclass
, isAddClass
);
503 $(document
).ready(function() {
505 $('.browse_foreign').live('click', function(e
) {
507 window
.open(this.href
, 'foreigners', 'width=640,height=240,scrollbars=yes,resizable=yes');
509 $anchor
.addClass('browse_foreign_clicked');
514 * vertical column highlighting in horizontal mode when hovering over the column header
516 $('.column_heading.pointer').live('hover', function(e
) {
517 PMA_changeClassForColumn($(this), 'hover', e
.type
== 'mouseenter');
521 * vertical column marking in horizontal mode when clicking the column header
523 $('.column_heading.marker').live('click', function() {
524 PMA_changeClassForColumn($(this), 'marked');
528 * create resizable table
530 $("#sqlqueryresults").trigger('makegrid');
536 function makeProfilingChart()
538 if ($('#profilingchart').length
== 0) {
542 var data
= new Array();
543 $.each(jQuery
.parseJSON($('#profilingchart').html()),function(key
,value
) {
544 data
.push([key
,parseFloat(value
)]);
547 // Prevent the user from seeing the JSON code
548 $('div#profilingchart').html('').show();
550 PMA_createProfilingChart(data
);