Why isn't my jQuery Dialog opening?

Question

I was given some code to add to an email application I'm building so that when someone clicks the 'preview' button, a dialog will pop up and display the text as it would appear in the email. I've only been programming with JavaScript for about a week now and I've done my best to research how the jQuery Dialog box works, but for the life of me I just cannot get it to open when the button is clicked.

These are the two functions I was given:

<script>
$("#loadPreviewDiv").dialog({
    autoOpen : false,
    resizable : true,
    height : 600, //adjust accordingly
    width : 600, //adjust accordingly
    modal : true,
    buttons : {
        close : function() {
            $(this).dialog("close");
        }
    },

});

function loadPreviewView() {
    document.getElementById('loadPreviewDiv').innerHTML = 'htmlBody.innerHTML';
    $("#loadPreviewDiv").dialog("open");
} </script>

And here is my button that is supposed to open the dialog:

<button type="button" onClick="loadPreviewView()">Preview</button>

I do know that the loadPreviewView() function is being called, however the dialog box just isn't popping up. What am I missing?

Answer 1

 $("#loadPreviewDiv").click(function () {
    $('#dialog').dialog({
        title: "Dialog box",
        height: 300,
        modal: true,
        open: function (event, ui) {
        },
        buttons: { "close": function() { $(this).dialog("close"); } } 
    });
 });

http://jsfiddle.net/xkRUx/2/