Problems with custom alert box via jqueryid dialog

Question

I've been working on a custom alert box that has the same style as the rest of the website via jquery-ui. It was working well except that it wouldn't open more than once. As I was trying to fix that, I broke the whole thing some how, and now I get this error:

Node cannot be inserted at the specified point in the hierarchy" code: "3

Below is the code. doAlert() is a simple replacement for alert(). Later it will have more features. show_support() creates dialog box in a similar way to doAlert(), except that it works perfectly.

function doAlert(msg, title) {
    var alert_box = $('body').append('<div id="alert_box" class="centered" style="padding:.5em;vertical-align:middle;display:none;"><p>' + msg + '</p></div>');

    title = typeof(title) != 'undefined' ? title : 'Message';
    alert_box.dialog({
     modal: true,
     title: title,
     width: 400,
     height: 150,
     resizable: false,
     overlay: {
      opacity: 0.5,
      background: 'black'
     },
     buttons: {
      'Ok': function() {
       $(this).dialog('close');
      }
     },
     close: function() {
      $(this).dialog('destroy').remove();
     }
    });
}

function show_support() {
    var dialog = $('body').append('<div id="dialog_support" style="display:none;"></div>');

    $('#dialog_support').load('/supporttracker', {action:'get_dialog'})
     .dialog({
      modal: true,
      title: "Support",
      width: 620,
      height: 400,
      buttons: {
        "Send": function() {
         if (!$('#issue_message').val()) {
          doAlert('Your message cannot be blank. Please enter your message.');
          return;
         }
         $.ajax({
            type: 'POST',
            url: '/supporttracker',
            data: 'action=add_simple&'+$('#issue').serialize(),
            success: function(msg){
            doAlert('Thank you. We will get to your question/issue as soon as we can. Usualy within 24 hours.');
            $('#dialog_support').dialog('close');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            doAlert('An error accured: '+textStatus);
            }
         });
        },
    "Cancel": function() {$(this).dialog('close');}
       },
      close: function() {
       $(this).remove();
      }
     });
}

Anyone have any ideas of how I messed up doAlert?

Answer 1

Look at the close method. doAlert seems to be doing a dialog('destroy'), then calling remove on it. show_support is simply removing the dialog from the DOM. I don't know what the dialog method returns so it may be that the DOM element isn't actually getting removed and thus reinserting it fails -- since you can't have to elements with the same id.

If it were me I'd create the dialog on page load (hidden), then simply update a message when it needs to be shown, and use open/close to reuse the element rather than recreating it.

<div id="alert_box" class="alert-dialog" style="display: none;">
   <p id="alert_message">An error occurred.</p>
</div>

<script type="text/javascript">
    $(function() {
        $('#alert_box').dialog({
            modal: true,
            width: 400,
            height: 150,
            resizable: false,
            overlay: {
                opacity: 0.5,
                background: 'black'
            },
            buttons: {
                'Ok': function() {
                        $(this).dialog('close');
                      }
            }
        });
    });

    function doAlert( msg, title )
    {
        $('#alert_message').html(msg);
        $('#alert_box').attr( 'title', title )
                       .dialog('open');
    }

</script>