Problèmes avec la boîte d'alerte personnalisée via la boîte de dialogue jqueryid

Question

J'ai travaillé sur une boîte d'alerte personnalisée qui a le même style que le reste du site Web via jquery-ui. Cela fonctionnait bien, sauf qu'il ne s'ouvrirait pas plus d'une fois. Comme je tentais de résoudre ce problème, je me suis cassé la chose d'une façon, et maintenant je reçois cette erreur:

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

est sous le code. doAlert() est un remplacement simple pour alert(). Plus tard, il aura plus de fonctionnalités. show_support() crée une boîte de dialogue de la même manière que doAlert(), sauf qu'elle fonctionne parfaitement.

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

Quelqu'un at-il une idée de comment j'ai foiré doAlert?

Answer 1

Regardez la méthode close. doAlert semble faire une boîte de dialogue ('détruire'), puis appelle remove. show_support supprime simplement la boîte de dialogue du DOM. Je ne sais pas ce que retourne la méthode de dialogue, il se peut donc que l'élément DOM ne soit pas supprimé et que la réinsertion échoue donc - puisque vous ne pouvez pas avoir des éléments avec le même identifiant.

Si c'était moi, je créerais la boîte de dialogue sur le chargement de la page (caché), puis simplement mettre à jour un message quand il doit être affiché et utiliser open/close pour réutiliser l'élément plutôt que de le recréer.

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