SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    USA
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery .load() question

    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?

    Code:
    $(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. #2
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    USA
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured it out, I didn't understand was the purpose of the callback function was

    Code:
    $(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'
    			});
    		});
    	});
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •