itlivewire dev blogJust another web development blog…

We always encounter them on our JavaScript apps, the dynamic elements, most of the time they are in the form of new rows in the table <tr><td></td></tr> or a new list <li> from a <ul>.

So sometimes we need to capture an event to these newly loaded dynamic elements, and the solution in jquery is to use the live function.

Alternatively we can also use the covered by the parent technique, so if the parent of the dynamic element is loaded manually, we can just capture the event by this code.

$('ul').on('click','li',function(){
    alert('Has been clicked.. Do something next');
})

With the code on top we have eliminated the use of making this line

$('li').live('click',function(){
    alert('Has been clicked.. Do something next');
});

because the event for <li> has been covered by the parent <ul>.

I have just stumbled on this performance tip so I tried and tested it, so far the results were good there are some speed improvement on my jquery codes.

Optimize selectors for Sizzle’s ‘right to left’ model
As of version 1.3, jQuery has been using the Sizzle Javascript Selector Library which works a bit differently from the selector engine used in the past. Namely it uses a ‘right to left’ model rather than a ‘left to right’. Make sure that your right-most selector is really specific and any selectors on the left are more broad:

var linkContacts = $(‘.contact-links div.side-wrapper’);

instead of:

var linkContacts = $(‘a.contact-links .side-wrapper’);

More tips from this website
http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/

woorkup features the top jquery plugins of 2009

http://woorkup.com/2009/12/27/10-popular-jquery-plugins-in-2009-you-can%E2%80%99t-miss/

includes the very impressive mapbox and jqtouch

To dynamically change the table rows use this smart approach using jquery

Assign your new table data rows to a variable
var msg="<tr><td>Kristine</td><td>18</td><td>peach</td></tr><tr><td>Vanessa</td><td>25</td><td>strawberry</td></tr>";

Delete the exsiting rows except for the header tr:first – represents first row of the table – which happens to be our header
$("table tr:first").siblings().remove();

Then add the new data, the msg javascript variable used here holds the new table rows data
$("table tr:first").after(msg);

I have a very detailed step by step tutorial you can view here

From Smashing Magazine

Rule #1: Separate Javascript Functionality

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wiped from your mind.

<a onclick="doSomething()" href="#">Click!</a>

Good markup:

All Javascript behaviours should be included in external script files and linked to the document with a

<a href="backuplink.html" class="doSomething">Click!</a>

And the Javascript inside the myscript.js file would contain something like this:

A jquery plugin that creates a multiple column selectbox
Donwload plugin at: http://code.google.com/p/jquerymulticolumnselectbox/

Directions for Use:

1. Include of course jquery.js and jquery.multicolselect.js

2. Create a table put an id to the div “ex. datatable”

3. Run the plugin using this command

$("#datatable").multicolselect({
	   		buttonImage:"selectbutton.gif",
			valueCol:1,
	  		hideCol:0
	   });

4 . Note you need the “selectbutton.gif” so save it.
5. Then your done.

Options