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