UI Dialog, transfert de données

Version imprimable

Bonjour,

J'ai un formulaire avec lequel j'aimerai envoyer des données dans une fenêtre de type jqueryui dialog, dans laquelle se trouve un fichier tiers qui va traiter et réafficher ces données. Deux questions:

Comment faire appel au fichier dans la fenêtre ?
Comment envoyer les données du formulaire au fichier dans la fenêtre ?

Pour l'instant, j'ai ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 $('#formCompta #verifBtn').click(function(){
...
$("#formCompta").submit(function(){
                $.ajax({
                    type:'POST',
                    url:'fichier tiers', //que je voudrais voir aussi apparaître dans la fenêtre
                    data:$(this).serialize(),
                    success:function(data){
$('#dialog:ui-dialog').dialog('destroy');
                $('#dialog').dialog({
                    buttons:{
                       Ok:function(){
                            $(this).dialog('close');
                        }
                    }
...

Mais pour le restant, je ne vois pas comment faire... une orientation ?
merci,

17/01/2011, 11h25
gwinyam

Une dialog, ça serat à afficher quelques données et pourquoi pas en recueillir via un formulaire simple.

Pas pour "afficher un fichier", d'ailleurs, qu'est-ce que t'entends par ça? Tu veux afficher le nom du fichier? avec son arbo? son contenu?

Soit je suis fatigué, soit tu t'exprimes mal parce que je ne suis pas sûr de comprendre ce que tu veux faire
17/01/2011, 12h00
danielhagnoul

Bonjour, trois remarques en plus de celle de @gwinyam

Code:

$('#formCompta #verifBtn').click(function(){

Un ID doit être unique, c'est une référence de première classe, l'écriture ci-dessus n'a pas de sens. Il suffit de :

Code:

$('#verifBtn').click(function(){

Vous détruisez un UI Dialog pour le reconstruire immédiatement après, si les boutons et la logique du dialogue restent identiques, il suffit de changer le titre et le texte du dialogue.

Code:

$('#dialog:ui-dialog').dialog('destroy');

Je ne connais pas la pseudo-class ":ui-dialog", pourriez-vous me dire l'endroit où vous l'avez vu ?

Code:

$('#dialog').dialog('destroy');
17/01/2011, 12h03
yann18

Ok, je vais essayer de reformuler différemment :
J'ai une page principale dans laquelle j'ai un formulaire. L'utilisateur envoie les données à un fichier tiers que nous appellerons 'preview.php', qui va traiter ces données et en afficher de nouvelles. Dans un second temps, s'ouvre une fenetre ui dialog. Dans celle-ci, l'utilisateur doit pouvoir lire les données traitées et communiquées par 'preview.php' (d'où ma question 'comment faire appel à un fichier dans une ui dialog')
Plus clair comme cela ?
merci,

Pour vous répondre Daniel, la pseudo class 'ui-dialog' se trouve dans la source de code de la démo, à cette adresse. Il me semblait judicieux d'utiliser la méthode 'destroy' pour rafraîchir le contenu de la fenêtre. Mais peut-être ai-je mal compris son utilisation...
17/01/2011, 12h24
danielhagnoul

Citation:

Envoyé par yann18

Pour vous répondre Daniel, la pseudo class 'ui-dialog' se trouve dans la source de code de la démo, à cette adresse. Il me semblait judicieux d'utiliser la méthode 'destroy' pour rafraîchir le contenu de la fenêtre. Mais peut-être ai-je mal compris son utilisation...

D'accord je vois, mais il est aussi indiqué (traduction approximative) : "une solution de contournement pour une faille dans le système de démonstration (http://dev.jqueryui.com/ticket/4375), ignore !"
17/01/2011, 15h19
gwinyam

Citation:

Envoyé par danielhagnoul

Vous détruisez un UI Dialog pour le reconstruire immédiatement après, si les boutons et la logique du dialogue restent identiques, il suffit de changer le titre et le texte du dialogue.

D'un point de vue performances, le gain est non-négligeable. De plus ces manips impliquant moins de code à exécuter, sur un objet déjà existant de plus, les risques d'erreurs en sont d'autant plus diminués.

re:

Je crois avoir finalement trouvé la solution. Si ça intéresse quelqu'un... (ou si le script peut-être amélioré (je suis preneur)):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#formulaire").submit(function(){
                var dataFormulaire = $(this).serialize();
                var monUrl = 'fichier';
                $('#fenetreUiDialog').load(monUrl, dataFormulaire, function(){
                    $(this).dialog({
                        // d'autre paramètres en options
                        buttons:{
                            Fermer:function(){
                                $(this).dialog('close');
                            }
                        }
                    })
                });
                return false;
            });