JQuery Plugin: imCheckBoxDB

One of my primary motivations for creating JQuery plugins is to make my life easier by enabling me to develop websites quicker. Early in my application development career (Delphi), a manager once told me, if you use a routine more than once, create a function. At the time, I had created some functions, but more often than not, I would copy/paste the same code in different places throughout the application. This revelation of creating functions was one of those “When you can pull the pebbles from my hand” moments. How interesting. What a novel idea…

There are a number of repetitive tasks that developers perform when creating web sites, especially as it relates to the gui. I was developing a web site where the owner wanted multiples lists of checkboxes on various pages of his website. On most the pages where these checkboxes appeared, the owner wanted the check boxes to have a 4-column display, but there were other pages where he wanted a 3-columns display. I got tired of copying/pasting the php/html structure from page to page, so I decided to create a JQuery plugin (imCheckBoxDB), that would layout the check box lists for me. The checkbox list is created . Both an id and label can be retrieved for each checkbox.
I think the imCheckBoxDB plugin will be one of the easiest JQuery plugins you will ever use. Look at the following code.

?View Code JAVASCRIPT
$('#scene').imCheckBoxDB({
         data_url: 'includes/controllers/dbActionController.php',
         data: [{name: "action", value: "doGetJson"}, {name: "page", value: "categories"}, {name: "select", value: "true"}, {name: "venue_type_id", value: vtype} ],
         db_map: {"id": "category_id", "label" : "cat_desc"},
         cb_prefix: 'chbc_',
         cb_class : 'checkbox',
         num_cols: 4
});

Container: The container for the list. In the example above, “#scene” is the container.
data_url: The URL where you will retrieve the address
data: Any data that you want to send to the data_url. The format for this option should be:

[{name: “name1”, value: “value1”}, {name: “name2”, value: “value2”}, etc. ]

The options will be converted into name=value pairs and sent to the data_url.

data_map: Each checkbox is dynamically created using the data that is returned via the ajax call. The db_map tells the plugin how to map the id, name, and value of the check box with the data returned. To create a checkbox on a web page, we enter the following:

<input id="cb1" name="cb1" type="checkbox" value="Whatever" />

When the imCheckBoxDB plugin creates each checkbox, it maps the data like the following:

<input id="db_map.id" name="db_map.id" type="checkbox" value="db_map.label" />

The data returned must be a Json object (minus the top object).

Example:

//Query = “select category_id, cat_desc from music order by category_id”

Expected Result:

[{id: “1”, label: “Reggae”}, {id: “2”, label: “Jazz”}, {id: “3”, label: “Rock”}, {id: “1”, label: “HipHop”} ]

Notice the object is enclosed with brackets [], not {“Result”: { } as is common with Json objects.
cb_prefix: The cb_prefix option is not required. The default value is ‘chb_’. In most situations, you would not want to name the chechboxes using a number only, so the prefix option enables you to create a prefix using the name and id of each chechbox. Again, the default is ‘chb_’, but you can change it to properly interact with your backend.

<input id="”cb_prefix" name="”cb_prefix" type="checkbox" value="db_map.label" />

cb_class: The cb_class option is not required, but is available if you want to style your checkebox .

<input id="”cb_prefix" class="”db_map.cb_class”" name="”cb_prefix" type="checkbox" value="db_map.label" />

num_cols: The number of columns. The default is 4.

You can download the imGoogleMaps plugin from Google Code or JQuery Plugins.

Click here to view a demo of this plugin.

Be Sociable, Share!
Adjective: Meaning to post or retrieve information without having to refresh the page
Note: This is totally made up!! Perhaps I should add it to wikipedia or trademark the word!!

Checkout My New Site - T-shirts For Geeks