Tag Archives: bind

jQuery: How to Bind a Hover Event CodeUnit 04 NOV 2011

To bind a hover effect, in other words a mouse over and mouse out event that goes together, to an element using standard jQuery is remarkably simple. As with any other bind declaration in jQuery, you simply identify the class, ID or element type using the standard $ notation, and then call the desired action function you want to bind to with the necessary function parameters.

Binding a hover function does however look a little different than a normal bind to say a click function in that it accepts two parameters – namely the function to carry out on the first mouse over event and then the second to execute on the mouse out action.

So in practice, binding a hover event would look like this:

$("li").hover( 
function() 
{ 
    $(this).addClass("hover"); 
}, 
function() 
{ 
    $(this).removeClass("hover"); 
}); 

(Note that we could have used toggleClass in the example above, but this way makes it easier to understand.)

And now you know.

jQuery: Bind an onClick Event to an Item in a DataTables Row CodeUnit 14 MAY 2010

As it has quickly become apparent on this site, my two current favourites in the land of web development is the fantastic jQuery javascript library and the brilliant jQuery-based DataTables plugin that gives you instant dynamic table features applied to any bog standard HTML table.

The problem that I’m solving today arose from my desire to include a positive/negative flagging system to data being displayed in a DataTables view. So in each data row I added a column that contained both a greyed out happy and sad smiley face, on which the user will be able to click in order to color the appropriate face and thus indicate a state for that particular row of data.

The idea is simple enough. Click on the smiley face and the script will then fire off an ajax post to a script handler which will fiddle in the database and return the correct state which in turn changes the image accordingly – pretty standard AJAX stuff in other words.

However, herein lay the problem.

Because the DataTables was being fed through a server-side script, in other words the actual table data is loaded by the DataTables plugin itself, my jQuery function that was supposed to interact with the clicking of a smiley face couldn’t work because the elements it was meant to interact with simply didn’t exist when the page’s initial DOM tree was being loaded.

So how to solve this?

Well the solution obviously lies in binding the newly created elements to my existing click handler function, but the question remains – how exactly does one do this if the table data is being loaded through a jQuery function?

Well the answer lies with the DataTables-provided callback function entitled fnDrawCallback, which is called on every ‘draw’ event – in other words the perfect little hook to attach your jQuery code, which is to interact with the DataTables-loaded DOM data, to.

So how does one use this callback functionality then? Well the magic all gets stuffed into the DataTables constructor function. First, we declare the function that is to be run on the click event happening. Then, we bind this function to the click event for the desired elements in the standard jQuery manner. And then for the crucial point, this binding is done as part of the fnDrawCallback declaration in your dataTable constructor call.

So let’s see this in action:

//onClick handler function
function flagsmileysadclick()
{
	$(this).load('ajax_set_smiley_flag.php',{'smileyid':$(this).attr('id')});
}

//DataTables constructor
oTable = $('#commentstable').dataTable({
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 50,
"bLengthChange": false,
"sAjaxSource": "datatables_comments_list.php",
"sPaginationType": "full_numbers",
"aaSorting": [[ 0, "desc" ]],
"fnDrawCallback": function() {
  //bind the click handler script to the newly created elements held in the table
	$('.flagsmileysad').bind('click',flagsmileysadclick);
}
});

And that’s actually it. Simple, but effective, and a nice introduction to the handy fnDrawCallback feature of DataTables.