UI Dialog, transfert de données [Résolu]

[yann18]

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:

1. Comment faire appel au fichier dans la fenêtre ?
2. 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,

[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

[danielhagnoul]

Bonjour, trois remarques en plus de celle de @gwinyam

Code javascript :

$('#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 javascript :

$('#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 javascript :

$('#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 javascript :

$('#dialog').dialog('destroy');

[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...

[danielhagnoul]

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 !"

[gwinyam]

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.

[yann18]

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;
            });