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