JQUERY dialog Uncaught Error: cannot call methods on dialog prior to initialization

Question

I have the following javascript which opens a JQUERY Dialog box which contains a partial view:

html

<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>

javascript

    $(function () {
        $('#dialog').dialog({
            autoOpen: false,                    
            title: 'Address Lookup Tool',
            modal: true,
            show: {
                effect: "fade",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            },                    
            open: function (event, ui) {
                //Load the AddressLookup action which will return 
                // the partial view: _AddressLookup                        
                $(this).load("@Url.Action("AddressLookup")");
            }                    
        });

        $('#addressLookupBtn').click(function () {                    
            $('#dialog').dialog('open');
        });
    });

When I first open the page and click the addressLookupBtn the dialog window opens up with the partial view, I then close it but the next time I try to open it I get:

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

I've done looking around at this error message and it seems to be related to the $(this) I am using to load the partial view and I have tried declaring a variable which will keep the context like so:

var $this = $(this); 

But im not really sure where this should go, I've tried putting it in the click function and in the open function and calling it rather than $(this) but It gives me the same error.

edit

If I add this:

$('#addressLookupBtn').click(function () {
            $('#dialog').dialog().dialog('open');
        });

The dialog will open and close as expected, but only do the fade effect the first time, from then on it will pop in and out.

Answer 1

The problem is that with the .load ajax call, you are replacing all content inside the DIV of the dialog, even things added by jQuery for it to work.

Add and empty DIV inside the dialog then call .load on that.

<div id="dialog" title="Address Finder">
    <div style="overflow: hidden;"></div>
</div>

Then the JS:

$('> div', this).load("@Url.Action("AddressLookup")");

Answer 2

I needed to initialize a new dialog each time I clicked the botton, this did the trick:

<script type="text/javascript">

$(function () {


    $('#addressLookupBtn').click(function () {
        $('#dialog').dialog({
            autoOpen: false,
            title: 'Address Lookup Tool',
            modal: true,
            width: 700,
            show: {
                effect: "fade",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            },
            open: function (event, ui) {
                //Load the AddressLookup action which will return
                // the partial view: _AddressLookup
                $(this).load("@Url.Action("AddressLookup")");
            }
        }).dialog('open');
    });
});

</script>