ZendX/Jquery ui - open dialog box on click

Question

Hi,

When a user clicks on the button delete, I want a dialog box to appear, to confirm the delete. I can get the dialog box to appear on page load, but am running into problems getting it to appear on a button click instead:

<?php echo $this->dialogContainer(
'dialog',
'Are you sure you want to delete this postcode?',
array(
    'autoOpen'      => false,
    'draggable'     => true,
    'modal'         => true,
    'resizable'     => true,
    'title'         => 'Confirm Delete',
    'closeOnEscape' => true,
    'buttons'   => array(
        'Delete' =>  new Zend_Json_Expr('function() {
            document.location=\''.$this->url(array(
                'module'     => 'crm',
                'controller' => 'postcode',
                'action'     => 'delete' 
            ),"", true) .'\' 
        }'),
        'Cancel' => new Zend_Json_Expr('function() {
            $(this).dialog(\'close\');
        }')
    ),
),

); ?>

Is there something in the dialogContainer that allows this, or do I need to create a separate function, which I load separately?

Thanks.

Answer 1

What I've done in the past (using straight jQuery UI, without zend) is to set up an onclick event that calls a function to open the dialog:

<a onclick='showDialog();'>clickable item</a>

Initialize the dialog in the document ready:

var $demoDialog;
$(document).ready(function() {
  $demoDialog= $("#demoDialog").dialog({
    autoOpen: false,
    draggable: true,
    resizable: true
    title: 'Demo Dialog'
  });
});

And add the function to open it:

function showDialog() {
  if (!$demoDialog.dialog('isOpen')) {
    $demoDialog.dialog('open');
  }
}

Answer 2

Try with it

       $this->jQuery()->addOnLoad("
          $('a').click(function(){                    
             $('#dialog').dialog('open');
          });
       ");