Resolve Too Much Recursion Error when Using Jquery Colorbox Plugin under a Jquery Modal Dialog

Introduction

Few days ago, I faced a problem when applying jquery colorbox inside a modal dialog. It was throwing "too much recursion" error which I could see in firebug console in firefox. I did some research to fix the issue, so thought of sharing the solution as it might save time for someone who is facing the same problem.

Background

I added a jquery colorbox plugin (it's used to show image gallery, etc.) inside a jquery modal dialog. Then when I clicked on an image from the modal dialog, it opens another modal window to see all the images with previous, next and close links. When I click on any of the links, it throws the error, the screenshot is given below.

I did some research and found that the problem is related to event triggering. When I click on the prev / next / close link, the event is propagating recursively between those 2 opened dialogs.

The solution is very simple, close the parent modal dialog when the colorbox plugin is loaded and then open the parent modal dialog when the colorbox is closed. The sample code is given below.

Using the Code

    var colorbox_params = {
        photo:true,
        reposition: true,
        scalePhotos: true,
        scrolling: false,
        previous: '<i class="icon-arrow-left">',
        next: '',
        close: '×',
        current: '{current} of {total}',
        maxWidth: '100%',
        maxHeight: '100%',
        onOpen: function () {
            document.body.style.overflow = 'hidden';
        },
        onClosed: function () {
            $("#dvContent").dialog('open');
            document.body.style.overflow = 'auto';
        },
        onComplete: function () {
            $("#dvContent").dialog('close');
            $.colorbox.resize();
        }
    };
    $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
    if ($("#cboxLoadingGraphic .icon-spinner").length <= 0)
    $("#cboxLoadingGraphic").append(""); //let's add a custom loading icon

The above code is used to bind the jquery colorbox plugin with form elements. There, I have closed the parent modal in "onComplete" event and then open it in "onClosed" event (which fires when gallery / colorbox dialog is closed).