Display / Hide / Update processing message in jQuery Datatables

You can display / update the processing message displayed by Datatables. There is a hidden div which contains the processing text. Id of the hidden div is "YourTablesId_processing".
By hiding / showing div you can hide / show the processing message also by updating divs HTML you can change the processing message.
This demo shows how to display / hide / update the processing message in Datatables.

jQuery : Warn user for unsaved data

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        return "Your unsaved data will be lost.";
    }
}

$("select,input,textarea").change(function() {
    needToConfirm = true;
});

The above code checks the needToConfirm variable, if its true then it will display warning message. Whenever input, select or textarea elements value is changed, needToConfirm variable is set to true.

Reverse selected elements in jQuery

You can reverse the selected elements in jQuery using get and reverse methods.  
Just use get and reverse with any jQuery selectors like  

$($("ANY_JQUERY_SELECTOR").get().reverse())

For example   

$("tr") 

Will select all tr elements in order of appearance while

$($("tr").get().reverse())

will select the elements in reverse order of appearance.  

Live Demo.

jQuery data() method.

Many times we need to add some data to DOM elements. Like if you want to hide particular div on click of a button, In such cases I used to use class of button to store id of div which we want to hide. Or may be we want to keep a counter of how many times a button is clicked.

Using id or class or JavaScript variable serves the purpose but many times it gets bit complicated. jQuery data() methods provides a cleaner approach to associate arbitrary data to DOM elements.  
Method Signature:

.data(key,value);

key : A string naming the piece of data to set.

value : The new data value; it can be any Javascript type including Array or Object.   

In given jsFiddle, using data method some value is stored for span with id="foo"

For more details : http://api.jquery.com/data/

Resizable table using jQuery

Here is a small example which shows a table where user can expand / collapse the columns dynamically. Columns will collapse to desired to width irrespective of its content.



Here is the final version with few enhancements


Thank you Stackoverflow for helping me out :D

~Ajinkya.

Basic jQuery selectors

 jQuery is a simple but really powerful JavaScript library. jQuery contains tons of features but my favorite is selectors. jQuery provides amazing set of selectors which makes anything / everything a lot simple.
So let's start with jQuery selectors.

jQuery Selector 1: Select all elements

$('*').val('I am a HTML element');

This will select all HTMl elements


jQuery Selector 2: Select specific HTML elements

$('input').val('I am a input element');

This selector will select all input elements. Instead of input you can use div, span, label or any other HTML element.

jQuery Selector 3: Select by id

$('#fooId').val('my id is fooId');

It will select element which have id='fooId'.'#' is used to specify id in selector.

jQuery Selector 4: Select by class

$('.fooClass').val('I have fooClass');

This will select all elements which have class='fooClass'. '.' is used to specify class in selectors.
If you want to select only input element you can use.

$('input .fooClass').val('I am a input element with fooClass');

jQuery selector 5: Select by attribute

$("input [name='fooName']").val('I am a input with name=fooName');

This will select all input elements which have name=fooName. Instead of name you can also use other attributes in selector.


jQuery selector 6: Select nth element

$('input :eq(2)').val('I am the 3rd input');

It will select 3rd input element. The index passed to eq(n) is zero based.

Here is a jsFiddle which contains all selectors we discussed till now



You can get complete list of selectors from here.

~Ajinkya.

Jquery accordian with multipal open sections

I really liked Accordian plugin from Jquery. Its really nice and easy to use plugin. I wanted to use Accordian but
1. It don't allow multiple section open at once. 
2. I wanted few sections to be always open.
3. Wanted to expand / collapse few section on some event.
4. Official Jquery site also discourage you from using According with multipal open sections. You will find following note on Jquery site.

"NOTE: If you want multiple sections open at once, don't use an accordion"

So instead of using Jquery accordian, I created similar component using basic Jquery effects. I used slideUp, slideDown and slideToggle. Here is jsFiddle which displays all js, html and css. (I am assuming that you have some basic knowledge of Jquery)



In above example I added few extra things like enabling/ disabling input elements within section, expand / collapsing section on selection of checkbox etc.
I have added enough comments in my JS still you can drop comment for any query. Also I created pretty basic UI, you can decorate it to make it look as accordian.

~Ajinkya.