Post your trick

Passing parameters to a function called with setTimeout

setTimeOut(myfunction(parameter),myTimeout);

The above line will not work. To achieve this you will have to do it with closure

setTimeOut(function(){myFunction(parameter)},myTimeout);




jQuery: selecting elements with multiple classes

Here is a way to select element with multiple classes in jquery.

$(’table.cl1.cl2′).addClass(’abc’);

And to select the element which has one class
but not the other. This, does that:

$(’table.cl1:not(table.cl2)’).addClass(’xyz’);

Second one is pretty interesting which works like if clause.


Convert ASCII code to text in javascript

If a javascript string contains ASCII codes as a result of escaping HTML characters, to convert them into text, use the String.fromCharCode(); and replace functions as follows

str.replace(/&#(\d+);/g, function (m, n) { return String.fromCharCode(n); });

String.fromCharCode() is a static function and will be called by passing the string variable and using ‘String’ only. ie not like other string functions eg str.replace()


Simple way of converting a jquery object to javascript object

Sometimes while using jquery we need to get the javascript object of a dom element to call javascript functions on them.
For eg suppose we want to find the scrollHeight of a div. In case this div is given an id then it can be very easily done using
var divObj = document.getElementById(”myid”);
var sH = divObj.scrollHeight;

but what if we want to find the scrollHeight of tbody element inside a table inside the div#myid
in jquery we traverse it using $(”#myid>table>tbody”)

var sH = $(”#myid>table>tbody”)[0].scrollHeight;

This will return us the 1st element of the array. If there is only one such tbody, it will give us the required Object to call the function


condition to determine if a javascript variable has been defined or not

In php to determine if a certain variable is set we use the function,


isset($variable)



it returns a boolean value.
To do the same thing in javascript, use the following condition,


if(typeof variable != ‘undefined’){
alert(’This variable is not defined yet’);
}
else {
alert(’The variable is defined’);
}


Fire Bug for every browser

Paste the following code in your [head]  section and firebug will run in any browser :

[script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'] [/script]

Replace [] with <> accordingly

sending additional data to server along with jquery’s .serializeArray object

Many times we use jquery’s .serializeArray function to send form field values by $.post or $.ajax methods. Suppose we want to send some other data besides serialized form data, it can be done by pushing additional objects into the array returned by .serializeArray as follows

var data = $(”#my-form”).serializeArray();
data.push({ ‘name’:'category_id’ , ‘value’:this.categoryId });
data.push({ ‘name’:'entity_id’, ‘value’:this.entityId });

the elements returned by serializeArray are objects with properties ‘name’ and ‘value’ .. Once the post request is sent these can be accessed on the server side as $_POST['category_id'] and $_POST['entity_id'] just like the other parameters.

This method is better over hidden input field method particularly when dynamic values are needed to be set to the hidden form fields using javascript.


toggleText for jQuery

Unfortunately JQuery doesn’t have function to toggle text of a given element :( . But here is a trick by which you can add toggleText function to your jQuery.

jQuery.fn.toggleText = function(a, b) {
return this.each(function() {
jQuery(this).text(jQuery(this).text() == a ? b : a);
});
};

code:
$(element).toggleText('Preview','Back');


A simple trick for adding html code using js

If you want to add a relatively large chunk of html code to the DOM using javascript, and if you find it annoying to write the markup as a string in js, here is a simple trick!

write the mark up normally in the html and use inline display:none to hide it

[html]

….

[html]

now in js (using jquery)

//for inserting dynamic html, insert all the required values in the dummy div first and then assign the inner content to a variable

$(”.htmltoadd>p”).html(’Hello World’);

var myhtml = $(”.htmltoadd”).html();

$(”#required-container”).html(myhtml’);


How to attach callback functions

To attach a callback function in js :

function test(callback){

//some code for test function

if(callback && typeof callback == ‘function’){
callback.call();
}

}

test(doendtest);

The endtest function will execute after the test function .


Post A Trick !

How does "Kodetricks" work?

We at kodeplay like to share knowledge. With Kodetricks, even you can join us. All you need to do is post a programming related trick if you have one or rate a trick if you like someone else's.



Technology

Contact Us