AJAXify phpMyAdmin Interface - GSOC 2011 - Fifth week

Since I could not finish my fourth weeks second task which is "Ajaxify the multi row export in table browse" last week, I continued working with it in this week.

I used the sql.js file for handling the actions related to export and then the sql.php file. For this task I tried to reuse the toggle_quick_or_custom(); function. I used two actions for this task which are

1. $("#resultsForm.ajax .mult_submit[value=export]").live('click') which pop ups the "Export" dialog box containing the "dump" form for export
2. $("#buttonGo.ajax").live('click') which post the export data to export.php file.

Even though I worked with this task still there are some bugs with that option and I'll continue with that in the next week also.

Even tough my "Ajaxify Table-> Browse->Multiple rows->Export" option is not yet finished, since my this weeks task is "Ajaxify Table->Structure->Multiple rows->Change", I worked with it.

In this I tried to reuse the "if($("input[type='hidden'][name='table_type']").val() == "table")" code segment and place it in "displayMoreTableOpts()" fucntion in function.js.

I used the tbl_structure.js for handling the change event and in that I used two actions which are

1. "$("#fieldsForm.ajax .mult_submit[value=change]").live('click')" action to pop up the change dialog which contains the "#apend_field_form".
2. "$("#append_fields_form input[name=do_save_data].ajax").live('click')" action to handle the save option for save the changes.

There small modifications which should done for this option, so I need to continue with this option in the next week.

My sixth week tasks are "Ajaxify edit index and show/hide index in table structure", so I'll work with those options in next week.

AJAXify phpMyAdmin Interface - GSOC 2011 - Fourth week

After ajaxifying the table-> insert in db-> structure in last week, I had to fix some bugs in the same option this week also. Then I started applying ajax dialog for muti_row->change in the table->browse option. As Marc requested I have changed the name of the form "rowsDeleteForm" in to "resultsForm". Then I went through the code to find whether there are any code segments which can be used for my developments. There were not much code on that and I just find the

$("input[name=navig].ajax").click

function which can be used for reload the "resultForm" after successfully changing the row values.

Then I started implementing the feature and first I developed the click event for "Change" option which pops up the "Change" dialog which contains the "#insertForm" form which allows to change the selected values.

$("#resultsForm.ajax .mult_submit[value=edit]").live('click')

Then I developed the two events which handles the clicks on go buttons at "InsertRowTable" and "navigationPanel". Those are

$("#insertForm .insertRowTable.ajax input[value=Go]").live('click') and

$("#buttonYes.ajax").live('click')

On those I used the "$.post()" action to submit the changed values and if it is success used to trigger the "navg" button to reload the "resutlsForm".

$("input[name=navig].ajax").trigger('click')

After instructions given by Marc, I changed the code in order it supports for the vertical table.

This feature is now works fine and merged to the master branch by Marc and I believe it really improve the usability of the PMA.

Next week I have to work with ajaxify the table->export in db->browse and the actions in multiple rows in the table->structure.

AJAXify phpMyAdmin Interface - GSOC 2011 - Third week

After finishing my last week task which is ajaxifying the "Add a new User" in db->privileges, this week I started providing an ajax featured dialog to the table inserts in db->structure.
There were no previously done related works on that, so I had to start it form the beginning and there were no any codes which I could reuse in my implementation. I chose the db_structure.js file to handle the ajax behavior in this insertion.

• Initially I added the ajax class for the insert link and then wrote the action for that insert link click in db_structure.js file. The action is $("td.insert_table a.ajax").live('click'). After click action it popups the "insert_table_dialog" dialog which carries the "insertForm"

Insert Table pop up dialog

• Then I implemented the action which triggers when the "Go" button in "insertRowTable" is clicked. That is $("#insertForm .insertRowTable.ajax input[value=Go]").live('click') and it basically post the insert form to the db_structure.php and then after the record is successfully inserted it reloads the "tablesForm" in the db->structure with newly inserted values. I used "$().load()" function to load the tableForm with new values.
• Then I implemented the click action of the "Go" button at the "action_panel" in the insertForm. That is "$("#buttonYes.ajax").live('click')". In that case I had to handle the different "submit_types" and "after_insert" types. When user select the "new_insert" in after_insert list the "Insert table" dialog should re popup. So I used "trigger('click')" function to trigger the insert click automatically.

Now the insert option in db->structure works fine with its ajax behavior but seems little bit slow due to high number of "get()" requests during the operations. I'll fix that issue in the next week.

Next week my major tasks will be implementing the Actions on multiple rows in table browse. It will basically contains two part which are "change" and "export".

AJAXify phpMyAdmin Interface - GSOC 2011 - Second week

After successfully completing my first task which is Ajaxify the "Create Table" option in the navigation panel last week, I moved to the second task of the schedule. It is applying ajax behavior to the "Add a new User" option in the db->privileges tab. Initially I went through the implementation of "Add a new User" option in host->privileges which is a similar situation as db->privileges. I went through the code in the server_privileges.php and server_privileges.js files to find out what are the available logics and the code which can be reused for my implementation. I found that $("#fieldset_add_user a.ajax").live("click") event code is the logic and the code which I can reuse for my implementation. After that I started modifying it according to my task.

First I added the class="ajax" attribute to the "Add a new user link" when the Ajax in enabled. Then It became supporting to the same logic in $("#fieldset_add_user a.ajax").live("click") event.

At that point when we click on the "Add a new User" link, it successfully popups the dialog box which is carrying the "Add user" form and after we submit it correctly create that user. But still its not done. Because I had to reload the "db specific user rights" table at the db->privileges tab.

After discussing with Marc I decided to use a post command to get the updated "db specific user rights" table in db->privileges and replace it with the current table. So in oder to do so I had to remove the echoes of the "db specific user rights" form in server_privileges.php file and use the PMA_ajaxResponse() to pass the string of the table object as a json string.

Then I had to face a problem of not parsing the json string correctly and outputs error. So I used the $.parseJSON() function to parse the json string at the server_privileges.js file. Then it worked fine and reloaded the "db specific user rights" table with newly added user.

Then Marc directed me to a new scenario in host->databases->check_privileges->"Add a new user" which gave some errors because of my modification. Finally I have modified the logic which corrects the error and now the feature is working correctly.

Add user dialog

Now the "Add a new user" in db->privileges option works fine with the ajax behavior and I think it will help to improve the usability of PMA.

Next week I'm going to work with modifying the "Insert for a table" option in db->structure, which will apply the ajax behavior to it.