Jquery load() and colorbox() together

Question

I am trying to load a part of the page using jQuery load function and display it using colorbox. I am currently using

       $(document).ready(function()
       {
          $(".rest-menuitem a").click(function(event) 
          {
                event.preventDefault();
                var elementURL = $(this).attr("href");
                $.colorbox({ html: $.load(elementURL+ " .product" ) , width:'1000px',height:'80%', href: finalURL);
});
});

This is not working because we need to have a selector for load function. Is there a way to solve my problem using load? If not is there a alternative solution?

Answer 1

I think what you looking after is the .get() method. It loads data from the specified url and executes a callback when data is available. You can then filter the received html yourself and use your colorbox plugin.

Something like this:

$(document).ready(function() {
    $(".rest-menuitem a").click(function(event) {
        event.preventDefault();
        $.get($(this).attr("href"), function(data) {
            $.colorbox({
                html: $(data).find('.product'),
                width: '1000px',
                height: '80%',
                href: finalURL);
            });
        });;
    });
});

Answer 2

You can either start opening the colorbox before or after the ajax information returns. Before probably makes more sense for the user, after is easier to adapt your code:

$(document).ready(function()
{
    $(".rest-menuitem a").click(function(event) 
    {
        var elementURL = $(this).attr("href");
        var $html = $('<div />');
        $.when( $html.load(elementURL+ " .product" ) ).done(function(){
            $.colorbox({ html: $html.html() , width:'1000px',height:'80%', href: finalURL);
        });
        event.preventDefault();
    });
});

When you click, this will ajax in your content to a div which is unattached to the DOM. When that ajax completes it will fire a colorbox and populate it with the contents of the homeless div. Eloquent? no. But it's the closest solution to what you're already doing.

Answer 3

It looks like, from your question, that you are trying to load part of an external page into a colorbox. I didn't think that was possible with $.get().

I had to do this for a client and this is the solution I came up with:

$('.popup-link').click(function(e) {
    e.preventDefault();

    var url = $(this).attr('href').replace('#', ' #');

    $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="ajax-load-element" style="padding: 20px;"></div></div>');

    $('#ajax-load-element').load(url, function() {
        $.colorbox({
            href: '#ajax-load-element',
            width: 600,
            height: 400,
            inline: true,
            opacity: .7
        });
    }); 
});

This will automatically separate the element within the URL, as required by the $.load() function.

This means that you can maintain graceful degradation by using URLs like this in your tags:

/test.html#div

Since the JS will automatically add a space before the #div, as required by $.load().