Using jQuery events for triggering complex UI updates

Nowadays jQuery become a very standard library used in in 90% of all projects. Simplicity of DOM manipulation with cross browser capability attracts all developers, from newbies to profs.

While developing AJAX UI with many forms nested in each other I faced a problem of not well written code, what was a real pain to modify.

I am going to tell how jQuery events saved my ass.

jQuery events are very simple and easy to use, you should have known them like click, hover, submit, etc..

Usage is prety simple thu

JavaScript

1

2

3

$('#my_button').click(function(){

..docool stuff here..

});

But you probaby did not pay much attention to jQuery events documentation chapter. There is a nice paragraph that says, event name can be any string and events can be triggered by user.

These two facts play important role in what I am going to achieve. See code below.

JavaScript

1

2

3

4

5

6

7

//Subscribe to event

$(document).bind('my.custom.event',function(){

...docool stuff here...

});

// Trigger event

$(document).trigger('my.custom.event');

Usage scenario – AJAX UI

How did this save my ass? I have a complex user interface based on AJAX. That means user clicks on the button and it loads form. Problem is that form also has buttons, tabs and all these DOM elements have to binded to events.

In this case code lookgs ugly:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$('#button').click(function(){

$.get('/product/edit_form/1',function(html){

$('#form #tab').tabs();

...20more lines of code here.

$('#form #supplier').click(function(){

$.get('/product/supplier_list/1',function(data){

...20more lines of code here.

});

});

$('#form #save').click(function(){

...20more lines of code here.

});

});

});

The more elements and nests levels you have, code looks heavier to modify and support.

I have rewritten same code using jQuery custom events, look here

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

$('#button').click(function(){

$.get('/product/edit_form/1',function(html){

$(document).trigger('form.loaded')

});

});

// Init widgets

$(document).bind('form.loaded',function(){

$('#form #tab').tabs();

...more widgets

});

// Supplier function

$(document).bind('form.loaded',function(){

$('#form #supplier').click(function(){

$.get('/product/supplier_list/1',function(data){

$(document).trigger('supplier.loaded')

});

});

});

// Save code function

$(document).bind('form.loaded',function(){

$('#form #save').click(function(){

..save code..

});

});

// Display list of suppliers

$(document).bind('supplier.loaded',function(){

...some code...

});

Code become more flat and structured, much easier to support and add functionality. It is possible to add multiple event handlers and they all will be executed in that order. It acts like subscribing.

Using parameters in custom jQuery events

For dessert, nice feature that saves time and global variables. It is possible to pass variables when event is triggered and they will appear as arguments to invokig functions: