Tuesday, January 26, 2010

AJAX Using JQuery Tutorial

You may know that, JQuery is a JavaScript library that we can do smart things using small pease of code. This free and open source JavaScript Library has become the most famous JavaScript Library today because of its Lightweight, Cross-browser and CSS3 Compliant.

Using JQuery we can do thing like Document Navigating, DOM Element Selecting, Creating Animations, Event Handling and Ajax Development very easily. You can learn more about JQuery from JQuery web site.

What this post about ?

This is about a thing that we mostly want when we design web sites. I'm going to discuss how we can get that work done better and smarter using JQuery AJAX. Look at the following picture which describes the whole task, we are going to do.

Just imaging that the above picture is the structure of our web site, when we click on the links at "C", we want to load different contents to the main div in "B". If we use different web pages for all those links and load them when user clicks on a link, we are loading the content on "A" and "C" unnecessarily. That is why we should use AJAX to load the content.

First, download the following example code that I'm going to describe.

Download Source Code(Password : sara)

Open the "index.html" file in your browser and check the result by clicking links "Home", "About" and "Contact Us" on "C". Ignore the problem with last link, I'll explane that later. Now open the "index.html" using a text editor. Then you will see a code like following in the <head> </head> section.

<script src="jquery-1.3.1.min.js" type="text/javascript" ></script>

That is how you can link the JQuey to your web site, it's the same way you link a JavaScript file. Then check the following peace of code.

$(document).ready(function() { 

    //$("#main").load("home.html");
 
    $("#link1").click(function(){
        $("#main").load("home.html");
    });
 
    $("#link2").click(function(){
        $.ajax({
            url: "about.html",
            cache: true,
            beforeSend: function(){
                $("#main").slideUp("fast");
            },
            success: function(html){
                $("#main").slideDown("slow");
                $("#main").html(html);
            }
        });
    });
 
    $("#link3").click(function(){
        $.post("boo.php",  { link_id:"link3" },
        function(data){
            $("#main").html(data);
        }); 
    }); 
 
});

In JQuery we are writing events inside $(document).ready function. In the above code I have given different IDs to links and call functions when they are clicked. There I have used three different ways to get the above task done.

First look at the 5th line, there I have load the "home.html" file inside the main div when click the "Home" link (id is "link1"). That is the easiest way to do a AJAX request. Then check the 9th line. There I have load the "about.html" file inside the main div when click the "About" link (id is "link2"). This method can be used to decorate our request using effects. As above code you can use beforeSend and success functions to get that work done.

If I uncomment the 3rd line, "home.html" page will load to main div in the page load. Finally check the 23rd line, this is different than above mentioned methods. Here I have get the data in a PHP file. I have call the "boo.php" file using POST method and display the result inside main div when "Contact Us" (id is "link3") clicked. Now I think you may noticed that AJAX is simple if you use JQuery.

Tuesday, January 5, 2010

Embed a Picture to Body of Gmail Message

In this post I’m going to show you how to embed a picture to body of the message in Gmail without attaching. To get this work done you have to enable Image Inserting in Google Labs. Let’s see how we can enable this.

First log in to your account and go to Settings as following picture;

Then go to Labs section and there you can find Inserting Images. Enable the feature and save the settings. See the following screen shots to more clarifications.

If you have new interface you can directly go to Lab as follows.



Now you can see new icon in tool bar, using that we can embed images to body of the message as following picture.


This is a simple thing that most people dose not aware.