Hi, I needed to change the contents (li) of the my carousel whenever a tab is click
so i used the example of dynamic content loading through js over here
http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html
But i need to reset the carousel on tab change so for that the code is
var carousel = $(’#mycarousel’).data(’jcarousel’);
carousel.reset();
This will reset the caraousel and then again I can load different content in it.
Post your trick
initializing jcarousel without page refresh
send an array in ajax and get it in java
Here’s a simple ajax request :
$.ajax({
url : “xyz/functionName.htm”,
dataType : “html”,
type : “post”,
data : { ‘countryName’ : countryName, },
success : function (resp) {
}
});
Now on the server side,to get the value of post variable we normally write :
String name = request.getParameter(”countryName”);
But suppose the data I am sending is array
data : { ‘countryName[]‘ : ['india','australia','africa'] }
Then to access the array on the server side we have to write :
String [] name = request.getParameterValues(”countryName”);
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.
Custom Events in jquery
we can fire custom events in jquery and set an event handler for each event .
This enables loose coupling and code reuse . This can be used to achieve the observer design pattern .
$(’#txtAddress’).keyup(function() {
$(document).trigger(’ADDRESS_CHANGE’);
});
$(’#txtCity’).keyup(function() {
$(document).trigger(’CITY_CHANGE’);
});
to now bind the event :
$(document).bind(’ADDRESS_CHANGE’, function(e) {
UpdateName();
UpdateOtherText(e);
});
Hack Away 
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
Adding your own custom functions to jquery
hide(),show(),empty()…this are predefined functions of jquery.
So, to add your own function , you just have to write small piece of code :
$.fn.myFunction = function() {
return $(this).addClass(’changed’);
}
And now, use it like this:
$(’.changePlease’).myFunction();
What is (function($){…})(jquery) ??
All jQuery plugins code is wrapped in this anonymous function.So what exactly this function do ??
Well,my little research shows that this allows the use of $ within this function without conflicting with other JavaScript libraries who are using it. Basically, since we are setting $ as a parameter, $ will overwrite any globally defined variables/references of $ in that particular anonymous function.
// Assume “$” is a prototype reference
(function ($) {
// Here “$” is a jQuery reference
})(jQuery)
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’);
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.
