2011-04-19 6 views
0

Le concept semble assez simple, mais j'ai beaucoup de problèmes pour l'exécuter.Jquery UI Close Dialog & Ouvrir une nouvelle boîte de dialogue

Je dois fermer la boîte de dialogue en cours et en ouvrir une autre. Il ferme le #imageModal, mais n'ouvre pas #uploadModal.

Des suggestions?

Edit: Ajout de la #uploadModal

$("#imageModal").dialog({ 
    autoOpen: false, 
    height: 500, 
    width: 500, 
    modal: true, 
    closeOnEscape: true, 
    resizable: false, 
    buttons: { 
     'Upload Image': function() { 
      // CLOSE 1 DIALOG AND OPEN ANOTHER 
      $(this).dialog('close'); 
      $('#uploadModal').dialog('open'); 

     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    }, 
    close: function() { 
     $(this).dialog('close'); 
    } 
}); 


$("#uploadModal").dialog({ 
    autoOpen: false, 
    height: 500, 
    width: 500, 
    modal: true, 
    closeOnEscape: true, 
    resizable: false, 
    buttons: { 
     'Upload Image': function() { 


     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    }, 
    close: function() { 
     $(this).dialog('close'); 
    } 
});   
+0

pouvons-nous voir le HTML/JS pour le #uploadModal? :) Aussi, assurez-vous que $ (this) n'est pas le bouton sur lequel vous avez cliqué mais la boîte de dialogue elle-même lorsque vous appelez l'événement .dialog ('close') ... – pixelbobby

+0

@pixelbobby Ajout du fichier #uploadModal html et $ (this) .dialog ('close') fonctionne correctement, il n'ouvre pas le #uploadModal, merci! –

+0

Thx. En regardant votre code, il semble que la recommandation de Christian ci-dessous fonctionnerait. Assurez-vous de le marquer comme la réponse si c'est le cas :) – pixelbobby

Répondre

2

Utilisez la fonction de rappel qui est exécutée lorsque la boîte de dialogue a terminé sa tâche.

[...] 
'Upload Image': function() { 
       // CLOSE 1 DIALOG AND OPEN ANOTHER 
       $(this).dialog('close', function() { 
        $('#uploadModal').dialog('open'); 
       }); 

}, 
[...] 
+0

Merci pour la suggestion, mais la solution n'a pas fonctionné. Il a fermé le dialogue en cours mais n'a pas ouvert le #uploadModal. Je l'ai essayé avec une simple alerte ("TEST"); et ça n'a pas marché non plus. –

+0

est-ce qu'il dit quelque chose dans la console de débogage? Une autre chose, avez-vous déclaré le $ (document) .ready (function() {...}); avant toutes ces instructions? – Cristian

+0

Oui, j'ai déclaré le $ (function() {...}); avant tout. Le #imageModal s'ouvre et se ferme parfaitement, mais n'ouvre pas #uploadModal à la fermeture et je n'ai pas d'erreurs dans le journal du débogueur lié à cela. –

1

Hmm, avez-vous changé l'ordre de fermeture et ouvert? Disons, d'abord ouvrir le dialogue suivant, puis ferme le premier?

1 - Ceci;

// CLOSE 1 DIALOG AND OPEN ANOTHER 
    $(this).dialog('close'); 
    $('#uploadModal').dialog('open'); 

2 - Pour:

// CLOSE 1 DIALOG AND OPEN ANOTHER 
    $('#uploadModal').dialog('open'); 
    $(this).dialog('close'); 
0
$(this).dialog('close'); 
$('#uploadModal').dialog('open'); 

Cela fonctionne vraiment bien pour moi (jquery 1.7 jquery-ui 1.8). La réponse suggérée ne fait que fermer la boîte de dialogue et n'ouvre pas la nouvelle.

0

Essayez d'envelopper votre appel ouvert "uploadModal" dans un setTimeout.

'Upload Image': function() { 
    // CLOSE 1 DIALOG AND OPEN ANOTHER 
    $(this).dialog('close'); 
    setTimeout(function() { 
     $('#uploadModal').dialog('open'); 
    }, 100); 
}, 

Vous pouvez également se lier à l'événement à proximité de la boîte de dialogue via ..

$("#uploadImage").bind("dialogClose", function() { 
    // code goes here 
}); 

mais je pense que le premier fonctionnera bien pour ce que vous voulez.

0

Ouais, cela a été ici pour un peu. Je cherchais comment résoudre le même problème. J'ai posté plus de code alors nécessaire afin que vous puissiez voir ce qui se passe. J'ai utilisé le nom de la boîte de dialogue en cours pour fermer et le nom du nouveau pour ouvrir. Fonctionne ...

//============= User Modal ===============================// 

$("#dialog-message").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    width: 650, 
    buttons: { 
     Add: function() { 
      $('#dialog-message').dialog("close"); 
      $('#dialog-message3').dialog("open"); 
     } 
    } 
}); 

$("#opener").click(function() { 
    $("#dialog-message").dialog("open"); 
    return false; 
}); 

//========== Add User Modal ============================ // 
$("#dialog-message3").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    width: 250, 
    buttons: { 
     Save: function() { 
      $('#dialog-message3').dialog("close"); 
     } 
    } 
}); 
Questions connexes