-1

When I update to new jQuery(v2.1) and jQuery UI (v1.11), I began to recieve error: cannot call methods on dialog prior to initialization; attempted to call method 'close' Also, dialog.dialog stopped working overlay.

Code function:

function ShowPopup(element, restCon, restLay, url) {
$(element).dialog({
    autoOpen: false,
    resizable: false,

    modal: true,
    open: function () {
        dialogs.push(this);
        //other function
    },
    close: function () {
        $(this).dialog('destroy').empty();
        $(this).remove();
        //other function
    },
    width: 250,
    height: 320,
    closeOnEscape: true,
    title: "Show ",
    position: {
        my: "center",
        at: "center",
        of: $("container")
    },
    buttons: [
        {
            text: "Close",
            click: function () {
                $(this).dialog("close");
            }
        }
    ]
  });
  $(element).load(url, function () {
      //other element
  });
}

second function:

function CreatePopup(link, contId, restore, url) {
var target = $(link).not(".details-link");
if (target.length > 0)
{
    target.addClass("details-link");
    target.click(function(){
            ShowPopup(
                '#' + contId,
                restore,
                '<div id="'+ contId +'"></div>',
                url + $(this).attr('data-id')
            );
    });
 }
 }

call function:

$(function () {
    var count = '@Model.Count';

    setCountToSubTabjQuery($("#client-projects-@guid").closest(".tabs-  view").find('.tab-link.tab-link-project').children('.number'), count);

    CreatePopup('.project-Name',
                'project-info-details-popup-container-@guid',
                '#containerProject',
                '/Project/Details?id=');
});

HTML: 

<div class="details-Item project-Name" data-id="@Model[i].ID">@Model[i].Project</div>
ximet
  • 1,106
  • 2
  • 9
  • 15

1 Answers1

0

The code you posted doesn't contain the lines that actually open your dialog, so my guess is that you're doing that somewhere else. That's most likely what leads to the error.

The problem is that you're calling .dialog.destroy() and .remove() in the close function handler. That call destroys the widget and removes the HTML element from the DOM. However, the HTML element is still alive in memory, since you're saving a reference to it in the variable myDialog. A subsequent call to close will then throw the exception you're receiving (or any widget method).

Here's a fiddle duplicating the problem; simply close the dialog and attempt to reopen it: http://jsfiddle.net/xsspx7d7/

Now, in order to handle this:

  • The simplest workaround is to remove the variable myDialog entirely and just use the selector $('#add-edit-' + id) everywhere. That way, once the dialog was destroyed, the selector will simply not match anything, and not throw any errors.

  • If you have the opportunity, a more flexible and resilient solution would be to rework the lifecycle of your dialog, and get the close handler to get rid of the destroy and remove function calls.

blgt
  • 8,135
  • 1
  • 25
  • 28
  • ok, but if ('#add-edit-' + id) passed as a parameter in function? And there also calling .dialog.destroy() and .remove() in the close function – ximet Aug 28 '14 at 13:11
  • Don't forget `$` -- the jQuery variable. `('#id')` returns a string, `$('#id')` returns the jQuery element selected by that string. Inside the `close` handler, though, you can just refer to it as `$(this)` – blgt Aug 28 '14 at 13:17
  • I using in my function just refer to it as $(this), but all the same not working. – ximet Aug 28 '14 at 13:24
  • What is doing? My function throw same exception – ximet Aug 28 '14 at 17:07
  • 1
    There's not enough information for me to be any more specific; perhaps you could edit the question to contain less boilerplate and more of the relevant callbacks – blgt Aug 28 '14 at 18:28