JQuery Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Question

I am suddenly getting this error from jQuery :

Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Plugins

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

jQuery code

I am getting those messages in the following function:

$(document).ready(function() {
  if ($('#results').html().length != 0) {
    alert('has information');

    $('#dialog').dialog({
      modal: true,
      buttons: {
        Ok: function() {
          // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed,
          // however I do not see the OK button and no errors 
          $(this).dialog('close');
        }
      }
    });
  } else {
    alert('has no data');
  }
});

HTML

<div id="dialog" title="Server Response">
  <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span>
    <label id="results">${results}</label>
  </p>      
</div>

Answer 1

I had a similar problem when opening a dialog with a partial layout in asp.net MVC. I was loading the jquery library on the partial page as well as the main page which was causing this error to come up.

Answer 2

Looks like your buttons are not declared correctly (according to the latest jQuery UI documentation anyway).

try the following:

$( ".selector" ).dialog({ 
   buttons: [{ 
      text: "Ok", 
      click: function() { 
         $( this ).dialog( "close" ); 
      }
   }]
});

Answer 3

Try this - it works for me:

$(".editDialog").on("click", function (e) {
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Office',
        autoOpen: false,
        resizable: false,
        height: 450,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(this).load(url);
        },
        close: function (event, ui) {
            $("#dialog-edit").dialog().dialog('close');
        }
    });

    $("#dialog-edit").dialog('open');
    return false;
});

Hope it will help you