Click here to Skip to main content
15,867,765 members
Articles / Programming Languages / Javascript
Tip/Trick

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
26 Apr 2014CPOL1 min read 29.3K   1  
This tip will describe a simple way to resolve "too much recursion" error when working with multiple modal dialogs

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.

Image 1

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

C#
    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).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --