通过jqueryid对话框

Question

问题与自定义警告框我一直在具有相同的样式通过jQuery UI的网站的其余部分的自定义警告框。除了不会打开一次以外，它运行良好。正如我试图解决这个问题，我打破了一切如何，现在我得到这个错误：

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

以下是代码。 doAlert（）是alert（）的简单替换。后来它会有更多的功能。 show_support（）以类似于doAlert（）的方式创建对话框，除非它完美地工作。

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(); 
      } 
     }); 
} 

任何人有任何想法，我怎么搞砸了doAlert？

Answer 1

看看close方法。 doAlert似乎在做一个对话框（'destroy'），然后调用remove。 show_support只是从DOM中删除对话框。我不知道对话框方法返回的是什么，所以可能是因为DOM元素实际上并没有被删除，因此重新插入它失败 - 因为你不需要具有相同ID的元素。

如果是我，我会把创建页面加载（隐藏）对话框，当需要显示那么只需更新的消息，并使用开/关重用元素，而不是重新创建它。

<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>