Jquery .load() question

JavaScript
1

Hello,

I am working on a project and I am attempting to implement some basic jquery/ajax functionality.

This is the code that I currently have but my problem is that the fancybox loads before the ajax request is complete and does not display correctly. Is there a way to detect when the $(‘#ajax-content’).load(url); event is complete and then launch the fancybox? I have been looking through the documentation and searching but I can’t find anything.

Any suggestions?


$(document).ready(function() {
	$('.grid-wrapper a').click(function(e) {
		var url=$(this).attr('href');
		url = url + ' div.distributor-info';
		$('#ajax-content').load(url);
		e.preventDefault();
		$.fancybox ({
			'titlePosition'		: 'inside',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'href' : '#ajax-content'
		})
	});
});
2

Figured it out, I didn’t understand was the purpose of the callback function was :slight_smile:

$(document).ready(function() {
	$('.grid-wrapper a').click(function(e) {
		var url=$(this).attr('href');
		e.preventDefault();
		url = url + ' div.distributor-info';
		$('#ajax-content').load(url, function() {
			$.fancybox ({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'href' : '#ajax-content'
			});
		});
	});
});