Javascript Reference

The ExpressionEngine Developer Toolbar (EEDT) loads a javascript library called eedt.js. The eedt.js library handles the entire EEDT lifecycle but also exposes an API that allows you to do the following:

Listen for toolbar events, such as init and ready
Listen for panel events, such as init, open and close
Communicate via AJAX with server side PHP scripts
Dynamically load CSS & JS assets

The library is available as the eedt JS global object.

ready()

eedt.ready(callback)

callback - Function to be invoked when eedt library is ready
return - Null

Specify a function to be called when the eedt library is fully loaded. Callback recieves two arguments: jQuery object and the eedt object.

Since the eedt.js library depends on jQuery (and will load it dynamically if not present on the page) this method is useful for running code that depends on jQuery being present or that needs to communicate with PHP scripts using the eedt.ajax() method.

Example

eedt.ready(function($, eedt){
	//Code
})

ajax()

eedt.ajax(class_name, method_name [, callback])

class_name - Name of PHP class to be loaded and instantiated
method_name - Name of PHP method to be called
callback - Optional, Function to be invoked on request finishes
return - jQuery.Deferred

Perform an asynchronous HTTP (AJAX) request with a specified PHP class & method.

Callback receives a single argument: the returned data from the PHP script.

NB: EEDT implements a security protocol whereby the class specified in the class_name argument must have a public array property called $eedt_act that contains a list of all method names that can be called by the eedt library. If the class specified does not contain the method name specified in the method_name argument, an error will be returned.

Example

eedt.ajax('Eedt_memory_history_ext', 'fetch_memory_and_sql_usage', function(){
    //Code
});

//Or

eedt.ajax('Eedt_memory_history_ext', 'fetch_memory_and_sql_usage').done(function(){
    //Code
});

on()

eedt.on(panel_name, event_name [, callback])

panel_name - Name of the panel to listen for events
event_name - Name of the event
callback - Optional, Function to be invoked on request finishes
return - Null

Attach an event handler to a panel event.

Since debug panel contents are only fetched and inserted into the toolbar when the panel toolbar button is clicked, if you wish to perform any setup or trigger functionality when the your panel is opened and closed, you must attach event handlers to your panel.

Valid panel events are:

init
open
close

NB: The first time a panel is opened, the init method is called, but the open event is not triggered, even though the panel has opened for the first time. The open method only fires from the second opening of the panel. This is due to the asynchronous nature of the panel loading (the panel has already opened by the time the init event fires).

Example

eedt.on('memory_history', 'init', function(){
    //Code
})

Uh oh!

Javascript Reference