web-dev-qa-db-fra.com

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

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 sur le lien qui la déclenche, il ne réapparaît pas à moins que je ne rafraîchit la page. 

Comment puis-je rappeler la boîte de dialogue sans actualiser la page réelle. 

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

javascriptjqueryjquery-uimodal-dialogjquery-ui-dialog
79
David Bonnici

Salut les gars, j'ai réussi à le résoudre. 

J'ai utilisé la fonction de destruction à la place de la fermeture (ça n'a aucun sens) mais ça a fonctionné!

$(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' });
});
14
David Bonnici

Vous êtes en fait censé utiliser $("#terms").dialog({ autoOpen: false }); pour l'initialiser . Vous pouvez ensuite utiliser $('#terms').dialog('open'); pour ouvrir la boîte de dialogue et $('#terms').dialog('close'); pour la fermer.

110
Shane Fulmer

sur la dernière ligne, n'utilisez pas $(this).remove(), utilisez plutôt $(this).hide().

EDIT: Pour clarifier, lors de l’événement de clic rapproché, vous supprimez le #terms div du DOM, c’est pourquoi il ne revient pas. Vous avez juste besoin de le cacher à la place.

12
Darko Z

Je pense que vous ne pouvez initialiser le dialogue qu’une fois. L'exemple ci-dessus tente d'initialiser la boîte de dialogue chaque fois que vous cliquez sur #terms. Cela causera des problèmes. Au lieu de cela, l'initialisation doit se produire en dehors de l'événement click. Votre exemple devrait probablement ressembler à 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 le problème, cela devrait résoudre le problème de l'ouverture du lien décrit précédemment.

9
26design
 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>
3
Joanna Avalos

C'est un super vieux fil, mais comme la réponse dit même "Cela n'a aucun sens", j'ai pensé ajouter la réponse ...

La publication originale utilisait $ (this) .remove (); dans le gestionnaire de fermeture, cela supprimerait en fait la div de dialogue du DOM. Une nouvelle tentative d’initialisation d’une boîte de dialogue ne fonctionnerait pas car la div avait été supprimée.

Utiliser $ (this) .dialog ('destroy') appelle la méthode destroy définie dans l'objet de dialogue qui ne la supprime pas du DOM.

De la documentation:

détruire()

Supprime complètement la fonctionnalité de dialogue. Cela ramènera l'élément à son état >> pre-init . Cette méthode n'accepte aucun argument.

Cela dit, ne détruisez ou supprimez à la fermeture que si vous avez une bonne raison de le faire.

3
crad

Pour moi cette approche fonctionne: 

La boîte de dialogue peut être fermée en cliquant sur le X dans 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 dom 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();
               }
});
3
Zilverdistel
$(this).dialog('destroy');

travaux!

2
Benedikt

.close () est plus général et peut être utilisé en référence à plus d'objets. .dialog ('fermer') ne peut être utilisé qu'avec des dialogues

1
John

J'utilise le dialogue comme un navigateur de fichiers de dialogue et un téléchargeur puis je réécris le code comme ceci

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});

tout semble bien fonctionner.

1
edib

J'ai eu le même problème avec la boîte de dialogue superposition jquery-ui - cela ne fonctionnerait qu'une fois, puis m'arrêterais à moins de recharger la page. J'ai trouvé la réponse dans l'un de leurs exemples -
Plusieurs calques sur une même page
flowplayer_tools_multiple_open_close
- Qui l'aurait cependant? :-) - 

le paramètre important semblait être 

oneInstance: false

alors, maintenant je l'ai comme ça - 

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'Apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

et tout fonctionne bien

espérons que cela aide quelqu'un

O.

1
Oleg Ivanov

La documentation de jQuery contient un lien vers cet article ' Utilisation de base de la boîte de dialogue de l'interface utilisateur jQuery ' Qui explique cette situation et comment la résoudre.

0
Barka