JQUERY AJAX with XML

Unfortunately can't use an example for this post at blogger.You know ajax needs the file to exist in the same domain. There are tricks for cross domain ajax but blogspot won't support to upload a file.

JQUERY has a very useful function .get() to fetch a file and render this. Let's take a look at the function.

I am using this code at localhost

$('#post6').click(function() {
$.get('atom.xml', function(data) {
$('#ajaxpost6').empty();
$(data).find('entry').each(function() {
var $entry = $(this);
var html = '

';
html += $entry.find('title').text();
html += '

';
$('#ajaxpost6').append(html);
});
});
return false;
});

when I click the post6 button it the get function returns a xmlHTTPrequest and if the request is successful it executes the second argument function.

And using the callback function I can render the data for my need. I can filter the data from the xml using the jquery's dom manipulation methods.

JQUERY TOGGLE function

what if you want to add or remove some css using the same button? Jquery comes with a handy toggle() function.

Toggle function needs at least two arguments. All arguments will be functions.
when you click on the toggle selector the functions will be triggered. One function will be triggered at a time. On the next click the next function will be triggered let's look at the following example.




Javascript code:

$('#post5').toggle(function(){
$('#post5 div').animate({'width':'400px'},'slow').text('click to squeeze!');
},
function(){
$('#post5 div').animate({'width':'200px'},'slow').text('click to make large!');
}
);

You can see I have used only two functions. You can use more. Enjoy toggling!

JQUERY MORE LESS Button

In a blog we often see a more.. button. when clicked it shows the extended content. Let's see an example. Click on the read more link to see the effect.

Is it a illusion we are living in?May be we are in dream like in inception.Our memory fades away

The world has been mysterious.The nature of her has not been unveiled to human. we still wonder what we are?
are we real?Human has fantasized death and life after death for ages

Read more
Read less

Let's look at the javascript code

$('.selector p:eq(1)').hide();
$('a.less').hide();
$('a.more').click(function(){
$('.selector p:eq(1)').slideDown('slow');
$('a.more').hide();
$('a.less').fadeIn('slow');
return false;
});
$('a.less').click(function(){
$('.selector p:eq(1)').slideUp('slow');
$('a.less').hide();
$('a.more').fadeIn('slow');
return false;
});

Time to understand the code. You have already understood this! it's that simple. Enjoy jquery.

JQUERY Table Data selecting and adding style

We have already known How the jquery selector or the factory works. you can read again here.

Jquery Dollar Sign and parentheses Analysis

In this post we will learn how to select the table elements using the factory and edit them or add different styles to them. "SEEING IS BELIEVING", so let's look at the following table.

Jquery	Amazing	Tutorial
Try	IT	Yourself
Have	More	Fun
Find	More	queries

if you look at the html you'll see I have added no style to it. the borders, backgrounds are applied to it using jquery. Now take a look at javascript code.

$('#test3').css('border','1px solid black');
$('#test3 td').css('border','1px solid black');
$('#test3 tr').filter(':even').css('background-color','green');

$('#test33').click(function(){
$('#test3 tr').filter(':even').animate({opacity:'toggle'},'slow');
});


(':even') and (':odd') are the built-in selectors that you can use to select the even and odd elements of any parent element.
we can also use the custom selector like this.

$('#test3 td:contains(More)').css('background-color','red');
lets see the output by clicking the following button


You can see the top table columns containing more has been colored red

That's all for now. There will be more posts on DOM-manipulating

Jquery animate function Tutorial

Let us break down the jquery animate function.

.animate( properties, [ duration ], [ easing ], [ callback ] )

properties A set of CSS properties ,on which the animation will be created

duration A string or number which will calculate the longivity of the animation(optional)

easing A string determining the easing function to use for the transition.(optional)

callback A function to call when the animation is done.(optional)

Take a note that only the first parameter is the minimum requirement.

let's be practical now. I'll use an example from jquery.com

If you click on the arrow button. the colored div will move. Let's look at the code.

$("#test22").click(function(){
$("#test222").animate({"left": "+=50px"}, "slow");
});

$("#test2").click(function(){
$("#test222").animate({"left": "-=50px"}, "slow");
});


Here I've used only two parameters first and the duration parameter. we will continue the animate function in the next post using the easing and callback function

Jquery Dollar Sign and parentheses Analaysis

Jquery often uses a Dollar sign followed by parentheses $( ).

This is the jquery factory or selector. You can use any css elements inside the parentheses to select them from the html page. Then you can apply your javascript code to those elements.

For Example:
If you click this button below the following block will be colored withe a anitmation

Now let us look at the code

$(document).ready(function(){
$('#test1').click(function(){
$('#test11').hide().css('background-color','green').slideToggle('slow');
});
});

Take a close look at the first line $(document).ready

we are using the $( ) factory to select the document and when it's ready we're executing an anonymous function. Then we are selecting #test1 div by the factory so that when it is clicked it will execute another another anonymous function.

$('#test11').hide().css('background-color','green').slideToggle('slow');
This is an example of the method chaining of jquery.  And see how easy is the jquery to use!

We shall build more advanced code from the next post.