Revenir au formulaire lors édition

4 participants

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Revenir au formulaire lors édition

Message par MlleAlys Ven 16 Avr 2021 - 2:37

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur


Description du problème

Bonjour ! ^0^

J'ai créé un formulaire qui poste un message sur un forum, et j'aimerais que lors de l'édition de ce message, l'utilisateur puisse revenir au formulaire pour le faire.
Est-ce possible ? Et si oui, comment ?

(codes modifiés, voir la maj plus bas dans le sujet) :

Merci d'avance à ceux qui pourront m'éclairer ! =D


Dernière édition par MlleAlys le Mar 20 Avr 2021 - 15:26, édité 3 fois (Raison : (ajout balise autour du message généré))
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Ven 16 Avr 2021 - 4:29

Bonjour,


Ne disposant pas des compétences suffisantes pour produire le code, je me limite à la théorie.

1/ Modifier le message généré de sorte à ajouter une class ou un id (qu'on appellera truc dans la suite de ma réponse)
2/ Ajouter une fonction editionMessage() au formulaire actuel, ou créer un nouveau formulaire qui ne prendrait en charge que les éditions.
3/ Créer un javascript placé sur les sujets dont la fonction serait de rediriger le bouton Editer des messages ayant la class ou l'id truc vers le formulaire actuel appelé en mode édition, ou vers un nouveau formulaire dédié à l'édition des messages.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Ven 16 Avr 2021 - 13:12

Merci Neptunia pour ta réponse !
J'avoue que mes compétences en dans ce domaine sont limitées, bon dans ma tête c'était moins propre mais je suis relativement contente de voir que j'avais à peu près ces idées là !

Je ne savais pas si faire une balise globale autour de la réponse était indispensable  : Est-ce que le script ne peut pas se repérer à la classe "titre" ou "contenu" si celle-ci est spécifique au formulaire ? Ou il faut forcément que l'élément englobe l'ensemble ?
Au cas où en tout cas j'ai modifié mon formulaire de test pour en ajouter une (j'ai maj mon premier message). ^^

