Click here to Skip to main content
Click here to Skip to main content

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

, 26 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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

License

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

Share

About the Author

altaf008bd
Software Developer (Senior)
Bangladesh Bangladesh
No Biography provided
Follow on   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150123.1 | Last Updated 26 Apr 2014
Article Copyright 2014 by altaf008bd
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid