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
12 * Get the field name for the current field. Required to construct the query
15 * @param this_field_obj jQuery object that points to the current field's tr
16 * @param disp_mode string
18 function getFieldName(this_field_obj, disp_mode) {
20 if(disp_mode == 'vertical') {
21 var field_name = $(this_field_obj).siblings('th').find('a').text();
24 var this_field_index = $(this_field_obj).index();
25 if(window.parent.text_dir == 'ltr') {
26 // 4 columns to account for the checkbox, edit, delete and appended inline edit anchors
27 var field_name = $(this_field_obj).parents('table').find('thead').find('th:nth('+ (this_field_index-4 )+') a').text();
30 var field_name = $(this_field_obj).parents('table').find('thead').find('th:nth('+ this_field_index+') a').text();
34 field_name = $.trim(field_name);
40 * The function that iterates over each row in the table_results and appends a
41 * new inline edit anchor to each table row.
43 * @param disp_mode string
45 function appendInlineAnchor(disp_mode) {
46 if(disp_mode == 'vertical') {
47 var cloned_row = $('.edit_row_anchor').removeClass('edit_row_anchor').parent('tr').clone();
49 var img_object = $(cloned_row).find('img:first').attr('title', PMA_messages['strInlineEdit']);
51 $(cloned_row).find('td').addClass('edit_row_anchor')
52 .find('a').attr('href', '#')
54 .text(PMA_messages['strInlineEdit'])
57 $(cloned_row).insertBefore($('.where_clause').parent('tr'));
59 $("#table_results").find('tr:first').find('th')
60 .attr('rowspan', '4');
63 $('.edit_row_anchor').each(function() {
65 $(this).removeClass('edit_row_anchor');
67 var cloned_anchor = $(this).clone();
69 var img_object = $(cloned_anchor).find('img').attr('title', PMA_messages['strInlineEdit']);
71 $(cloned_anchor).addClass('edit_row_anchor')
72 .find('a').attr('href', '#')
74 .text(PMA_messages['strInlineEdit'])
77 $(this).siblings('.where_clause')
78 .before(cloned_anchor);
81 $('#rowsDeleteForm').find('thead').find('th').each(function() {
82 if($(this).attr('colspan') == 3) {
83 $(this).attr('colspan', '4')
94 * @description <p>Ajax scripts for sql and browse pages</p>
96 * Actions ajaxified here:
98 * <li>Retrieve results of an SQL query</li>
99 * <li>Paginate the results table</li>
100 * <li>Sort the results table</li>
101 * <li>Change table according to display options</li>
102 * <li>Inline editing of data</li>
105 * @name document.ready
108 $(document).ready(function() {
112 * current value of the direction in which the table is displayed
117 var disp_mode = $("#top_direction_dropdown").val();
120 * Update value of {@link jQuery.disp_mode} everytime the direction dropdown changes value
122 * @name direction_dropdown_change
124 $("#top_direction_dropdown, #bottom_direction_dropdown").live('change', function(event) {
125 disp_mode = $(this).val();
129 * Attach the {@link appendInlineAnchor} function to a custom event, which
130 * will be triggered manually everytime the table of results is reloaded
132 * @name sqlqueryresults_live
134 $("#sqlqueryresults").live('appendAnchor',function() {
135 appendInlineAnchor(disp_mode);
139 * Trigger the appendAnchor event to prepare the first table for inline edit
142 * @name sqlqueryresults_trigger
144 $("#sqlqueryresults").trigger('appendAnchor');
147 * Append the Toggle Query Box message to the query input form
150 * @name appendToggleSpan
152 $('<span id="togglequerybox"></span>')
153 .html(PMA_messages['strToggleQueryBox'])
154 .appendTo("#sqlqueryform");
156 // Attach the toggling of the query box visibility to a click
157 $("#togglequerybox").live('click', function() {
158 $(this).siblings().slideToggle("medium");
162 * Ajax Event handler for 'SQL Query Submit'
164 * @see PMA_ajaxShowMessage()
166 * @name sqlqueryform_submit
168 $("#sqlqueryform").live('submit', function(event) {
169 event.preventDefault();
171 PMA_ajaxShowMessage();
173 $(this).append('<input type="hidden" name="ajax_request" value="true" />');
175 $.post($(this).attr('action'), $(this).serialize() , function(data) {
176 if(data.success == true) {
177 PMA_ajaxShowMessage(data.message);
179 else if (data.success == false ) {
180 PMA_ajaxShowMessage(data.error);
183 $("#sqlqueryresults").html(data);
184 $("#sqlqueryresults").trigger('appendAnchor');
185 if($("#togglequerybox").siblings(":visible").length > 0) {
186 $("#togglequerybox").trigger('click');
190 }) // end SQL Query submit
193 * Ajax Event handlers for Paginating the results table
197 * Paginate when we click any of the navigation buttons
199 * @name paginate_nav_button_click
200 * @uses PMA_ajaxShowMessage()
202 $("input[name=navig]").live('click', function(event) {
204 event.preventDefault();
206 PMA_ajaxShowMessage();
209 * @var the_form Object referring to the form element that paginates the results table
211 var the_form = $(this).parent("form");
213 $(the_form).append('<input type="hidden" name="ajax_request" value="true" />');
215 $.post($(the_form).attr('action'), $(the_form).serialize(), function(data) {
216 $("#sqlqueryresults").html(data);
217 $("#sqlqueryresults").trigger('appendAnchor');
219 })// end Paginate results table
222 * Paginate results with Page Selector dropdown
224 * @name paginate_dropdown_change
226 $("#pageselector").live('change', function(event) {
227 event.preventDefault();
229 PMA_ajaxShowMessage();
231 $.get($(this).attr('href'), $(this).serialize() + '&ajax_request=true', function(data) {
232 $("#sqlqueryresults").html(data);
233 $("#sqlqueryresults").trigger('appendAnchor');
235 })// end Paginate results with Page Selector
238 * Ajax Event handler for sorting the results table
240 * @name table_results_sort_click
242 $("#table_results").find("a[title=Sort]").live('click', function(event) {
243 event.preventDefault();
245 PMA_ajaxShowMessage();
247 $.get($(this).attr('href'), $(this).serialize() + '&ajax_request=true', function(data) {
248 $("#sqlqueryresults").html(data);
249 $("#sqlqueryresults").trigger('appendAnchor');
251 })//end Sort results table
254 * Ajax Event handler for the display options
256 * @name displayOptionsForm_submit
258 $("#displayOptionsForm").live('submit', function(event) {
259 event.preventDefault();
261 $.post($(this).attr('action'), $(this).serialize() + '&ajax_request=true' , function(data) {
262 $("#sqlqueryresults").html(data);
263 $("#sqlqueryresults").trigger('appendAnchor');
266 //end displayOptionsForm handler
269 * Ajax Event handlers for Inline Editing
273 * On click, replace the current field with an input/textarea
275 * @name inline_edit_start
276 * @see PMA_ajaxShowMessage()
277 * @see getFieldName()
279 $(".edit_row_anchor").live('click', function(event) {
281 event.preventDefault();
283 $(this).removeClass('edit_row_anchor').addClass('edit_row_anchor_active');
285 // Initialize some variables
286 if(disp_mode == 'vertical') {
288 * @var this_row_index Index of the current <td> in the parent <tr>
289 * Current <td> is the inline edit anchor.
291 var this_row_index = $(this).index();
293 * @var input_siblings Object referring to all inline editable events from same row
295 var input_siblings = $(this).parents('tbody').find('tr').find('.data_inline_edit:nth('+this_row_index+')');
297 * @var where_clause String containing the WHERE clause to select this row
299 var where_clause = $(this).parents('tbody').find('tr').find('.where_clause:nth('+this_row_index+')').val();
302 var input_siblings = $(this).parent('tr').find('.data_inline_edit');
303 var where_clause = $(this).parent('tr').find('.where_clause').val();
306 $(input_siblings).each(function() {
309 * @var data_value Current value of this field
311 var data_value = $(this).html();
313 // We need to retrieve the value from the server for truncated/relation fields
314 // Find the field name
317 * @var this_field Object referring to this field (<td>)
319 var this_field = $(this);
321 * @var field_name String containing the name of this field.
322 * @see getFieldName()
324 var field_name = getFieldName($(this), disp_mode);
326 // In each input sibling, wrap the current value in a textarea
327 // and store the current value in a hidden span
328 if($(this).is(':not(.truncated, .transformed, .relation, .enum, .null)')) {
329 // handle non-truncated, non-transformed, non-relation values
330 // We don't need to get any more data, just wrap the value
331 $(this).html('<textarea>'+data_value+'</textarea>')
332 .append('<span class="original_data">'+data_value+'</span>');
333 $(".original_data").hide();
335 else if($(this).is('.truncated, .transformed')) {
337 //handle truncated/transformed values values
340 * @var sql_query String containing the SQL query used to retrieve value of truncated/transformed data
342 var sql_query = 'SELECT ' + field_name + ' FROM ' + window.parent.table + ' WHERE ' + where_clause;
344 // Make the Ajax call and get the data, wrap it and insert it
346 'token' : window.parent.token,
347 'db' : window.parent.db,
348 'ajax_request' : true,
349 'sql_query' : sql_query,
352 if(data.success == true) {
353 $(this_field).html('<textarea>'+data.value+'</textarea>')
354 .append('<span class="original_data">'+data_value+'</span>');
355 $(".original_data").hide();
358 PMA_ajaxShowMessage(data.error);
362 else if($(this).is('.relation')) {
367 * @var curr_value String containing the current value of this relational field
369 var curr_value = $(this).find('a').text();
372 * @var post_params Object containing parameters for the POST request
375 'ajax_request' : true,
376 'get_relational_values' : true,
377 'db' : window.parent.db,
378 'table' : window.parent.table,
379 'column' : field_name,
380 'token' : window.parent.token,
381 'curr_value' : curr_value
384 $.post('sql.php', post_params, function(data) {
385 $(this_field).html(data.dropdown)
386 .append('<span class="original_data">'+data_value+'</span>');
387 $(".original_data").hide();
390 else if($(this).is('.enum')) {
394 * @var curr_value String containing the current value of this relational field
396 var curr_value = $(this).text();
399 * @var post_params Object containing parameters for the POST request
402 'ajax_request' : true,
403 'get_enum_values' : true,
404 'db' : window.parent.db,
405 'table' : window.parent.table,
406 'column' : field_name,
407 'token' : window.parent.token,
408 'curr_value' : curr_value
411 $.post('sql.php', post_params, function(data) {
412 $(this_field).html(data.dropdown)
413 .append('<span class="original_data">'+data_value+'</span>');
414 $(".original_data").hide();
417 else if($(this).is('.null')) {
419 $(this_field).html('<textarea></textarea>')
420 .append('<span class="original_data">NULL</span>');
421 $(".original_data").hide();
424 }) // End On click, replace the current field with an input/textarea
427 * After editing, clicking again should post data
430 * @name inline_edit_save
431 * @see PMA_ajaxShowMessage()
432 * @see getFieldName()
434 $(".edit_row_anchor_active").live('click', function(event) {
436 event.preventDefault();
439 * @var this_row Object referring to current row that is being edited
441 var this_row = $(this);
443 // Initialize variables
444 if(disp_mode == 'vertical') {
446 * @var this_row_index Index of the current <td> in the parent <tr>
447 * Current <td> is the inline edit anchor.
449 var this_row_index = $(this).index();
451 * @var input_siblings Object referring to all inline editable events from same row
453 var input_siblings = $(this).parents('tbody').find('tr').find('.data_inline_edit:nth('+this_row_index+')');
455 * @var where_clause String containing the WHERE clause to select this row
457 var where_clause = $(this).parents('tbody').find('tr').find('.where_clause:nth('+this_row_index+')').val();
460 var input_siblings = $(this).parent('tr').find('.data_inline_edit');
461 var where_clause = $(this).parent('tr').find('.where_clause').val();
465 * @var nonunique Boolean, whether this row is unique or not
467 if($(this).is('.nonunique')) {
474 // Collect values of all fields to submit, we don't know which changed
476 * @var params_to_submit Array containing the name/value pairs of all fields
478 var params_to_submit = {};
480 * @var relation_fields Array containing the name/value pairs of relational fields
482 var relation_fields = {};
484 * @var transform_fields Array containing the name/value pairs for transformed fields
486 var transform_fields = {};
488 * @var transformation_fields Boolean, if there are any transformed fields in this row
490 var transformation_fields = false;
492 $(input_siblings).each(function() {
495 * @var this_field Object referring to this field (<td>)
497 var this_field = $(this);
499 * @var field_name String containing the name of this field.
500 * @see getFieldName()
502 var field_name = getFieldName($(this), disp_mode);
505 * @var this_field_params Array temporary storage for the name/value of current field
507 var this_field_params = {};
509 if($(this).is('.transformed')) {
510 transformation_fields = true;
513 if($(this).is(":not(.relation, .enum)")) {
514 this_field_params[field_name] = $(this).find('textarea').val();
515 if($(this).is('.transformed')) {
516 $.extend(transform_fields, this_field_params);
520 this_field_params[field_name] = $(this).find('select').val();
522 if($(this).is('.relation')) {
523 $.extend(relation_fields, this_field_params);
527 $.extend(params_to_submit, this_field_params);
531 * @var sql_query String containing the SQL query to update this row
533 var sql_query = 'UPDATE ' + window.parent.table + ' SET ';
535 $.each(params_to_submit, function(key, value) {
536 if(value.length == 0) {
539 sql_query += ' ' + key + "='" + value + "' , ";
541 //Remove the last ',' appended in the above loop
542 sql_query = sql_query.replace(/,\s$/, '');
543 sql_query += ' WHERE ' + where_clause;
546 * @var rel_fields_list String, url encoded representation of {@link relations_fields}
548 var rel_fields_list = $.param(relation_fields);
551 * @var transform_fields_list String, url encoded representation of {@link transform_fields}
553 var transform_fields_list = $.param(transform_fields);
555 // Make the Ajax post after setting all parameters
557 * @var post_params Object containing parameters for the POST request
559 var post_params = {'ajax_request' : true,
560 'sql_query' : sql_query,
561 'disp_direction' : disp_mode,
562 'token' : window.parent.token,
563 'db' : window.parent.db,
564 'table' : window.parent.table,
565 'clause_is_unique' : nonunique,
566 'where_clause' : where_clause,
567 'rel_fields_list' : rel_fields_list,
568 'do_transformations' : transformation_fields,
569 'transform_fields_list' : transform_fields_list,
573 $.post('tbl_replace.php', post_params, function(data) {
574 if(data.success == true) {
575 PMA_ajaxShowMessage(data.message);
576 $(this_row).removeClass('edit_row_anchor_active').addClass('edit_row_anchor');
578 $(input_siblings).each(function() {
579 // Inline edit post has been successful.
580 if($(this).is(':not(.relation, .enum)')) {
582 * @var new_html String containing value of the data field after edit
584 var new_html = $(this).find('textarea').val();
586 if($(this).is('.transformed')) {
587 var field_name = getFieldName($(this), disp_mode);
588 var this_field = $(this);
590 $.each(data.transformations, function(key, value) {
591 if(key == field_name) {
592 if($(this_field).is('.text_plain, .application_octetstream')) {
597 var new_value = $(this_field).find('textarea').val();
598 new_html = $(value).append(new_value);
606 var new_html = $(this).find('select').val();
607 if($(this).is('.relation')) {
608 var field_name = getFieldName($(this), disp_mode);
609 var this_field = $(this);
611 $.each(data.relations, function(key, value) {
612 if(key == field_name) {
613 var new_value = $(this_field).find('select').val();
614 new_html = $(value).append(new_value);
620 $(this).html(new_html);
624 PMA_ajaxShowMessage(data.error);
627 }) // End After editing, clicking again should post data
628 }, 'top.frame_content') // end $(document).ready()