Multiple instances of Colorbox and jQuery ajax requests

Question

I have an app that's using colorbox and various ajax requests. Sometimes, I'll have an ajax request happen within the colorbox that will call another ajax request that loads outside the colorbox... It's getting really messy I feel, here's the code I have, is there a better way to be doing this? Without re-initializing colorbox so many times?

   jQuery.fn.initFunctions = function() {



        $(".overlay_box").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
            }
        });

        $(".overlay_box_inline").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            inline: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();

            }
        });     

        $(".overlay_box_inline_resize").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            scrolling: true,
            inline: true,
            title: ' ',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
                $.colorbox.resize();

            }
        });



        $('.remove').click(function(){
                var id = $(this).attr('id');
                $.ajax({
                      url: $(this).attr('href'),
                      success: function(data){
                            $.ajax({
                                  url: "/checkout/ten/"+id,
                                  success: function(data){
                                    $('#ten').html(data);
                                    $(this).initFunctions();
                                  }
                            });
                      }
                });
                return false;
        });
        $('.friends .add').bind('click', function(){
                var id = $(this).attr('id');
                $.ajax({
                      url: $(this).attr('href'),
                      success: function(data){

                            $.colorbox({
                                href: "/checkout/"+id,
                                opacity: 0.40,
                                transition: 'none',
                                speed: 200,
                                height: 480,
                                width: 700,
                                scrolling: true,
                                title: ' ',
                                overlayClose: true,
                                onComplete: function () {
                                    $.ajax({
                                          url: "/checkout/invite/"+id,
                                          success: function(data){
                                            $('#ten_friends').html(data);
                                            $(this).initFunctions();
                                          }
                                    });
                                }
                            });
                      }
                });



        });     



   };

   $(this).initFunctions();

Answer 1

One first step could be to reuse a common options object like this:

var defaults = {
  opacity: 0.4,
  speed: 200,
  overlayClose: true
};

$(".overlay_box_inline").colorbox($.extend(defaults, {
  height: 480,
  width: 700
}));

// ... more colorboxes