Getting jQuery dialog to work in MVC4.5

[Tony Wright]

Hi all,

 

I am having trouble getting the jQuery dialog to popup in an MVC4.5 view.

 

Basically I have some divs set up:

 

<div id="DeleteConfirmation" style="visibility:hidden">

<div id="dialog-confirm" title="Delete Confirmation?">

       <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0
7px 20px 0;"></span>

    <span id="DeleteConfirmationText"></span>

    </p>     

</div>

</div>

 

I have a confirm delete function, which is executed by clicking on an image
button (so document is already ready)

 

function ConfirmDeleteLineItem(itemId, currentLineItem) {

 

        $("#DeleteConfirmationText").html("Are you sure you want to delete
this item?");

 

        $("#dialog-confirm").dialog({

            resizable: false,

            height: 200,

            width: 600,

            modal: true,

            buttons: {

                "Delete item": function () {

                    DeleteLineItem(itemId, currentLineItem);

                    $(this).dialog("close");

                },

                Cancel: function () {

                    $(this).dialog("close");

                }

            }

        });

 

    }

 

The problem is that it can't execute the .dialog method.

 

Microsoft JScript runtime error: Object doesn't support property or method
'dialog'

 

Within the head section of the page, when I view source, it has:

        <script src="/Scripts/jquery-1.7.1.js"></script>

        <script src="/Scripts/jquery-ui-1.8.20.js"></script>

 

And the debugger says that jquery-1.7.1.js and jquery-ui-1.8.20.js are
loaded.

 

Is there something I'm missing? 

 

Regards,

Tony