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.Using core Joomla Template only.But the dialog box is not showing.Tried with the simple dialog box.That too not displaying.

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

Answer 1

JHtml::_('jquery.ui'); will load only the core component. Dialog doesn't seem to be part of that.

You can specify which components it should load. However the only other supported component is sortable

Which means, dialog just isn't shipped with Joomla. You need to distribute and load your own copy.

That being said, you should have a look at the tooltips, popover and modals from Bootstrap 2.3. Those are shipped with Joomla and can be used for similar purposes.

Answer 2

Try this:

Also Check if Jquery Ui Script is loaded properly or not

if (task == 'groups.cascadedelete') {
           jQuery('<p>Are you sure?</p>').dialog({
           autoOpen : true,width : popWidth,modal : true,dialogClass: 'no-close',
            draggable: true, resizable: true, position: [306,105],
            buttons : {


    "Cancel":  function() 
    {
    $(this).remove();
    or
    $(this).dialog("close");
    }

Answer 3

This works for me

default.php

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal"><img src="<?php echo JURI::root();?>delete14.png" alt="<?php echo JText::_( 'GROUPL_DELETE_ICON' ); ?>" /></a>
    <h3><?php echo JText::_('GROUPL_DELETE')?></h3>
  </div>
  <div class="modal-body">
    <p><?php echo JText::_('SELECT_DELETE_METHOD')?></p>
  </div>
  <div class="modal-body">
    <a href="#" class="btn" onclick="cascadeDelete();"><?php echo JText::_('CASCADE_DELETE')?></a>
    <a href="#" class="btn"  onclick="Delete();"><?php echo JText::_('DELETE')?></a>
    <a href="#" class="btn"  onclick="cancelDelete();"><?php echo JText::_('GENERAL_CLOSE')?></a>
  </div>
</div>

validation.js

Joomla.submitbutton = function(task){
if (task == 'cascadedelete') {
    jQuery('#myModal').modal('show');
}}