dayjo.org

I’ve been working on something recently in which the testing has involved modiyfing 2 or 3 fields in a database very regularly, I was fed-up of going into phpMyAdmin clicking edit on the row, finding the field (1 of 100 odd), editing it and then going to the save button.

I decided that I would write a Greasemonkey script to turn all of the fields into an AJAX editing form.

Basically all you have to do now is double click the field value, edit the value and hit enter to save!

It has only been tested on phpMyAdmin 3.1.2 so I have no idea if it’ll work on other versions.

This script uses jQuery (www.jquery.com).

// ==UserScript==
// @name           Ajax PHPMyAdmin
// @namespace      All
// @description    Ajaxify PHPMyAdmin By Joel Day http://blog.dayjo.org/
// @include        http://localhost/phpmyadmin/sql.php*
// ==/UserScript==

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js'; // Or specify one on the local server for a quicker load
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
    if (typeof unsafeWindow.jQuery == 'undefined') {
        window.setTimeout(GM_wait, 100);
    }
    else {
        $ = unsafeWindow.jQuery;
        letsJQuery();
    }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {

    var i = 0, j = 0;

    // Assign the th's id for later so we can grab the field name
    $('#table_results').find('th:not([colspan])').each(function() {

    	// i represents a column id
        i++; $(this).attr('id', i);

    });

// Loop through the field values and re-make the
 into our input box and div
    $('#table_results').find('td:not([align="center"])').each(function() {

        // Assign it a column id
        if (j == i) {
            j = 0;
        }
        j++;

    	// Current value of the field
        var value = $(this).html();
        var field = $('#' + j + ' a').html();

        // Set the html
        $(this).html("<div name='fielddiv'>" + value + "</div>\
        	<input style='display: none; text-align: right;' type='text' title='" + field + "' value='" + value + "' />");
    });

// Set the dblclick event of the div
$('#table_results div[name="fielddiv"]').dblclick(function(){

// Show the input and hide the div
$(this).siblings("input").show();
$(this).hide();

});

// Loop through and set the ENTER keypress event for save
    $('#table_results').find('td:not([align="center"]) input').keypress(function(ev) {
        if (ev.keyCode == 13) {
        	// Get the info for the query.
            var db = $('input[name="db"]').val();
            var table = $('input[name="table"]').val();
            var token = $('input[name="token"]').val();
            var field = $(this).attr('title');
            var value = $(this).val();
            var ID = $(this).parent().siblings().children('input[title="ID"]').val();

// Post the query
            $.post("sql.php?db=" + db + "&table=" + table + "&sql_query=UPDATE+" + table + "+SET+" + field + "='" + value + "'+WHERE+`ID`='" + ID + "'&token=" + token);

            // Now set the div to the new value, show it and hide the input
            $(this).siblings('div').html($(this).val()).show();
            $(this).hide();

// Return false as not to post any forms or click any selected links
            return false;
        }
    });
}