Jquery dialog box is not working in Joomla 3

Question

Here I'm trying to show a jquery dialog box with three buttons after clicking delete button from Joomla admin side component.But the dialog box is not showing.

Here is my view.html.php

    JHtml::_('jquery.framework'); // load jquery
    JHtml::_('jquery.ui'); // load jquery ui from Joomla

script code

<script type="text/javascript">
Joomla.submitbutton = function(task){
    if (task == 'groups.cascadedelete') {
           jQuery('<p>Are you sure?</p>').dialog({
                buttons: {
                     "Cascade Delete": function() {          
                        jQuery('#cascadedelete').val('1');   
                        Joomla.submitform(task, document.getElementById('adminForm'));
                        },
                    "Delete":  function() {
                        Joomla.submitform(task, document.getElementById('adminForm'));
                        },
                    "Cancel":  function() {
                        dialog.dialog('close');
                    }
                }
            });
    }else{
        Joomla.submitform(task, document.getElementById('adminForm'));
    }   
}
</script>

If i click the button for submit, the popup is not display.I checked the console in mozilla and its says as below,

TypeError: jQuery(...).dialog is not a function

Kindly help me to solve this.