Проблемы с настраиваемым окном предупреждения через диалог 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. Я не знаю, что возвращает метод dialog, так что может случиться так, что элемент DOM на самом деле не удаляется, и, следовательно, его повторная вставка завершается неудачно - поскольку вы не можете иметь элементы с одинаковым идентификатором.

Если бы это был я, я бы создал диалог при загрузке страницы (скрытый), а затем просто обновил бы сообщение, когда его нужно показать, и использовал бы открытие / закрытие для повторного использования элемента, а не для его повторного создания.

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