Question

Just a quick question:

I can do a .load() to a jQueryUI Dialog, which works perfect.
One problem is tho, I cannot use my close button afterwards, but the X-button the top right corner works correct.

When closed (by the X), I cannot re-open the dialog by the span-button.

Oh yeah, and the Yes button with an attached submit handler works fine as well…

What goes wrong?

<span id='editOpener'>Open dialog</span>

<div id='edit' style='text-align: center; display: none;'>Loading...</div>

<script type='text/javascript'>
  $('#edit').dialog({ modal: true, draggable: false, resizable: false, width: 900, height: 500, autoOpen: false, buttons: { 'close': { text: 'Close', click: function() { $(this).dialog('close'); } }, 'submit': { text: 'Yeah', click: function() { $(this).find('form').trigger('submit'); } } } });")
  $('#editOpener').click(function() { $('#edit').load('hi.asp?p=1&r=6'); $('#edit').dialog('open'); return false; });")
</script>

Answer 1

Try changing these lines:

$(‘#editOpener’).click(function() {

  $('#edit').load('hi.asp?p=1&r=6');
  $('#edit').dialog('open');

});

To:

$(‘#editOpener’).click(function() {

  $('#edit').load('hi.asp?p=1&r=6', function(){
     $('#edit').dialog('open');
  });

});