jQuery's Ajax methods are great. They are easy to use. You passed the data to server and in callback method you can use the data which server provided for you. This Asynchronous mechanism is great but sometimes you need to access some variables which you set in your main method before callback. Here we are going to discover how it is possible.

Lets divide it to three parts

1. Simple Ajax request
2. Add predefined variable to callback
3. Real world example

Lets start with a simple callback and then add some predefined variable directly to callback from main method.

Simple Ajax request

There is nothing complicated about this, if you are not familiar with jQuery Ajax you can check it at http://docs.jquery.com/Ajax .

function simpleRequest(){
    $.get( 'service.php',
            function(data){
                $('#response1').html(data); 
            }
        );
} 
   

then we call this method simply which will show the result in a div with id 'response1'.

<div onclick="simpleRequest();">click here to see simple request!</div>
<div id='response1'></div> 
   

Add predefined variable to callback

Here we are going to send content of the div directly to callback without sending it to server. The solution is using anonymous method in our code.

function requestWithPassedVariable(obj){
    var content = $(obj).html();
    $.get( 'service.php',
            function(data){
                $('#response2').html(data+':'+content); 
            }
        );
} 
   

As you see we first assign it to a variable 'content' and then used that variable in our defined anonymous method.

<div onclick="requestWithPassedVariable(this);">click to see my content in directly callback!</div>
<div onclick="requestWithPassedVariable(this);">click to see mine too!</div>
<div id='response2'></div> 
   

Real world example

Imagine that you loaded a category to your page including : books and sites. Now you want to load the items whenever user click on each item. Also we want to load each category items one time for better performance. Here is the code

$.list = function(obj,type){
    var obj = $(obj);
    if(obj.data('list'))
        return $.display(obj);
    $.getJSON( 'service.php?type='+type,
            function(list){
                // store data to prevent request for loaded data
                obj.data('list',list);
                // display list
                $.display(obj);
            }
        );
}
$.display = function(obj){
    $('#listResult').html('');
    $.each(    obj.data('list'),
            function(){
                $('#listResult').append(this+'<br/>');
            }
        )
} 
   

What we did was storing each category's response in itself by using .data('list',list). The next time, when we hit the 'List Books' it will not send a new request instead it will load the data locally from its .data('list'). This magic is done by anonymous method.

<div onclick="$.list(this,'books');">List Books</div>
<div onclick="$.list(this,'sites');">List WebSites</div> 
   

• List Books
• List WebSites

Tags: Ajax | JavaScript | jQuery