Forum Programmation.web Formulaire et boîte modale.

Posté par  .
Étiquettes : aucune
0
23
oct.
2007
Hello !
Voilà, je vais essayer de décrire ce que je veux faire, car d'une, ça va peut-être m'aider de fait pour parvenir à mes fins, et de deux, ça risque de vous éclairer pour pouvoir au moins m'aiguiller vers une ou des solutions.
J'ai en ce moment une appli développée en php qui permet d'interagir avec une base de données postgres.
L'application se présente sous la forme d'un menu généré à partir d'une arborescence créée sur le disque grâce à un script php, et lorsqu'on choisi un "écran", une page php idoine est incluse par la page index.
Tout ceci fonctionne à merveille, mais j'aimerai rendre le tout un peu plus ergonomique. Voici ce qui risque d'être le plus difficile à décrire, alors je vais utiliser un exemple.
J'ai un menu administration qui me permet d'agir sur différentes listes contenues dans ma base de données. Bien souvent, il s'agir de tables contenant un code et un libellé.
Sur certains écrans, qui n'ont rien à voir avec ceux ci-dessus, j'utilise ces listes pour faciliter la saisie aux utilisateurs.
Parfois, et c'est là le point crucial, il se trouve que lorsqu'on arrive à la dernière (ce n'est pas le seul cas possible, évidement, mais c'est le plus gênant), liste de l'écran, on s'aperçoit qu'il manque un élément dans la liste affichée. De là découlent deux solutions :
- la pire : faire fi de toute la saisie pour choisir l'écran requis dans la zone d'administration, ajouter son élément à la liste en cause, et revenir au point de départ (en refaisant toute la saisie).
- la moins pire : choisir n'importe quel élément de la liste incomplète, aller dans la zone d'administration qui va bien, ajouter son élément dans la liste, et revenir ensuite sur l'écran précédent pour corriger sa saisie...
Évidement, aucune de ces deux solutions n'est satisfaisante.
Ce que je voudrais donc, c'est mettre un peu d'interactivité dans tout ça, de façon à ce que l'utilisateur qui constate une erreur dans une liste puisse ouvrir une fenêtre modale sur cette liste, faire ce qu'il a à faire, et revienne ensuite à sont formulaire d'origine, qui doit récupérer les mises à jour des listes, sans perdre ce qui a été renseigné dans l'écran (pas de submit, donc).
Je pense qu'il me faut donc utiliser un peu d'ajax pour afficher cette fenêtre modale, d'une parce que le window.open de javascript ne me satisfait pas (quand le navigateur ouvre tout dans de nouveaux onglets, ça fout le bronx), et de plus, la fenêtre ainsi ouverte est tout sauf modale.
Par ailleurs, je pense que ré-ajuster le contenu d'un select sans recharger la page complète ne peut se faire qu'avec ajax (ou alors il me faudrait tout recoder).
Je sais déjà ajouter un bouton qui déclenche une action javascript pour ouvrir une fenêtre. Comme je l'ai dit, ça ne me plaît pas. Je voudrais donc avoir un genre de div dans ma page dont le contenu puisse provenir de l'exécution d'un fichier php. J'ai évidement lorgné du côté de innerHTML, mais dans ce cas, ça ne s'applique pas. Je ne vois donc pas trop comment procéder.
Ensuite, il faudrait que lorsque l'on quitte cette fenêtre modale, le contenu de la liste d'où provient l'appel soit mis à jour. Là encore, je ne sais pas trop comment procéder.
J'ai regardé un peu les docs, tutoriels, etc. sur ajax, mais d'après ce que j'ai compris, il faut passer par un fichier xml pour les échanges entre le client et le serveur... ça ne me plaît pas de trop, d'autant que si j'ai tout mis dans une base de données, ce n'est pas pour me recoltiner le tout sous forme xml.
Voilà, bien sûr, je continue mes investigations pour arriver à mes fins, mais si vous avez des pistes, liens pertinents sur le sujet, etc, je suis preneur.
D'autant qu'il semble difficile dans ce cas de demander à google de chercher sur la toile avec les bons termes.
Ajax+select+dynamique par exemple retourne tout un tas de choses qui ne s'appliquent pas à mon cas particulier.
Merci d'avance de m'avoir lu et pour toute aide/lien que vous trouveriez utile de me communiquer.
  • # Pas besoin de XML

    Posté par  . Évalué à 5.

    Nul besoin de XML pour faire de l'Ajax, le serveur peut très bien retourner un bête bout de code HTML qui sera ensuite inséré où tu veux dans ta page.

    Le mieux serait que tu cherches du côté des frameworks Ajax pour te simplifier la vie :
    http://prototypejs.org/
    http://script.aculo.us/
    http://mootools.net/
    • [^] # Re: Pas besoin de XML

      Posté par  . Évalué à 1.

      Bon, ben déjà merci pour cette réponse rapide.
      Entre temps, je suis tombé sur [1], que j'ai adapté pour mes besoins. J'arrive bien à afficher une fenêtre presque modale, et à la faire fonctionner en autonome. Ne me reste plus qu'à faire en sorte que lorsque cette fenêtre est fermée, la liste correspondante soit rechargée, et là, je ne vois pas trop comment procéder.
      Voici de quoi étayer un peu mon propos :
      J'ai un formulaire html (nommé F1) qui contient entre autre :
      un select rempli depuis une base de données, un bouton qui déclenche l'appel de la fenêtre modale.
      Si on clique sur le bouton, une fenêtre s'ouvre dans la page html, pour agir sur la base de données. Mettons que j'ajoute un élément dans la table d'où sont tirées les options du select ci-dessus.
      Il faut que lorsque je ferme cette fenêtre modale, un rechargement depuis la base de données soit fait pour actualiser la liste affichée dans mon formulaire F1, et uniquement cette liste. Je ne vois pas trop comment procéder, pour l'instant, car il ne faut surtout pas que je recharge toute la page, juste que je mette à jour le select.
      [1] http://prototype-window.xilinus.com/samples.html
      • [^] # Re: Pas besoin de XML

        Posté par  . Évalué à 2.

        Ah oui, j'étais déjà tombé sur ce truc qui fait de jolies fenêtres avec Prototype.

        Je cerne un peu mieux ton problème et j'ai fait grosso modo la même chose. Le truc, c'est de mettre ta liste dans une div, et quand le formulaire dans la fenêtre modale est validé, on fait disparaître cette fenêtre, et on utilise un Ajax.Updater de Prototype pour mettre à jour la base, retourner la liste mise à jour, et mettre ce bout de liste dans le div.

        En gros, dans le code de la page, tu auras :

        <div id="liste">
        ...
        </div>

        Et dans ta fenêtre modale :

        <form onsubmit="new Ajax.Updater('liste', 'url_vers_liste.php', {asynchronous:true, onComplete:function(request, json){$('ma_fenetre').hide();}, parameters:Form.serialize(this)}); return false;" action="url_vers_liste.php" method="post">
        ...
        </form>

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.