jquery-ui dialog in colorbox results to Maximum call stack size exceeded error

Question

I am using jquery-ui and it's dialog functionality to display modal dialogs in my web app. It works ok.

At one use case, I have a colorbox popup window on a screen, and once user finishes his input I need to display a confirmation dialog.

Also here everything actually works thanks to error handling on all the major browsers I tried, but I worry what problems might some combination of javascript engine&browser could cause.

The error I get is call stack size overflow (Chrome shows it as Uncaught RangeError: Maximum call stack size exceeded.).

The code for the modal dialog is:

function modalDialog(dialogText, dialogTitle, okFunc, okLabel, cancelFunc, cancelLabel) {

var dialogButtons = {};

dialogButtons[okLabel] = function() {
  if (typeof(okFunc) == 'function') {
    setTimeout(okFunc, 50);
  }
  $(this).dialog('destroy');
};
dialogButtons[cancelLabel] = function() {
  if (typeof(cancelFunc) == 'function') {
    setTimeout(cancelFunc, 50);
  }
  $(this).dialog('destroy');
};

$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
  draggable: true,
  modal: true,
  resizable: false,
  width: 'auto',
  title: dialogTitle || 'Confirm',
  minHeight: 75,
  buttons: dialogButtons
});

}

The colorbox is called in javascript, and it takes embedded div from the actual page as it's content:

$(function() {
  $(".colorbox-load").colorbox({
  inline: true,
  overlayClose: false,
  href: "#popupContents",
  height: "320",
  width: "300"
  });
})

In the popup, I have a button which just opens up the confirmation dialog.

I apologize in advance as it's my first time using JSFiddle, and I wasn't able to get colorbox and dialog popup match exactly how it looks on my page (it actually pops up properly on top of the colorbox and not "in the background"). I'm not sure if this is because I had to use different versions of jquery and jquery-ui (I couldn't find same combination I am using from the pulldown) or something else.

A JSFiddle is here. If you click around the colorbox area once the "open dialog" button has been pressed you should get same error (firefox and Chrome seem to react slightly differently when to show the error).

Thank you for any suggestions!

Answer 1

It seems like the Dialog and Colorbox are fighting for the focus. Setting the trapFocus setting to false will resolve this issue. Of course it might have some side effects for your page depending on how you use it. Please consult the official documentation for details.

$(function() {
  $(".colorbox-load").colorbox({
  inline: true,
  overlayClose: false,
  href: "#popupContents",
  height: "320",
  width: "300",
  trapFocus: false
  });
})