Conflict between ajax callback and jQuery UI dialog

Question

I have a button that triggers an AJAX callback with the form api like so :

$form['show_modal'] = array(
 '#type' => 'submit',   
 '#value' => t('Some crazy text'),
 '#ajax' => array(
     'callback' => 'myCallback',
     'wrapper' => 'myWrapper',      
 ),
 '#suffix' => '</div>',
);

I then do some stuff and return my new form and display it (working).

 return $form['myNewForm'];

I want to display it in a custom jQueryUI dialog, but when I do that my AJAX callback doesn't work anymore ...

 //On click, open modal
 $('#showModale').click(function(){$('#myWrapper').dialog("open");});
 //Modal itself
 $("#myWrapper").dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 300
  },
  hide: {
    effect: "blind",
    duration: 300
  },
  height: 400,
  width: 1000,
  modal: true,
  resizable: false,
  draggable: false,
});

Any ideas about it ?

Answer 1

a simpler approach might be to include the form in a custom block, and set it's css to match the modal design you want but set the initial block display to none. Then use an onclick to show the block using whatever transition you want