CODEWITHSUNDEEP
jqueryjquery-ui-dialog
Journeyman
Journeyman

Reputation: 10281

jQuery UI Dialog will not close

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

Upvotes: 3

Views: 8427

Answers (4)

BraveNewMath
BraveNewMath

Reputation: 8333

I had a similar error, .dialog('destroy') did the trick for me. There may still be a js version mismatch.

Upvotes: 0

Journeyman
Journeyman

Reputation: 10281

The problem was due to a js library conflict - please see my final comments in the main question

Upvotes: 1

Terry
Terry

Reputation: 14219

Not sure why you're appending the dialog to the page and opening it right away. I assume you've left out code. Generally with this plugin want you want to do is:

Create the dialog container in the HTML:

<div id="dialog-modal-a"></div>

Initialize it on $().ready() (which hides it by default when autoOpen: false) then open it on an event or page load:

$().ready(function() {
    $("#dialog-modal-a").dialog({
        title:'Add Tags',
        autoOpen: false,
        modal: true,
        height: 540,
        width:700,
        close: function (ev, ui) { alert('closing'); }
    });

    $('#somethinkToClick').click(function() {
        $('#dialog-modal-a').html('some html');
        $("#dialog-modal-a").dialog("open");
    });

    /* OR
    $('#somethinkToClick').click(function() {
        $('#dialog-modal-a').html('some html');
        $("#dialog-modal-a").dialog("open");
    });
    */
}

Upvotes: 0

Microfed
Microfed

Reputation: 2890

Try to pull out of the function $.dialog the closing event handling:

$( ".selector" ).bind( "dialogclose", function(event, ui) {
  ...
});

Upvotes: 0

Related Questions