Boîte de dialogue jQuery UI - ne s'ouvre pas après avoir été fermée

Question

J'ai un problème avec le jquery-ui dialog box .

Le problème est que lorsque je ferme la boîte de dialogue et que je clique ensuite sur le lien qui la déclenche, elle ne réapparaît pas, à moins que je ne rafraîchisse la page.

Comment puis-je rappeler la boîte de dialogue sans rafraîchir la page actuelle ?

Voici mon code :

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

Merci

Answer 1

Vous êtes en fait censé utiliser $("#terms").dialog({ autoOpen: false }); pour l'initialiser. Ensuite, vous pouvez utiliser $('#terms').dialog('open'); pour ouvrir le dialogue, et $('#terms').dialog('close'); pour le fermer.

Answer 2

Je l'ai résolu.

J'ai utilisé destroy au lieu de close function (ça n'a aucun sens), mais ça a marché.

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

Answer 3

Sur la dernière ligne, n'utilisez pas $(this).remove() utiliser $(this).hide() à la place.

EDIT : Pour clarifier, sur l'événement de clic de fermeture, vous supprimez l'élément #terms div du DOM, c'est pourquoi il ne revient pas. Vous devez simplement le cacher à la place.

Answer 4

Je crois que vous ne pouvez initialiser le dialogue qu'une seule fois. L'exemple ci-dessus essaie d'initialiser la boîte de dialogue chaque fois que l'on clique sur #terms. Cela va causer des problèmes. Au lieu de cela, l'initialisation doit se produire en dehors de l'événement de clic. Votre exemple devrait probablement ressembler à quelque chose comme ceci :

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons: { "Close": function() { $(this).dialog('close'); } },
        close: function(ev, ui) { $(this).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

Je pense qu'une fois que vous aurez résolu ce problème, cela devrait résoudre le problème d'ouverture à partir d'un lien que vous avez décrit.

Answer 5

Pour moi, cette approche fonctionne :

La boîte de dialogue peut être fermée en cliquant sur le X de la boîte de dialogue ou en cliquant sur 'Bewaren'. J'ajoute un identifiant (arbitraire) car je dois m'assurer que chaque élément html ajouté au domaine est supprimé par la suite.

$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
        title: 'Opdracht wijzigen',
        show: 'clip',
        hide: 'clip',
        minWidth: 520,
        width: 520,
        modal: true,
        buttons: { 'Bewaren': dossier_edit_form_opslaan },
        close: function(event, ui){ 
                                  $(this).dialog('destroy'); 
                                  $('#dossier_edit_form_tmp_id').remove();
               }
});