Comment puis-je fermer la boîte de dialogue jquery ui à l'intérieur du code de la boîte de dialogue?

Question

J'utilise plusieurs boîtes de dialogue jquery ui dans mon application pour collecter les entrées des utilisateurs et pour les opérations CRUD. Lorsque dans une page je besoin d'un dialogue que je fais les étapes suivantes:

D'abord, je définir le balisage minimum et code nécessaire pour initialiser la boîte de dialogue comme celui-ci

<div id="dialogPanel" style="display:none" title=""></div> 

et, lorsque le DOM est prêt,

$("#dialogPanel").dialog({ 
    autoOpen: false, hide: 'slide', show: 'bounce', resizable: false, 
    position: 'center', stack: true, height: 'auto', width: 'auto', 
    modal: true, overlay: { opacity: 0.5, background: "white" } 
}); 

Puis-je charger du contenu dans la boîte de dialogue quand j'ai besoin à l'aide d'appels ajax, comme celui-ci

<button id="addCustomer">Add Customer</button> 

et ce

$("#addCustomer").button().click(function(event) { 
    event.preventDefault(); 
    loadDialog("/Customer/Create", "", "Add New Customer"); 
}); 

function loadDialog(action, id, title) { 
    $("#dialogPanel").dialog("option", "title", title); 
    if (id != "") 
     action = action + "/" + id; 
    $.ajax({ 
     type: "get", 
     dataType: "html", 
     url: action, 
     data: {}, 
     success: function(response) { 
      $("#dialogPanel").html('').html(response).dialog('open'); 
     } 
    }); 
} 

L'appel ajax renvoie une vue typée forte qui montrera dans la boîte de dialogue et même redimensionner dynamiquement. La vue typée forte possède des boutons qui, alternativement, font d'autres appels ajax (par exemple à l'action du contrôleur qui valide et persiste sur la base de données). Ces appels retournent généralement du code HTML qui sera ajouté au dialogue DIV. Maintenant, ma question est: Comment fermer la boîte de dialogue? Je peux le faire en cliquant sur le bouton "X" dans le coin supérieur droit de la boîte de dialogue ou en appuyant sur la touche ESC mais je voudrais le faire en conséquence du clic sur le bouton qui est à l'intérieur de la vue forte typée.

Cependant je ne veux pas utiliser ce genre de code

$("#dialogPanel").dialog('close'); 

dans une forte vue typée qui ne définit pas la #dialogPanel DIV en lui-même.

Quelle pourrait être une bonne solution?

Answer 1

Créez une fonction closeDialog dans le formulaire principal et appelez cette fonction depuis la boîte de dialogue. Ensuite, toute autre page qui héberge le dialogue doit également définir une fonction "closeDialog". En outre, vous pouvez passer un délégué pointant vers la fonction closeDialog pour séparer les choses plus loin.