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的元素。

如果是我，我会在页面加载（隐藏）上创建对话框，然后只需在需要显示时更新消息，并使用open / close重用元素而不是重新创建它。

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

通过jquery对话框自定义警报框的问题

1 个答案: