Posts tagged JQuery

Introduction

I normally develop CMS (control management systems) based on a heavy use of AJAX, and I normally endup writing tones of jQuery functions for different IDs and/or CLASSes. Thinking to create a library that will free me to create the same functions again and again and for different classes I thought about this simple plugin. The reason was that if I was to create a new CMS for my beloved Yii framework, I just wanted to have a system where, by setting some meta data into the HTML elements, the client script will smartly know what to do. I didn’t want to necessary worry about different classes on  my client scripts, I wanted to be just one class.

The idea behind goes a bit further and has something to do with Yii, I want to create extensions that will take care of the correct rendering of a button without having to worry about the client scripts **and** also the same extension could actually call jquery commands easily. I emphasized **and** because Yii already provides an ajaxLink and an ajaxButton but they are not listened to perform client jquery executions and that, as seen in its forums, is causing problems to PHP programmers a lot of times.

Also, I envision an environment where through this, Yii extension designers will be able to create CMS styles, completely different that the one coming from Yii, so Yii users could easily integrate a new layout without even tweaking CSS, or Themes, or Layouts, just their views and by integrating some specialized widgets API, user will be able to program a gallery (for example) with just one line of code on their views. Enough talking, here is the plugin for you to test it and tell me what do you think.

How to use

Include jquery and jquery.livebuttons.js on your document’s head and start monitoring for livebuttons like this:

//
// .selector is the class name the HTML elements have
$('.selector').livebuttons();
$('.selector').livebuttons( options );
//
// we can have more than one
$('.otherselector').livebuttons( otheroptions );

Options

useFirebug

A useful property for debuggin processes. If set to true all logs will be displayed on firebug console (or chrome).

var options = {
    useFirebug: true
}
$('.selector').livebuttons( options );

events

An array of options where to specify the events to monitor. In future releases, we will be able to specify which methods correspond for certain events.

var options = {
    events: ['click','mouseover'] // not a good practice though *yet*
}
$('.selector').livebuttons( options );

methods

This is the most interesting part of the plugin. We could implement our own javascript methods to be used with livebuttons. All methods will receive a ‘command’ parameter, which is actually the object in the meta-data of the HTML element (see below on the examples provided for default methods).

var options = {
    methods: {
        alert: function( command ) {
              alert( command.message );
        }
   }
}
$('.selector').livebuttons( options );

When designing our own javascript functions to be attached to the plugin, we can access internal parser functions with this keyboard. All functions receive a command object and also a reference to the options object. This object have a reference to the parser it self and we could easily access parser’s functions by using this.parser.

The Parser

If you look at the code inside the plugin, you will see that the parser has a couple of good methods to use:

stringify

Converts an object to its JSON representation string

createIFrame

Creates an iframe to be used with FORMs with multipart/form-data. So you can easily send files to the server without the need of reloading the page. Check at its code to see its

removeIFrame

Removes the iFrame previously created with parser.createIFrame() method.

parseJSON

Parses a JSON string and converts it into an object. I know jQuery comes with one, but it throws an error when you include a function into a command object’s property.

Default Methods

You have a couple of methods that already come with the plugin. You can easily override them if required. Here they are:

ajax

Its name is self-explanatory. It receives a command object on the following format:

{method:'ajax',url:'',data:{},success:function(){},error:function(){}}

Example of live button markup

<a class="livebutton" href="#"
data-cmd='{"method":"ajax","url":'http://localhost/',"success":handleAJAX}">test ajax</a>

getscript

Its calling jQuery’s getScript method. It receives a command object on the following format:

{method:'getscript',url:''}

Example of live button markup

<a href="#" class="livebutton"
   data-cmd='{method:"getscript",url:'http://localhost/script.js'}' >test getscript</a>

jquery

Its calling any jQuery’s method. It receives a command object on the following format:

{"method":"jquery","jqmethod": "","target":"","arguments":["url",function(){}]}

Example of live button markup

<a class="livebutton" href="#" data-cmd="{"method":"jquery","jqmethod":"load","target":"#layer","arguments":["url":"http://localhost"]">test load jquery function</a>

Remarks

As previously said, all functions also receive the command object extracted from the HTML element, but that’s not all. The parser automatically includes a jquery reference of the HTML element to the command’s element property.

var options = {
    methods: {
        alert: function( command ) {
              alert( command.message );
             // do not use $( command.element ) as it would like $( $( element ) )
              command.element.attr('title','I have already been clicked');
        }
   }
}
$('.selector').livebuttons( options );

Demo

For the sake of having a demo (I will build a better one) the following script will create a live button that can perform jquery ‘append’ commands. Please note that when you load new content via AJAX on a page that has the livebuttons plugin that you have successfuly initiated, the plugin will also listen to the specified events to those livebuttons loaded via AJAX.

<html>
<head>
<script src="path\to\jquery.livebuttons.js"></script>
<script>
$('.testbuttons').livebuttons();
<body>
<a href="#" class="testbuttons"
  data-cmd="{"method":"jquery","jqmethod":"append","target":"#container","arguments":["new content<br>"]}">Test append</a>
<div id="container"></div>
</body>
</html>

Download

I seriously would like to know what do you think about this system as, again, I am planning to develop extensions for Yii that will embrace it in order to easy the tasks of PHP programmers with client Javascript. I do use this system to create a new system for a personal project and it is working quite good; but I won’t dare to create Yii extensions if you think that what I envision is wrong.

If the below link doesn’t work (it happens normally because you are not registered), please use the following link to download: jquery.livebuttons.js.

download: JQuery Livebuttons Plugin (15.33KB) added: 15/12/2010 clicks: 166

Tweet this!