On my web page I have a button that opens a modal jQuery dialog. The code that runs when the button is clicked is as follows:
$('#main-onoffline-container').append('<div id="dialog-modal-a"></div>');
$("#dialog-modal-a").dialog({
title:'Add Tags'
, autoOpen: false
, modal: true
, height: 540
, width:700
, close: function (ev, ui) { alert('closing'); }
,open: function() {
$("#dialog-modal-a").html('Some html will go here')
}
});
$("#dialog-modal-a").dialog("open");
As you can see, I am adding a div to the DOM, then calling the dialog method against the newly added div.
The dialog opens fine and displays the html plus the X close button. However, when I hit the X button to close the dialog it does not close. The console shows the following error from jquery-1.6.4.min.js:
Uncaught RangeError: Maximum call stack size exceeded
Anyone know what the problem is?
UPDATE:
After a lengthy session I have detected that the order of certain js libraries are influencing this:
If I include files as follows then the problem appears:
<script src="../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.7.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
If I included files as follows then the problem disappears:
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.7.min.js" type="text/javascript"></script>
This seems really strange – I thought that you should include the core jQuery stuff right at the top of the file?
(The validate lib is Jörn Zaefferer plugin)
I have raised a different question to take this forward: jQuery library include order causes error
Best Answer
The problem was due to a js library conflict - please see my final comments in the main question