jQuery plugin wrapping DOM manipulation command in an object
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery Execute Object plugin

This is a tiny jQuery plugin that enables you to interpret an object as DOM manipulation instructions with a single function call.


$.executeObject({"#my_div": ["text", "new text"]})   // object passed
$.executeObject('{"#my_div": ["text", "new text"]}') // JSON is ok too

Use cases

Instead of

$('table tr:first').remove();
$('#my_div').addClass('error').text('Error occured');

create an object and pass it to the executeObject function:

var obj =
  { 'table tr:first': 'remove'
  , 'input#name': ['val', 'John']
  , '#my_div':
    [ ['addClass', 'error']
    , ['text', 'Error occured']


Specifically, if you find yourself creating horrendous view templates in vein of

$('input#name').val('<%= escape_javascript(@person.name) %>')
$('#my_div').addClass('error').text('<%= escape_javascript(@error) %>')

you may simply shift this logic to the controller (example in ruby):

obj = {'input#name' => ['val', @person.name], 
  '#my_div' => [%w[addClass error], ['text', @error]]}
render js: "$.executeObject( #{obj.to_json} )"
# note that we don't need extra quotes inside function call

and scratch the view altogether. Javascript passed from the server is notoriously hard to debug, so let's pass an object instead. You may also indicate $.executeObject as a callback function for your ajax call

$.post('/my/url', {some: 'data'}, $.executeObject)

and simply pass JSON in response:

render json: obj

In other words, it's always better to pass around data, and not code.

Return value

The function returns the number of jQuery method calls that it was able to perform. Wrong methods or empty selectors fail silently and execution continues.