Issue with $().load

Question

I need to load content from an external page when the user clicks on a tag:

$('#anchortag').click(function() {
    event.preventDefault();
    $('#recepient').hide();
    $('#recepient').load('otherpage.php', function(data) {
        $.fancybox(data, {});
    });
});

I'm using the jQuery load() method to do so, but all I want is the fancybox to open with the external content while now, the content shows in the #recepient and in the fancybox. If I try to do: $.load (without specifying a target), it fails (the fancybox doesn't show up and I guess the function doesn't work..).

How can I only open the external content in the fancybox with load or another jquery function?

EDIT: How come this script only works under Chrome and not FF or IE?

Answer 1

I am assuming fancybox has a div some place with html in it, if that is the case you can do something like...

$('#anchortag').click(function() {
    event.preventDefault();
    $('#recepient').hide().empty();
    $.ajax({
        url:'path/to/html',
        success:function(data){
            $('#recepient').html(data);
            /* fire fancy box here ...*/
        },
        error:function(){
            alert('an error occurred')
        }
    });
});

    <div id="recepient" style="display:none"></div>

Not tested... I have done similar things with the native Jquery dialog box.

Answer 2

Use $.get(..) instead. load(..) puts the content as innerHTML of the target object, and you don't want that.