Ajout de la boîte de dialogue de l'interface utilisateur jQuery au formulaire ASP.NET sur le document prêt

Question

J'ai une boîte de dialogue jQuery UI avec ASP.NET. J'enveloppe une liste de cases à cocher dans la boîte de dialogue. Comme il s'agit d'une "page d'édition", certaines cases sont déjà cochées parce que les données ont été extraites de la base de données lors du premier chargement de la page.

Je n'ai aucun problème lorsque je clique sur le lien pour ouvrir la boîte de dialogue, et tout fonctionne comme prévu. Cependant, si je ne clique pas sur le lien pour ouvrir la boîte de dialogue, les valeurs des cases à cocher ne seront pas récupérées du code-behind lorsque le formulaire est renvoyé. Je comprends parce que la boîte de dialogue jQuery UI ajouter "div" au corps HTML en dehors de l'élément "formulaire" lorsque la page est chargée.

//I'm trying to append dialog-dept to form on document ready like this but not yet working 
    $("#dialog-dept").parent().appendTo($("form:first")); 

Comment puis-je faire partie de dialogue jQuery UI de balise "formulaire" requis par la page ASP.NET lorsque la page première chargée?

Parce qu'il y a beaucoup d'autres champs sur la page et pas seulement ceux-là. Parfois, il pourrait ne pas être nécessaire d'ouvrir la boîte de dialogue pour sélectionner une case à cocher.

Le code ci-dessous ne fonctionne bien que si je clique sur le lien pour ouvrir la boîte de dialogue.

$(document).ready(function() { 

     // Dialog Link 
     $('#dialog_link_dept').click(function() { 
      $('#dialog-dept').dialog('open'); 
      return false; 
     }); 

     // Launch Dialog 
     $('#dialog-dept').dialog({ 
      autoOpen: false, 
      width: 700, 
      modal: true, 
      open: function(type, data) { 
       $(this).parent().appendTo("form"); 
      } 
     }); 

    }); 
</script> 

Answer 1

Vous pouvez le déplacer dans le <form> immédiatement après sa création, même si elle est autoOpen: false, comme ceci:

$('#dialog-dept').dialog({ 
     autoOpen: false, 
     width: 700, 
     modal: true 
    }).parent().appendTo("form"); 

Answer 2

Je suppose que cette forme manière dialogue modale:

$ ("# dialogue -dept "). dialog ({height: 300, largeur: 250, modal: true, appendTo:" formulaire ", titre:" Titre ", show: {effet:" fondu ", durée: 500}, masquer: {effet : "fold", durée: 500}});

et fonctionne bien pour moi