Les téléchargements de fichiers ne fonctionnent pas dans la boîte de dialogue de l'interface utilisateur jQuery

Question

J'ai donc un problème plutôt étrange que je voulais voir si quelqu'un avait un aperçu.

J'ai une page dans laquelle j'affiche une grille de fichiers qui ont été téléchargés sur notre serveur. La barre d'outils de la grille leur permet de télécharger plus de fichiers. Lorsqu'ils cliquent sur le bouton "Ajouter un fichier" dans la barre d'outils, une fenêtre modale de la boîte de dialogue jQuery UI apparaît avec un contrôle de téléchargement de fichier simple. Après avoir sélectionné un fichier, ils cliquent sur le bouton "Télécharger" sur la boîte de dialogue qui soumet le formulaire sous-jacent pour le téléchargement. Notez également que parce que j'utilise asp.net, il n'y a qu'un seul formulaire sur la page, donc je ne soumets pas le mauvais formulaire. Maintenant ... lorsque j'essaie de rechercher des fichiers téléchargés dans le backend, aucun fichier n'est téléchargé. Pire encore, si je déplace le contrôle de téléchargement hors de la boîte de dialogue et l'utilise directement depuis la page sans boîte de dialogue, les téléchargements fonctionnent correctement. Cela m'amène à croire que même si je définis la div qui deviendra mon dialogue dans le formulaire principal pour lui permettre de soumettre avec une publication, jQuery est en quelque sorte en train de le déplacer ou de le dissocier du formulaire.

Est-ce possible? Ou y a-t-il autre chose que je puisse manquer? Je n'arrive pas à trouver de documentation qui dit d'une façon ou d'une autre. Merci d'avance!

Answer 1

Vous avez raison. Dialog déplace son contenu en dehors de sa forme et l'ajoute au corps. Probablement pour obtenir un meilleur contrôle du DOM, pour s'assurer qu'il affiche toujours au centre, au-dessus de tout, et n'est pas contenu dans un DIV placé absolument ou alors ...

Answer 2

Ce qui se passe ici est que l'interface utilisateur de bloc supprime toutes les fonctionnalités de clic sur les boutons de son modal. Pour contourner cela, la meilleure solution que j'ai trouvée est d'avoir un bouton caché qui fera ensuite le traitement désiré.

Voici un exemple:

HTML

<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" /> 
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" /> 

Javascript/Jquery

function UploadFiles() 
{ 
    $.unblockUI({ 
     onUnblock: function() { 
      $('[id$=btn_UploadClick]').click(); 
     } 
    }); 
} 

Answer 3

Vous devez déplacer la boîte de dialogue à l'intérieur de la forme.

var dialog = $("#dialog").dialog({ 
 
    autoOpen: false, 
 
    height: 300, 
 
    width: 350, 
 
    modal: true, 
 
    buttons: { 
 
    "Upload": function() { 
 
     __doPostBack('uploadfile', ''); 
 
     $(this).dialog("close"); 
 
    }, 
 
    Cancel: function() { 
 
     $(this).dialog("close"); 
 
    } 
 
    } 
 
}); 
 

 
dialog.parent().appendTo($("form:first"));