jQuery: Add variables to Ajax Callback

Written by Arash Karimzadeh

Tuesday, 30 December 2008 19:24

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

Simple Ajax request
Add predefined variable to callback
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'.

onclick="simpleRequest();">click here to see simple request!

id='response1'>

click here to see simple request!

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.

onclick="requestWithPassedVariable(this);">click to see my content in directly callback!

onclick="requestWithPassedVariable(this);">click to see mine too!

id='response2'>

click to see my content in directly callback!
click to see mine too!

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+'
');
}
)
}

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.

onclick="$.list(this,'books');">List Books

onclick="$.list(this,'sites');">List WebSites

Click to:

List Books
List WebSites

Tags: Ajax | JavaScript | jQuery

Last Updated on Tuesday, 20 January 2009 15:56