Category Archives: JavaScript

Large and Laggy Gravity Forms

Over at GravityView, I have the pleasure of working on Gravity Forms-related things and sometimes we have a performance issue on our hands. This time it was an issue with a form that has about 15 visible conditional fields, about 300 (yes, three, zero, zero, three hundred :)) hidden calculation fields and a product total at the end.

Slow Gravity Forms

This form was very laggy in the browser. Any interaction took around 3 seconds to propagate through, blocking the rendering thread completely.

Continue reading

Custom Munin Graphs

Munin graphs are often too ugly to show off on public-facing pages, and while the control panel is usually enough to get bare information from graphs, customizing these to become interactive and fancy may prove to be quite a task.

Munin Google Charts

I’m going to use Google Charts to output the number of requests per second my server is processing (the data is a snapshot and does not change in this case). Fortunately, all data collected by the Munin master is stored in RRD format and can be retrieved simply by using the rrdtool fetch command, or by using the PHP RRD library if you’re using PHP, or python-rrdtool if you’re using Python.

Continue reading

Extra Data in jQuery AJAX Requests

Sometimes it’s necessary to bind some additional data to an AJAX request, data that is not sent over the wire but has to pop up in the callback.
For instance:

var dataStreams = [];
dataStreams.push( { 'id': 'A04AC', 'data': 'Hello World' } );
dataStreams.push( { 'id': 'AVM32', 'data': 'Easy does it!' } );
dataStreams.push( { 'id': 'VXI34', 'data': 'Requesting backup...' } );

jQuery.each( dataStreams, function( i, e ) { 'http://out.local/process.rpc',,
        function( data ) {
            /* data from server */
            /* but how do I access the original request object? */
} );

The original object can be passed via the XHR object which is an argument to the AJAX callback. The call returns the XHR object which can then be accessed in the callback.
This works for all jQuery AJAX functions.

jQuery.each( dataStreams, function( i, e ) { 'http://out.local/process.rpc',,
        function( data, success, xhr ) {
            /* data from server */
            /* xhr._extra = [ i, e ] the original request object can be accessed here (, */
    )._extra = [ i, e ]; /* it's an object, yay JavaScript! */
} );

There you go, just make sure the _extra object property name does not collide with any of the existing XHR properties (and prototypes).