Pour ajouter le mode édition au formulaire, j'ai juste su repérer la valeur du mode qui doit passer sur editpost plutôt que reply si j'ai bien suivi, mais je ne sais pas s'il y a d'autres choses à modifier (et si ce n'est pas l'auteur du message qui l'édite, par exemple un modérateur, est-ce que ça doit être pris en compte ailleurs dans le script ?) ; et puis je ne sais pas comment bidouiller le truc pour que ça se fasse de façon automatique, ou si effectivement il vaut mieux avoir un deuxième formulaire...

Merci encore, j'espère que quelqu'un pour m'aider pour la suite !
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Ven 16 Avr 2021 - 14:14

MlleAlys a écrit:Je ne savais pas si faire une balise globale autour de la réponse était indispensable  : Est-ce que le script ne peut pas se repérer à la classe "titre" ou "contenu" si celle-ci est spécifique au formulaire ? Ou il faut forcément que l'élément englobe l'ensemble ?
Au cas où en tout cas j'ai modifié mon formulaire de test pour en ajouter une (et vais modifier de suite mon premier message pour mettre ça à jour). ^^

Ca ne change absolument rien que le "marqueur" soit sur une div globale ou sur la div d'un des champs du formulaire. Il faudra de toute façon remonter le DOM jusqu'au tbody le plus proche avant de redescendre l'arborescence à destination de la td de class post-options, du lien contenant "editpost" ou de l'image ayant pour class i_icon_edit. Le seul piège à éviter, c'est de ne pas modifier le bouton Editer dans le cas où le marqueur est englobé dans une citation. Un moyen grossier d'y parvenir serait de retirer le bouton Citer de chaque message ayant la class truc (ou titre ou contenu)
Ca me parait juste plus logique (et plus léger) d'utiliser un des conteneurs existants quitte à lui rajouter une class si nécessaire, plutôt que de rajouter une balise vide dont la seule fonction serait d'avoir de la class !

Pour ce qui concerne le mode édition, il y a pas mal de choses qui changent avec le mode "création".
- On ne poste pas un nouveau message, mais on écrase le contenu d'un ancien message.
- On ne part pas d'un formulaire vide, mais du formulaire dans lequel chaque champ a déjà un contenu (importé depuis le contenu du message en cours d'édition.
- On n'a plus besoin de gérer le titre du sujet
- On peut vouloir donner une explication à notre édition
Et il y a vraisemblablement pas mal d'autres différences.
En revanche, que l'on soit auteur du message ou modérateur, je ne pense pas que ça change quoi que ce soit. Si le bouton Editer est présent, c'est qu'on a la permission nécessaire.

En théorie, il serait plus logique d'utiliser le même formulaire pour créer comme pour éditer.
Dans la pratique, compte tenu des nombreuses différences entre les deux modes, et les capacités du codeur, il sera peut-être plus simple d'utiliser deux formulaires distincts quitte à devoir modifier deux formulaires à chaque changement du contenu du formulaire.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Ven 16 Avr 2021 - 16:01

Ok, donc finalement la div que j'ai ajoutée n'était pas obligatoire. scratch
Et je n'avais effectivement pas pensé au cas de la citation !
Et pour ce qui est d'un ou deux formulaires... peut m'importe même si effectivement j'aimerais pouvoir comprendre le code de façon à le reproduire et l'adapter comme besoin ! Mais je me rangerai à la préférence de la personne qui voudra bien m'aider à écrire tout ça.... Assomé
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Sam 17 Avr 2021 - 19:32

up ! ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Dim 18 Avr 2021 - 19:39

up ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Lun 19 Avr 2021 - 19:49

up ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Mar 20 Avr 2021 - 12:26

Bonjour MlleAlys, Neptunia Very Happy !

J'avoue ne pas avoir lu toute vos pistes mais je pense que si l'on met le code suivant sur les sujets (ou même dans le template entre balises script si c'est le cas bien sur) :
Code:
$(function(){
   let f = $('a.nav:last').attr('href'), le = $('.i_icon_edit:first').parent().attr('href'), p = le.match(/[0-9]+/)[0];
   if(f.indexOf('f7')) $('.i_icon_edit:first').parent().attr('href', '/h4-');
   $('.i_icon_edit:first').parent().on('click', e =>{
      e.preventDefault();
      sessionStorage.removeItem('title');
      sessionStorage.removeItem('message');
      sessionStorage.removeItem('p');
      $.get(le, d =>{
         let title = $('input[name="subject"]', d).val(), message = $('#text_editor_textarea', d).val();
         sessionStorage.setItem('title', title)
         sessionStorage.setItem('message', message);
         sessionStorage.setItem('p', p);
         window.location = $('.i_icon_edit:first').parent().attr('href');
      });
   });
});

En remplaçant f7 si tu changes d'avis pour le forum Mr. Green !
Puis en ajoutant le javascript suivant à ta page HTML :
Code:
$(function(){
   if(sessionStorage.getItem('title')){
      let t = sessionStorage.getItem('title'), m = sessionStorage.getItem('message'), p = sessionStorage.getItem('p');
      $('input[name="titre"]').val(t);
      $('input[name="contenu"]').val(m);
      $('input[name="mode"]').attr('value', 'editpost').after('<input type="hidden" name="p" value="'+p+'">');
   }
});
Sans oublier d'importer jQuery dans le head :
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Bonne journée Very Happy !
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Mar 20 Avr 2021 - 12:57

Coucou Self, et bien vu


MlleAlys a écrit:J'ai créé un formulaire qui poste un message sur un forum
J'avais bêtement lu au premier degré en considérant que le formulaire postait un message et non un sujet.
Si j'avais survolé assez longtemps le code du formulaire j'aurais pourtant vu qu'il s'agissait de créer des sujets et dans ce cas, inutile de devoir placer un marqueur signifiant que le contenu du message est issu d'un formulaire.

Reste à voir si tous les sujets du sous-fo seront générés par formulaire ou seulement quelques uns.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mar 20 Avr 2021 - 13:57

Neptunia > Non, c'était bien un message posté en réponse dans le sujet t42 que j'avais fait ici, je n'avais pas pensé à la différence que ça pourrait induire pour l'édition scratch

Est-ce plus simple pour l'édition quand cela poste un nouveau sujet ?

Merci beaucoup pour ton aide Self !
J'ai essayé de mettre tes codes, mais ça ne fonctionne pas.... Puis au message de Neptunia j'ai modifié mon formulaire pour qu'il poste un nouveau sujet dans le forum f7 au lieu de répondre au sujet t42, en me disant que ça devait venir de cette différence là, mais... ça ne fonctionne pas non plus Razz  En cliquant sur "éditer", je suis dirigée vers l'éditeur classique et non le formulaire.

Je vais essayer de prendre le temps d'étudier le contenu de ce que tu m'as proposé pour essayer de comprendre comment ça fonctionne (et qui sait ? Peut être trouver le problème pour le corriger ? Mais je ne sais pas pourquoi je doute de cette partie là ! xD)


J'ai installé le premier code javascript "sur les sujets" en passant par les modules, j'ai laissé f7.

Mon formulaire actuel, après avoir ajouté ce que tu m'as proposé et modifié pour qu'il poste un nouveau sujet dans f7 :
(codes modifiés, voir la maj plus bas dans le sujet) :


Dernière édition par MlleAlys le Mar 20 Avr 2021 - 15:27, édité 2 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Mar 20 Avr 2021 - 14:30

J'ai encore perdu une belle occasion de la fermer mdr

Code:
<input type="hidden" name="mode" value="reply" /> <!-- Un nouveau topic sera créé -->
Je m'étais arrêtée à la ligne 33 sans voir l'id du sujet à la ligne 38




P.S. J'essaie de tester ça de mon côté
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Mar 20 Avr 2021 - 14:48

Hello, je suis sur téléphone, je ne pourrais pas répondre et reprendre mes tests avant demain sur pc. Cependant je peux vous dire ce que mon code fait et ce que je croyais avoir compris.
Effectivement en voyant l'input titre j'ai cru qu'il devait créer un nouveau sujet, j'ai donc suivi le fil d'ariane pour dire que tout les sujets qui se trouvaient dans le dit forum devraient être à l'édition du premier message et seulement le premier rediriger vers la page h4 avec le titre et le contenu de ce premier message. Si vos tests étaient différents de l'édition du premier message d'un sujet présent dans le forum f7 ça ne marche donc pas 🤷‍�😝.
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mar 20 Avr 2021 - 14:52

Neptunia > Pas de souci, c'est un peu de ma faute parce que je suis repartie d'un autre formulaire pour le modifier, mais je n'ai pas pris la peine de changer les commentaires ^^"

Et oui je me suis rendue compte après que le "titre" pouvait aussi prêter à confusion, pardon, c'était surtout pour pouvoir tester un formulaire avec plusieurs champs, pardon ><"

Self > C'est ce que j'en ai déduit aussi, mais du coup j'ai modifié le formulaire pour qu'il poste bien un nouveau sujet, et je l'ai testé ainsi... Mais ça n'a tout de même pas fonctionné Sad
J'ai peut être oublié autre chose....
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Mar 20 Avr 2021 - 15:09

Le formulaire crée bien le sujet là où on lui demande mais le script placé sur les sujets est sans effet, il ne change pas la cible du lien du bouton Editer.

Il y a un autre problème (enfin je pense)
Si j'ai bien compris, tu stocke le titre du sujet et le contenu du premier message ? Le problème vient du contenu, dans ton script c'est un tout, dans le formulaire ce sont deux champs individuels et non un seul global.

Donc toujours si j'ai bien compris dans le meilleur des cas, le formulaire va rapatrier les deux champs dans le premier (input titre) au lieu de rapatrier le premier champ dans input (titre) et le second dans textarea (contenu). Après c'est vrai que le nom des champs nous induit rapidement en erreur.

Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mar 20 Avr 2021 - 15:19

Pardon,
Du coup pour éviter les confusions, j'ai modifié les champs du formulaire ! J'espère que ce sera plus simple pour vous ainsi !
(Mais si vous préférez autrement, dites moi surtout !)

Formulaire :
lien : https://mllealys2.forumactif.org/h4-
code de la page html du formulaire :
Code:
<!DOCTYPE html>
<html lang="fr" >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style>
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
      function envoiMessage(form) {
      
      // titre du sujet
      form.subject.value = form.titresujet.value;
      
      // Message est une chaîne de caractères vide :
      var text_message = "";
      
      // Remplir message à partir des informations fournies
      text_message = text_message + "<div id='formresult'>\n<div class='contenu1'>" + form.contenu1.value + "</div><div class='contenu2'>" + form.contenu2.value + "</div>\n</div>";
  
      // Insère le texte construit dans le champ caché "message" du formulaire
      form.message.value = text_message;
      
      }
    </script>
    
    <script type="text/javascript">
      // pour édition
      
      $(function(){
   if(sessionStorage.getItem('title')){
      let t = sessionStorage.getItem('title'), m = sessionStorage.getItem('message'), p = sessionStorage.getItem('p');
      $('input[name="titre"]').val(t);
      $('input[name="contenu"]').val(m);
      $('input[name="mode"]').attr('value', 'editpost').after('<input type="hidden" name="p" value="'+p+'"/>');
   }
      });
    </script>
    
    </head>
  <body>
    
    <form action="/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this));" target="_parent">
      
      <input type="hidden" name="lt" value="0" />
      <input type="hidden" name="mode" value="newtopic" /> <!-- reply / newtopic / editpost -->
      <input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Normal=0; post-it=1; annonce=2; globale=3 -->
      <input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
      <input type="hidden" name="subject" value="" />
      <input type="hidden" name="username" value="" />
      <input type="hidden" name="f" value="7" /> <!-- ID du forum ou du sujet dans lequel le message sera posté-->
      
      
      titre du message : <input name="titresujet" type="text" value="Titre du sujet"/>
      <br/>message :
      <br/><input name="contenu1" type="text" value="Contenu 1" style=""/>
      <br/>
      <textarea name="contenu2" style="">Contenu 2</textarea>
  
      <div>
        <input type="reset" value="Annuler" style="background: white;" />
        <input type="submit" value="Envoyer" name="post" style="background: white;" />
      </div>
    
    </form>
  
  </body>
</html>

Message généré dans un nouveau sujet du forum f7 :
lien exemple : https://mllealys2.forumactif.org/t48-titre-du-sujet#100
contenu généré :
Code:
<div id='formresult'>
<div class='contenu1'>Contenu 1</div><div class='contenu2'>Contenu 2</div>
</div>



Le but est effectivement de récupérer les contenus correspondants dans chaque champ ! ^^


Dernière édition par MlleAlys le Mar 20 Avr 2021 - 17:21, édité 2 fois (Raison : maj code formulaire : correction biblio jquery avant les autres)
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Mar 20 Avr 2021 - 15:28

C'est ton fofo et ton formulaire.

Tu choisis le nom des champs comme tu veux !
Ceci dit Contenu 1 et Contenu 2 bah ça évite l'effet Peau de banane Revenir au formulaire lors édition 1f34c
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mar 20 Avr 2021 - 15:39

En l'occurrence c'est juste mon forum test, et un formulaire de test aussi que j'ai créé juste pour me pencher sur cette question...
Donc oui, si je peux simplifier la vie de ceux qui veulent bien m'aider (et je vous remercie encore de le faire !  I love you ) juste en changeant les noms des champs, au contraire : je vous retire volontiers les peaux de banane ! Laughing
(Et puis si on y arrive, ça m'évitera de glisser moi même dessus quand j'essayerai d'adapter ensuite le code sur d'autres formulaires ! xD)
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Mar 20 Avr 2021 - 16:14

Je dois avouer être un peu perdu du coup 🙈. Le formulaire de base doit envoyer une réponse à un sujet précis ou créer un nouveau sujet ? L'édition doit renvoyer vers le formulaire sur chaque message du sujet ou seulement pour le premier message ?
MlleAlys dans ta page html tu as importé la librairie jQuery après le code ça ne peut déjà pas marcher à ce niveau là il faut l'importer avant 🙃.
Neptunia, le code change la cible du premier bouton éditer si le dernier lien du fil d'ariane est bien le f7, puis au clique sur celui-ci on récupère l'id du message à éditer, le titre du sujet et le message que l'on stock dans des variables de session que l'on récupère ensuite sur la page html si elle ont bien était défini.
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Neptunia Mar 20 Avr 2021 - 16:33

Neptunia, le code change la cible du premier bouton éditer si le dernier lien du fil d'ariane est bien le f7

C'est justement là que ça coince, rien ne changeait.
J'avais bien changé l'id du forum (f3 chez moi) et l'id du formulaire (/h2-) mais aucun changement de lien.
Fil d'ariane bien présent et non modifié, idem pour le bouton Editer.

En tout cas le comportement que tu décris est bien celui que je pensais avoir compris.

Pour le formulaire, initialement c'était pour poster un message, enfin une réponse à un sujet déjà ouvert. Mais comme tu es parti sur la création d'un nouveau sujet, MlleAlys a pas voulu te contrarier et a enlevé les peaux de bananes pour que son formulaire soit en adéquation avec ton codage.
Visiblement ce qui l’intéresse c'est la possibilité d'éditer depuis le formulaire. Pour le reste je pense qu'elle sera assez grande pour se débrouiller. Elle cherche un exemple, une base qu'elle pourra remodeler en fonction des besoins. Pas un code tout prêt comme c'est souvent le cas ici.

Self a écrit:L'édition doit renvoyer vers le formulaire sur chaque message du sujet ou seulement pour le premier message ?
Sur chaque message généré par le formulaire.
C'est pour ça que je parlais d'ajouter un marqueur dans le corps du message. Afin de pouvoir rediriger le bouton Edition de chacun des messages comportant ce marqueur.




Edité à 16h48

Si j'injecte le javascript dans la console :
Code:
$(function(){
  let f = $('a.nav:last').attr('href'), le = $('.i_icon_edit:first').parent().attr('href'), p = le.match(/[0-9]+/)[0];
  if(f.indexOf('f1')) $('.i_icon_edit:first').parent().attr('href', '/h2-');
  $('.i_icon_edit:first').parent().on('click', e =>{
      e.preventDefault();
      sessionStorage.removeItem('title');
      sessionStorage.removeItem('message');
      sessionStorage.removeItem('p');
      $.get(le, d =>{
        let title = $('input[name="subject"]', d).val(), message = $('#text_editor_textarea', d).val();
        sessionStorage.setItem('title', title)
        sessionStorage.setItem('message', message);
        sessionStorage.setItem('p', p);
        window.location = $('.i_icon_edit:first').parent().attr('href');
      });
  });
});

Cela modifie bien le lien du bouton Editer du premier message (et pas des suivants) et charge bien le formulaire ...
... qui ne récupère rien vu que la bibliothèque jQuery est chargée trop tard.

Mais si je place le script dans la gestion des codes js, ça fonctionne pas (et je n'ai pas la moindre erreur bloquante, juste une flopée d'avertissements)
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mar 20 Avr 2021 - 17:13

Self a écrit:Je dois avouer être un peu perdu du coup 🙈. Le formulaire de base doit envoyer une réponse à un sujet précis ou créer un nouveau sujet ? L'édition doit renvoyer vers le formulaire sur chaque message du sujet ou seulement pour le premier message ?

Neptunia a déjà bien répondu, effectivement en posant ma question, j'avais un formulaire qui postait une réponse dans un sujet, mais comme ton code fonctionnait dans le cas où c'était le premier, j'ai modifié mon formulaire pour qu'il poste un nouveau sujet.
Si ça pouvait fonctionner dans les deux cas, ça serait l'idéal bien sûr, après si c'est plus simple quand le formulaire poste un nouveau sujet, je me contenterai déjà de ça bien sûr !

Self a écrit:MlleAlys dans ta page html tu as importé la librairie jQuery après le code ça ne peut déjà pas marcher à ce niveau là il faut l'importer avant 🙃.
... Effectivement, erreur idiote, je vais corriger ça de suite !  drunken

Self a écrit:le code change la cible du premier bouton éditer si le dernier lien du fil d'ariane est bien le f7
(Je prends note au cas où qu'il faut donc bien vérifier le fil d'Ariane dans le cas d'un forum personnalisé alors !)



Et oui, je suis pas très douée avec les javascripts, j'arrive à peu près à bidouiller des codes relativement simples ou quand on m'explique comment ça fonctionne, à la limite écrire une fonction ultra simple et basique ça peut passer, mais là clairement ça dépasse de loin mes compétences....  Razz
Donc effectivement comme dit Neptunia dans l'idéal je cherche une base simple et solide pour éditer un message via un formulaire, la plus multipass possible, pour la comprendre et pouvoir la réutiliser par la suite quand j'en ai besoin en l'adaptant sur des formulaires divers !
(comment ça "simple" et "multipass" dans la même phrase c'est pas un cadeau ?? Laughing Bon, le meilleur compromis entre les deux alors ! )

Merci encore de votre aide ! sunny




EDIT : J'ai corrigé mon formulaire et remis le lien vers la bibliothèque jquery avant les autres !
Mais ça ne fonctionne toujours pas quand je clique sur "éditer" ensuite Crying or Very sad
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Mer 21 Avr 2021 - 9:52

Hello, merci pour les clarifications tout les deux. Je ne vois pas très bien l'intérêt de passer par un formulaire pour l'envoi d'un message mais il doit y en avoir un Mr. Green . Du coup le plus simple est de mettre un mode par défaut qui créerait un nouveau topic dans un dit forum, que chaque messages postés par ce formulaire ensuite pour répondre soit éditable via celui-ci et que l'on reconnaisse dans quel sujet on se trouve donc pour envoyer les réponses dans le bon sujet... Je sais que MlleAlys ne veut pas quelque choses de clé en main mais il faut qu'il y est un minimum de machinerie derrière si tout les messages y compris les nouveaux sujets doivent être éditable via ce formulaire 🙃
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mer 21 Avr 2021 - 14:17

Self a écrit:Je ne vois pas très bien l'intérêt de passer par un formulaire pour l'envoi d'un message mais il doit y en avoir un Mr. Green
Alors la première fois que j'ai croisé un formulaire de ce type c'était sur un forum type rpg, avec une fiche de présentation relativement riche en codes pour sa mise en forme, donc le but était de permettre aux membres qui ne s'y connaissent pas trop de remplir la fiche et de la poster automatiquement sans tout casser...  Razz
(et pour le coup si on voulait modifier sa fiche par la suite, on se retrouvait dans l'éditeur normal avec tous les codes sans pouvoir revenir au formulaire, ça pourrait être un bon exemple pour ce sujet !)

Self a écrit:Du coup le plus simple est de mettre un mode par défaut qui créerait un nouveau topic dans un dit forum
Je crois que ça c'est bon, mon formulaire poste un nouveau sujet dans le forum f7 de mon forum test !

Self a écrit:que chaque messages postés par ce formulaire ensuite pour répondre soit éditable via celui-ci
Je suis pas sûre d'avoir compris, dans le sens où ça me semble être une évidence et justement le sujet de ma question : Comment faire pour que le message généré puisse être édité à nouveau via le même formulaire ? scratch

Self a écrit:et que l'on reconnaisse dans quel sujet on se trouve donc pour envoyer les réponses dans le bon sujet...
Je sais pas si j'ai bien compris, c'est la partie qui permet d'écraser le message éditer au lieu d'en poster un nouveau ?

Self a écrit:si tout les messages y compris les nouveaux sujets doivent être éditable via ce formulaire 🙃
Je n'ai pas compris du tout... confused Seuls les messages postés via le formulaire seraient voués à être édités via ce même formulaire (ou sa copie s'il faut que j'en crée un deuxième juste pour l'édition)
Par exemple si je reprends l'exemple du début de mon message, le membre poste une fiche de présentation à l'aide du formulaire. S'il doit la modifier par la suite, en cliquant sur "éditer" ça le ramène au formulaire, avec comme contenu dans les champs ce qu'il y a actuellement dans la fiche postée.
Et bien sûr ça écrase la fiche précédente quand il la poste à nouveau.



Je pense qu'une partie de la "machinerie" que je ne maîtrise pas sont les systèmes de "sessionStorage", c'est ce qui va permettre de "sauvegarder" les différentes parties du message pour les remettre ensuite au bon endroit dans le formulaire c'est ça ? C'est grâce à ça qu'on "switche" le formulaire en mode édition, si je garde le même, du genre "si un identifiant de message est dans le storage, alors on passe en mode édition et il faudra écraser le message avec ce même identifiant" ?


Pour le mode édition, j'ai bien repéré le champ "mode" qui passe sur "editpost",
le champ "f" qui devient "p" avec pour valeur l'identifiant du message,
mais quand j'inspecte le formulaire lors de l'édition d'un message, j'y trouve également ça :
Code:
<input type="hidden" name="lt" value="101">
<input type="hidden" name="auth[]" value="9b0e8732cd2c31546c26c58551ad1223">
<input type="hidden" name="auth[]" value="263b095bd9ad4e4582a8f70bf6762324">
Et je ne sais pas bien à quoi ça correspond ni comment le gérer... le champ "lt" je l'ai déjà dns mon formulaire, mais sur 0, à quoi correspond-il ?
auth[] est-ce l'auteur ? Du message, et de celui qui édite ? Comment récupérer ces informations ?


Merci encore pour ton aide ! I love you
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Mer 21 Avr 2021 - 15:42

Je suis en train de travailler sur le sujet, ça risque d'être légèrement long car je n'ai que quelques minutes par-ci par-la pour m'y mettre What a Face !
Je vais essayer d'être plus clair dans les explications Wink .
Sur le formulaire on va devoir définir le mode suivant le moyen où le membre est arrivé dessus, via le bouton créer un nouveau sujet ou en cliquant sur éditer.
Et ensuite les passer en valeur des inputs de type hidden. Il y en a énormément ce sont les informations que l'on envoi au serveur mais heureusement on à pas besoin de tous les mettre.
lt semble correspondre au nombre de message posté sur le forum au moment ou l'on arrive sur la page, si je me trompe pas il n'est pas essentiel.
auth[] est si je l'ai bien compris aussi une sécurité anti-spam, à toi de voir ce que tu veux faire concernant cela : https://forum.forumactif.com/t318903p30-erreur-navigateur-est-survenue-erreur-230-veuillez-contacter-le-support-technique

Pour le reste je pense que tu as compris que l'on va devoir faire suivant si c'est un nouveau message, un nouveau sujet ou l'édition d'un message, comme passer en paramètre l'id du post à la place de l'id du forum si on édite.

Concernant les sessionStorage il s'agit de variables de session, des informations que l'on va sauvegarder afin de pouvoir les récupérer tant que l'utilisateur ne change pas de domaine ou ne ferme pas son navigateur. Ces données sont écrasées une fois la session de l'utilisateur terminée ou via javascript avec un removeItem et pour la petite info même si l'on peut écrire des chiffres ou des booléens ou encore des variables, le seul résultat que vous aurez lorsque vous récupérerez les informations de session sera une chaines de caractère. Il existe aussi le localStorage avec la différence que les informations locales ne sont pas écrasées en fin de session.
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mer 21 Avr 2021 - 16:37

Pas de souci, rien ne presse, merci encore c'est super !
Ok pour "lt", ça semble cohérent !
Je vais aller me plonger dans les explications sur auth[] pour voir alors x3
Et je crois que j'ai compris pour les sessionStorage ! Very Happy (c'est fou comme c'est toujours plus facile de "comprendre" que de "faire" ! Razz )


Dernière édition par MlleAlys le Mer 21 Avr 2021 - 19:18, édité 1 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Dim 25 Avr 2021 - 12:25

(up pour éviter le verrouillage, Self est sur la question ^^)
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Mer 28 Avr 2021 - 11:05

(toujours d'actualité ^^)
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Mer 28 Avr 2021 - 21:57

Hello Very Happy !

Bon j'ai quelque chose de fonctionnel de mon côté, mais comme demandé ce n'est pas du clé en main et du coup il y aura des modifications à apporter.
Je commence par le script sur le forum.
Code:
$(function(){
   /*Reset des variable de session*/let resetStorage = function(){
      sessionStorage.removeItem('mode');
      sessionStorage.removeItem('message');
      sessionStorage.removeItem('topic');
      sessionStorage.removeItem('p');
      sessionStorage.removeItem('subject');
   };
   /*Lien du forum cible*/let nav = 'f1';
   /*Page du formulaire*/let target = '/h1-';
   if(location.pathname.match(target) || $('a.nav:last').attr('href').indexOf(nav)){
      /*Pour chaque message généré par le formulaire*/$('.byForm').each(function(){
         /*On prend le parent et l'id du message à éditer*/let post = $(this).parents('table[width="100%"]'), id = post.find('a[href$="editpost"]').attr('href').match(/[0-9]+/)[0];
         /*Au clique sur le bouton éditer*/post.find('a[href$="editpost"]').on('click', e =>{
            e.preventDefault();
            /*Le reset pour être sur de ne pas passer de mauvaise infos*/resetStorage();
            /*Lien de récupération du titre et contenu du message*/let le = post.find('a[href$="editpost"]').attr('href');
            /*On récupère les infos en ajax et les passe dans les variables de session avant de rediriger vers le formulaire*/$.get(le, d =>{
               let title = $('input[name="subject"]', d).val(), message = $('#text_editor_textarea', d).val();
               sessionStorage.setItem('mode', 'editpost');
               sessionStorage.setItem('subject', title);
               sessionStorage.setItem('message', message);
               sessionStorage.setItem('topic', id);
               window.location = target;
            });
         });
      });
      /*On remplace chaque lien de nouveau sujet ou de réponse par la page du formulaire*/$('a[href$="reply"], a[href$="newtopic"]').attr('href', target);
   }
   /*Au clique sur nouveau sujet*/$('img[alt="Poster un nouveau sujet"]').parent().on('click', e =>{
      e.preventDefault();
      /*Le reset pour être sur de ne pas passer de mauvaise infos*/resetStorage();
      /*Et on redirige*/window.location = target;
   });
   /*Au clique sur Répondre*/$('img[alt="Répondre au sujet"]').parent().on('click', e =>{
      e.preventDefault();
      /*Le reset pour être sur de ne pas passer de mauvaise infos*/resetStorage();
      /*On récupère l'id du topic et configure les variables de session avant de rediriger vers le formulaire*/let topic_id = location.pathname.match(/[0-9]+/)[0];
      sessionStorage.setItem('mode', 'reply');
      sessionStorage.setItem('topic', topic_id);
      window.location = target;
   });
});

Ici rien de spécial à dire j'ai commenter au mieux et si tu as des questions je serais ravi d'y répondre. Bien sur il faut changer les liens de ces deux lignes :
Code:
   /*Lien du forum cible*/let nav = 'f1';
   /*Page du formulaire*/let target = '/h1-';

Concernant le formulaire, c'est la que va se jouer tout le traitement de l'envoi des données et de la remise en forme du formulaire avec les informations récupérées.

Code:
<!DOCTYPE html>
<html>
   <head>
      <title>Poster un nouveau message</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         $(function(){
            let definePostingMethod = function(){
               /*Les paramètres que l'on veut récupérer*/let params = ['mode', 'topic', 'subject', 'message'];
               /*Si le mode est reply*/let reply = function(){
                  /*On récupère le topic cible*/$('input[name="f"]').after('<input type="hidden" name="t" value="'+sessionStorage.getItem('topic')+'">').remove();
               }, /*Si le mode est editpost*/edit = function(){
                  /*On récupère le titre*/$('input[name="title"]').attr('value', sessionStorage.getItem('subject'));
                  /*Ici on gère le contenu*/$('#content').html(sessionStorage.getItem('message'));
                  /*On récupère le message cible*/$('input[name="f"]').after('<input type="hidden" name="p" value="'+sessionStorage.getItem('topic')+'">').remove();
                  /*On récupère le titre du message cible*/$('input[name="subject"]').attr('value', sessionStorage.getItem('subject'));
               };
               for(let i = 0; i < params.length; i++){
                  /*On configure chaque paramètre*/if(sessionStorage.getItem(params[i]) != null) $('input[name="'+params[i]+'"]').attr('value', sessionStorage.getItem(params[i]));
               }

               /*Si le mode est défini*/if(sessionStorage.getItem('mode') != null){
                  switch(sessionStorage.getItem('mode')){
                     /*Et si il est reply*/case 'reply':
                        /*On lance la fonction reply*/reply();
                     break;
                     /*Et si il est editpost*/case 'editpost':
                        /*On lance la fonction edit*/edit();
                     break;
                  }
               }
            };
            definePostingMethod();
            /*A la soumission du formulaire*/$('form[action="/post"]').on('submit', function(){
               let content = $('#content').html();
               $('input[name="subject"]').attr('value', $('#title').attr('value'));
               /*Si on est pas en mode édition*/if(sessionStorage.getItem('mode') != 'editpost'){
                  /*On ajoute une div .byForm autour du contenu*/$('input[name="message"]').attr('value', '<div class="byForm">'+content+'</div>');
               }else{ $('input[name="message"]').attr('value', content); }
            });
         });
      </script>
   </head>
   <body>
      <form action="/post" method="post" name="post" enctype="multipart/form-data">
         <!-- Titre du message -->
         <label for="title">titre du message :</label>
         <input id="title" name="title" type="text" placeholder="Titre du message" value=""/><br>
         <div id="content">
            <!-- Contenu du formulaire -->
            <label for="comments">commentaire ? :</label>
            <textarea name="comments" placeholder="Ecrivez votre message"></textarea>
         </div>
         <div class="submitbuttons">
            <!-- Bouton d'envoi du formulaire -->
            <input type="submit" value="Envoyer" name="post">
         </div>
         <div id="options">
            <!-- Les inputs qui gère les options -->
            <input type="hidden" name="mode" value="newtopic">
            <input type="hidden" name="topictype" value="0" checked="checked">
            <input type="hidden" name="message" value="">
            <input type="hidden" name="subject" value="">
            <input type="hidden" name="f" value="1">
         </div>
     </form>
   </body>
</html>

EDIT:  Exclamation Exclamation Malheureusement j'avais fait un message avec les explications mais je pense qu'il y a eu un beug avec les moment ou je parlais des quotes de la touche 7, je n'ai pas le temps ce soir de refaire le message au complet mais j'édite demain, je te laisse quand même les codes en attendant Wink .
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par MlleAlys Jeu 29 Avr 2021 - 16:23

wahou super merci !
Alors je vais surement attendre les explications pour comprendre plus en détail, mais il y a déjà quelques points qui m'interrogent :

- le message posté n'affiche pas le contenu du bloc "commentaire" mais le bloc lui même ^^"
Revenir au formulaire lors édition Sans_t17

- J'aurais aimé garder au moins deux champs différents de "contenu" du message, pour comprendre comment redistribuer chaque partie du message dans le bon champ... Mon formulaire de test est dans ce genre là :
Revenir au formulaire lors édition Sans_t18
et le contenu du message généré ainsi :
Code:
<div id='formresult'>
<div class='contenu1'>Contenu 1</div><div class='contenu2'>Contenu 2</div>
</div>


- Si je ne souhaite pas passer par le formulaire lorsqu'on clique sur "répondre" dans ce forum, il suffit de retirer cette partie là du script ?
Code:
/*Au clique sur Répondre*/$('img[alt="Répondre au sujet"]').parent().on('click', e =>{
      e.preventDefault();
      /*Le reset pour être sur de ne pas passer de mauvaise infos*/resetStorage();
      /*On récupère l'id du topic et configure les variables de session avant de rediriger vers le formulaire*/let topic_id = location.pathname.match(/[0-9]+/)[0];
      sessionStorage.setItem('mode', 'reply');
      sessionStorage.setItem('topic', topic_id);
      window.location = target;
  });
MlleAlys

MlleAlys
Membre actif

Messages : 5967
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Revenir au formulaire lors édition

Message par Self Jeu 29 Avr 2021 - 22:41

Alors Effectivement pour mes tests j'ai fait simple.
Le contenu envoyé est généré par une variable :
Code:
let content = $('#content').html();
Donc si je suis ton exemple et que l'on suis la sémantique ES2015 on peut écrire la variable comme ceci :
Code:
let contenu1 = $('input[name"contenu1"]').attr('value'), contenu2 = $('input[name"contenu2"]').attr('value');
let content = '<div id='formresult'>
<div class='contenu1'>${contenu1}</div><div class='contenu2'>${contenu2}</div>
</div>'
Dans ces quotes le HTML peut être écris sur plusieurs lignes et les variables écrites comme cela ${contenu1} sans avoir à faire de concaténation.

Pour le retour, ce que je pense faire c'est ajouter ceci après les options :
Code:
<div id="hiddencontent"></div>
Puis dans la fonction edit, remplacer cette ligne :
Code:
$('#content').html(sessionStorage.getItem('message'));
Par :
Code:
$('#hiddencontent').html(sessionStorage.getItem('message'));
$('input[name"contenu1"]').attr('value', $('.contenu1').html());
Mais comme dit précédemment la ce sera du cas par cas, donc 1 ligne pour chaque. A moins de bien nommer chaque div, span ou peut importe quelle balise du rendu du message du même nom que les champs du formulaire, dans ce cas on peut essayer de faire une boucle qui le ferais pour nous.

Pour le bouton répondre c'est exactement ça Wink .
Bien sur il faut mettre un peu de CSS pour caché la div What a Face !
Self

Self
Membre actif

Masculin
Messages : 3819
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum