optimizing colorbox and adding extra jquery

Question

I have two problems

1. I am trying to open a jQuery colorbox and it is very slow. The reason is I am trying to get html content from a different page (I cannot use iframe because I just need a part of this page). The following code works but it takes time after the button is clicked:

   $(document).ready(function() {
       $(".cart-link a").click(function(event) {
           $(this).colorbox.close();
       });
   
   
       $(".rest-menuitem a").click(function(event) {
           event.preventDefault();
           var result = null;
           var sURL = $(this).attr("href");
           $.colorbox({
               html: function() {
                   $.ajax({
                       url: sURL,
                       type: 'get',
                       dataType: 'html',
                       async: false,
                       success: function(data) {
                           result = data;
                       }
                   });
                   return $(result).find('.product');
               },
               width: '650px',
               height: '10px',
               onComplete: function() {
                   $(this).colorbox.resize();
               }
           });
   
       });
   
   });
   

   I want to know if there is a alternative way to do it. I dont mind if the colorbox popup and then takes time to load the content. The above version can be fount at this url (http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products).

2. I am also trying to close the colorbox when a user clicks on add to cart. But some reason it is not triggered. $(".cart-link a").click is not triggered when I click on add to cart. Is there a special way to add jquery to colorbox content?

Answer 1

Try this instead:

$(".rest-menuitem a").colorbox({
    href: function(){ 
        return $(this).attr('href') + ' .products';
    },
    width: '650px',
    height: '10px',
    onComplete: function() {
        $(this).colorbox.resize();
    }
});

ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.