AJAXify phpMyAdmin Interface - GSOC 2011 - 10th week

According to my timeline, this week I had to work with ajaxify the options in table operations. Mainly this week I focused on ajaxify two option in the table options. Those options are

1. Alter order by
2. Copy table.

For the "Alter order by" option I did following changes to handle the ajax request and the response.

1. I added the "$("#alterTableOrderby.ajax").live('submit')" action to the functions.js file which posts the alterTableOrderby form with ajax post and then return the results without reloading the page.
2. I modified the tbl_operations.php and tbl_alter.php files in order to handle the ajax request which was sent by the above action.

Now when the user click on the go button "Alter order by" form, it get submit as a ajax request and then show the results of the action to the user without reloading the page.

Then I started working with ajaxify the "Copy table" option in the table operations. I did following changes in order to handle this ajax response.

1. I added "$("#copyTable.ajax").live('submit',)" action to the functions.js file which handles the ajax submission of the copy table form. When the "Switch to copied table" options is selected I continued with the non ajax submit.
2. Then I modified the tbl_operations.js file and the tbl_move_copy.php file which handles that ajax request.

After doing these modifications now when user copy a table to another database he can do it by reloading the page and if only the user select "Switch to copied table" option only he redirects to the copied table.

Next week I'll continue with ajaxify the remaining options in table operations.

AJAXify phpMyAdmin Interface - GSOC 2011 - ninth week

This week I continued my works on "Ajaxify the Add column(s) in table structure". I added two ajax actions in to tbl_strucure.js and functions.js files.

1. I added the "$("#addColumns.ajax input[value=Go]").live('click')" action to the tbl_structure.js file which gives the add columns dialog for the user.
2. Then I reused the code in "$("#append_fields_form input[name=do_save_data]").live('click')" action in functions.js file which was initially written for handling the table->change option. I did small changes for the same action and used with this feature.

Then after Marc pointed out two issues with the enum editor which are

1. Cannot edit the enum editor values
2. Not appearing the name of the column in enum editor header

Since I have fixed a similar issue in Table->Structure->change feature I used the same logic of overlaying the enum editor by changing its z index using jquery.

Finally when the feature is finished, user gets an "Add column" dialog box which allows the user to add a column to the table as follows.

I started working with modifying the Table operations tasks by applying the ajax behavior for those features. I started ajaxifying the Alter table order option and still in progress.

Next week I'll continue with that feature.

AJAXify phpMyAdmin Interface - GSOC 2011 - eighth week

The mind term evaluation for the GOSC 2011 with phpMyadmin was on this week and I was able to successfully get through the evaluation this time with the help of Marc and the other community members.
In this week I worked with modifying the initTooltips() function which converts the footnotes to tool tips. I changed the logic by defining the relevant domain of its operation at each time by adding and extra parameter to it. But Marc informed me on some issues with that logic and I'll work on that in next week.

Then I worked with my 9th week task "Ajaxify the Add column(s) in Table structure". I added the "Add column" dialog which carries the "append_fields_form" for submitting action in the add column form in the table structure.

There are some modifications with this option and I'll push my code as soon as I finish them.

Next week I'll continue with above work and start working with "Implement the Table operations tasks"

AJAXify phpMyAdmin Interface - GSOC 2011 - Seventh week

This week my target was to work with "ajaxify the Column->Change in Table->Structure" task. But at the beginning of the week Rouslan and Marc arose two issues regarding my previous modifications. Those are

1. Set of issues with the "Ajaxified Index->Edit" option
2. An issue of not appearing the date time pickers in "DB->Structure->Insert"

With the issues in "Ajaxified Index->Edit" I had to rewrite the "checkIndexName()" function which was written in the indexes.js file. The existed method was written in pure javascript and I had to write it using jquery. And there were some issues with the manner I have used the jquery dialog and by Rouslans explanation I was able to gain some important facts on using the dialog correctly.

Then I worked with DB->Structure->Insert" issue with the help of Rouslans help and was able to bind the datetime picker with the insert form.

Then I start working with my this weeks task which is to "ajaxify the Column->Change in Table->Structure". Initially I tried to reuse the code which I have used in my previous task "Ajaxify Table->Structure->Muli_column->Change". So I moved the common code to "changeColumns(action,url)" function and used with both

• $("#fieldsForm.ajax .mult_submit[value=change]").live('click')
• $("#fieldsForm.ajax #tablestructure tbody tr td.edit a").live('click')

tasks.

Since I used "modal:true" parameter within the dialog there was an issue of "enum-editor" getting disable. This happens because of applying the "ui-widget-overlay" for the rest while we editing in the dialog. I found that the basic z-index of the overlay id 1000 and dynamically changed the z-index of the "enum-editor" to 1100 so it appears above the overlay.

Now it works properly and the modifications were merged to the master branch by Marc.

Change dialog box

Enum editor

Next week I will work with the mid-term evaluation and implementing "Add->Columns" in "Table->Structure".

AJAXify phpMyAdmin Interface - GSOC 2011 - Sixth week

This week I mainly worked with three options in my project. Those are ajaxifying the following features.

1. Continued with "Multi_row ->Export" in "Table->Browse"
2. "Indexes->Edit" in "Table->Structure"
3. "Hide/Show Indexes" in "Table->Structure"

The first task is a continuation of the my forth week task. In this I tried to export the results to an external file and tried to do it with ajax. But after referring some discussion in forums I realized that this is hard to achieve with ajax and then after discussing with Marc I have reverted the changes done to the ''Export" option and skipped the "Multi_row -> Export" in "Table->Browse" option to been ajaxifying. But I suggested a Jquery plugin for future developers, which is able to solve this issue.

Then I started working with my second task which is adding ajax dialog box for "Indexes->Edit" feature in "Table->Structure". I mainly used "tbl_structure.js" file to handle the logic of actions and modified the "tbl_indexes.php" file to response for ajax request for this. In tbl_strucuture.js file i used three actions to handle this feature. Those are

1. $("#table_index tbody tr td.edit_index.ajax").live('click') - pops up the "Edit" dialog which loads the "index_frm"
2. $("#index_frm.ajax input[name=do_save_data]").live('click') - submits the index changes for the "tbl_indexes.php" file
3. $("#index_frm.ajax input[name=add_fields").live('click') - Add more columns to the index form

After completing above modifications this feature works fine and add more usability to the index edit option.

Edit dialogbox

Then I started working with my third task which is adding "Hide/Show Indexes" in "Table->Structure". I used tbl_structure.js file to handle the actions logic for this. I have generated "#toggletableindexdiv" which carries the "toggletableindexlink" which will toggle the index table show and hide. Following screen shots show how this feature works.

When the indexes are shown

When the indexes shown

After adding these features to PMA, it improved the usability and allow the user to do above mentioned actions without reloading its base pages.

Next week I'll work with ajaxifying the "Single_column -> Change" in "Table->Structure".